Dostosowywanie do użytkowników przy użyciu wskazówek klienta

Tworzenie szybko działających stron w każdym miejscu może być trudne. Ogromna liczba możliwości urządzeń i jakość połączonych z nimi sieci może sprawiać wrażenie trudnych do pokonania. Chociaż możemy podjąć zalety korzystania z funkcji przeglądarki w celu poprawy wydajności wczytywania, skąd wiadomo, funkcje urządzenia użytkownika lub jakość jego sieci, połączenia? Rozwiązaniem jest klient .

Wskazówki dla klienta to zestaw nagłówków żądań HTTP, który daje nam wgląd w te aspekty urządzenia użytkownika i sieci, z którą jest on połączony. Według po stronie serwera informacji, możemy zmienić sposób dostarczania treści w zależności od urządzenia i stanu sieci. Może nam to pomóc w tworzeniu promowaniu integracji społecznej.

Liczy się negocjacja treści

Wskazówki dla klienta to kolejna metoda negocjowania treści, która wiąże się ze zmianą odpowiedzi na żądania treści na podstawie nagłówków żądań przeglądarki.

Przykładem negocjowania treści jest Accept nagłówek żądania. opisuje typy treści odczytywane przez przeglądarkę, co którego serwer może użyć do negocjowania odpowiedzi. W przypadku żądań obrazów nagłówka Accept w Chrome to:

Accept: image/webp,image/apng,image/*,*/*;q=0.8

Wszystkie przeglądarki obsługują formaty graficzne, takie jak JPEG, PNG i GIF, w tym przypadku, że przeglądarka także obsługuje WebP oraz APNG. Dzięki tym informacjom możemy aby wynegocjować najlepszy typ obrazu do danej przeglądarki:

<?php
// Check Accept for an "image/webp" substring.
$webp = stristr($_SERVER["HTTP_ACCEPT"], "image/webp") !== false ? true : false;

// Set the image URL based on the browser's WebP support status.
$imageFile = $webp ? "whats-up.webp" : "whats-up.jpg";
?>
<img src="<?php echo($imageFile); ?>" alt="I'm an image!">

Podobnie jak w przypadku usługi Accept wskazówki dla klientów stanowią kolejny sposób negocjowania treści, ale kontekst możliwości urządzenia i stan sieci. Dzięki wskazówkom klienta może podejmować decyzje dotyczące wydajności po stronie serwera np. podczas podejmowania decyzji, czy zasoby niekrytyczne powinny zostać udostępnione którzy mają słabą jakość połączenia sieciowego. W tym przewodniku omówimy wszystkie dostępnych wskazówek i o tym, jak z nich korzystać, aby dostarczać treści które są dostosowane do potrzeb użytkowników.

Włączanie opcji

W przeciwieństwie do nagłówka Accept wskazówki dla klientów nie pojawiają się tylko magicznie (w przypadku tagu z wyjątkiem Save-Data, które omówimy później). Aby zachować co najmniej nagłówków żądań, musisz wybrać, które wskazówki chcesz otrzymywać, wysyłając nagłówek Accept-CH, gdy użytkownik poprosi o zasób:

Accept-CH: Viewport-Width, Downlink

Wartość pola Accept-CH to rozdzielona przecinkami lista żądanych wskazówek dla witryny będzie używany przy określaniu wyników późniejszego żądania zasobu. Gdy Gdy klient odczytuje ten nagłówek, otrzymuje komunikat: „Ta witryna wymaga Viewport-Width i Downlink podpowiedzi dla klientów”. Nie musisz przejmować się konkretnymi wskazówkami. Zajmiemy się nimi za chwilę.

Nagłówki zgody można ustawić w dowolnym języku backendu. Na przykład: PHP można użyć funkcji header. Nagłówki zgody można nawet ustawić za pomocą funkcji http-equiv w tagu <meta>:

<meta http-equiv="Accept-CH" content="Viewport-Width, Downlink" />

Wszystkie wskazówki dla klienta!

Wskazówki dotyczące klienta opisują jedną z dwóch rzeczy: urządzenie, którego użytkownicy używają, z jakiej sieci korzystają do uzyskiwania dostępu do Twojej witryny. Omówmy pokrótce wszystkie dostępnych wskazówek.

Wskazówki dotyczące urządzeń

Niektóre wskazówki dotyczące klienta opisują cechy urządzenia użytkownika, zwykle dla niektórych cech produktu. Niektóre z nich mogą pomóc w wyborze optymalnego zasobu multimedialnego na ekranie danego użytkownika, ale nie wszystkie z nich muszą być skoncentrowane na multimediach.

Zanim przejdziemy do tej listy, warto poznać kilka kluczowych terminów używanych do aby opisać ekrany i rozdzielczość multimediów:

Rozmiar wewnętrzny: rzeczywiste wymiary zasobu multimedialnego. Na przykład, jeśli otwierasz obraz w programie Photoshop, wymiary wyświetlane w oknie rozmiaru obrazu by opisać jego rozmiar wewnętrzny.

Rozmiar wewnętrzny z korektą gęstości: wymiary zasobu multimedialnego po i została poprawiona pod kątem gęstości pikseli. Ma to rozmiar wewnętrzny obrazu. podzielony przez piksel urządzenia proporcje. Weźmy na przykład te znaczniki:

<img
  src="whats-up-1x.png"
  srcset="whats-up-2x.png 2x, whats-up-1x.png 1x"
  alt="I'm that image you wanted."
/>

Załóżmy, że rzeczywisty rozmiar obrazu 1x w tym przypadku to 320 x 240, a Rzeczywisty rozmiar obrazu 2x to 640 x 480. Jeśli te znaczniki są analizowane przez klienta zainstalowana na urządzeniach z współczynnikiem pikseli ekranu równym 2 (np. Retina ekranu), zostanie wysłane żądanie obrazu 2x. Rozmiar wewnętrzny z korektą gęstości Obraz 2x ma wymiary 320 x 240, ponieważ 640 x 480 podzielone przez 2 to 320 x 240.

Rozmiar zewnętrzny: rozmiar zasobu multimedialnego po kodzie CSS i innym układzie. takich jak atrybuty width i height. Zaczynajmy załóżmy, że masz element <img>, który wczytuje obraz z poprawioną gęstością rozmiar wewnętrzny 320 x 240, ale ma też właściwości CSS width i height z zastosowaniem wartości 256px i 192px. W tym przykładzie rozmiar zewnętrzny tego elementu <img> zmieni się na 256 x 192.

Przejdźmy do listy terminologii związanej z konkretnymi urządzeniami, dostępnych dla klientów wskazówek dla klientów.

Szerokość widocznego obszaru

Viewport-Width to szerokość widocznego obszaru użytkownika w pikselach CSS:

Viewport-Width: 320

Tę wskazówkę można wykorzystać razem z innymi wskazówkami dotyczącymi konkretnego ekranu, aby dostarczać obróbki (tj.przycinania) obrazu, które są optymalne dla określonych rozmiarów ekranu. (np.art. kierunek), lub pominąć zasoby, które są niepotrzebne przy bieżącej szerokości ekranu.

DPR

DPR, czyli skrót od współczynnika pikseli urządzenia, zawiera informacje o stosunku pikseli fizycznych do CSS. pikseli na ekranie użytkownika:

DPR: 2

Ta wskazówka jest przydatna przy wybieraniu źródeł obrazów, które odpowiadają gęstość pikseli (jak w przypadku deskryptorów x w srcset ).

Szerokość

Wskazówka Width pojawia się w przypadku żądań zasobów obrazu wysyłanych przez zasadę <img> lub <source> tagi używające sizes . sizes informuje przeglądarkę o zewnętrznym rozmiarze zasobu. Width wykorzystuje ten rozmiar zewnętrzny, aby zażądać obrazu o rozmiarze wewnętrznym, który jest optymalny dla obecnego układu.

Załóżmy na przykład, że użytkownik chce wyświetlić stronę z ekranem o szerokości 320 pikseli CSS. z DPR wynoszącym 2. Urządzenie wczytuje dokument z elementem <img> zawierającym: wartość atrybutu sizes o wartości 85vw (np. 85% szerokości widocznego obszaru rozmiarów ekranu). Jeśli włączona jest podpowiedź Width, klient będzie wysyłać tę wskazówkę Width dla serwera z żądaniem src zasobu <img>:

Width: 544

W tym przypadku klient informuje serwer, że optymalny wewnętrzny Szerokość żądanego obrazu wynosi 85% szerokości widocznego obszaru (272 piksele) pomnożonego przez DPR ekranu (2), co daje 544 piksele.

Ta wskazówka jest szczególnie przydatna, ponieważ uwzględnia nie tylko z dostosowaną do gęstości szerokością ekranu, ale także z tym informacji z zewnętrznym rozmiarem obrazu w układzie. Dzięki temu pozwala negocjować odpowiedzi obrazów, które będą optymalne zarówno dla ekran i układ.

Content-DPR

Choć ekrany mają proporcje pikseli urządzenia, zasoby również mają własne proporcje obrazu. W najprostszym przypadku użycia zasobów doboru zasobów i między urządzeniami a zasobami mogą być takie same. Ale! W sytuacjach, gdy nagłówki DPR i Width, rozmiar zewnętrzny zasobu może aby stworzyć scenariusze, w których te 2 elementy się różnią. Tutaj jest wskazówka Content-DPR odgrywają ważną rolę.

W przeciwieństwie do innych wskazówek dotyczących klienta Content-DPR nie jest nagłówkiem żądania, którego ma używać serwerów, ale raczej serwery nagłówka odpowiedzi muszą wysyłać, gdy tylko DPR i Do wyboru zasobu są używane wskazówki Width. Wartość Content-DPR powinna wyjdź z tego równania:

Content-DPR = [wybrany rozmiar zasobu obrazu] / ([Width] / [DPR])

Gdy zostanie wysłany nagłówek żądania Content-DPR, przeglądarka wie, jak się skalować danego obrazu pasującego do formatu i układu ekranu urządzenia. Bez tego obrazy mogą nie skalować się prawidłowo.

Pamięć urządzenia

Technicznie część pamięci urządzenia API Device-Memory ujawnia przybliżona kwota pamięć bieżące urządzenie ma w GB:

Device-Memory: 2

Możliwym przypadkiem użycia tej podpowiedzi jest zmniejszenie ilości kodu JavaScript do przeglądarek na urządzeniach z ograniczoną pamięcią, ponieważ JavaScript jest najczęściej przeglądarki wymagające dużej ilości zasobów zwykle Wczytywanie. Możesz też wysyłać zdjęcia w mniejszej rozdzielczości DPR, ponieważ wykorzystują one mniej pamięci na dekodowanie.

Wskazówki dotyczące sieci

Interfejs Network Information API udostępnia kolejny kategoria wskazówek dotyczących klienta opisujących wydajność sieci użytkownika połączenia. Uważam, że te wskazówki są najbardziej przydatne. Dzięki nim dostosowywać sposób wyświetlania reklam do użytkowników do klientów korzystających z wolnych połączeń.

RTT

Wskazówka RTT podaje przybliżony czas podróży w obie strony (w milisekundach) przy włączonym warstwa aplikacji. Wskazówka RTT, w przeciwieństwie do warstwy transportu RTT, obejmuje czas przetwarzania serwera.

RTT: 125

Ta wskazówka jest przydatna z powodu opóźnienia wczytywania. Dzięki wskazówce RTT możemy podejmować decyzje na podstawie responsywności sieci, które mogą przyspieszyć dostarczanie całej treści (np. przez pomijanie niektórych żądań).

Link do pobrania

Opóźnienie ma duże znaczenie dla wydajności wczytywania, ale na wydajność ma wpływ przepustowość. . Wskazówka Downlink, wyrażona w megabitach na sekundę (Mb/s), pokazuje wartość przybliżona szybkość pobierania połączenia użytkownika:

Downlink: 2.5

W połączeniu z atrybutem RTT Downlink może ułatwić zmianę sposobu wyświetlania treści które są wyświetlane użytkownikom na podstawie jakości połączenia sieciowego.

ECT

Wskazówka ECT oznacza Effective Connection Type. Jego wartość to jedna z lista typów połączeń, z których każdy opisuje połączenie w określonych zakresach RTT i Downlink .

Ten nagłówek nie wyjaśnia, czym jest rzeczywisty typ połączenia. na przykład nie informuje, czy brama jest dostępna w ramach stacji bazowych sieci komórkowych, czy sieci Wi-Fi. . Analizuje natomiast opóźnienie i przepustowość bieżącego połączenia oraz określa, który profil sieci najbardziej przypomina ten profil. Jeśli na przykład połączysz się przez Wi-Fi i wolną sieć, pole ECT może mieć wartość 2g, który jest najbliższy w przybliżeniu skutecznego połączenia:

ECT: 2g

Prawidłowe wartości dla ECT to 4g, 3g, 2g i slow-2g. Tę wskazówkę można użyć posłuży za punkt wyjścia do oceny jakości połączenia, doprecyzowano za pomocą wskazówek RTT i Downlink.

Zapisz dane

Save-Data to nie tylko wskazówka co do warunków sieci, ale przede wszystkim użytkownik dla której strony powinny przesyłać mniej danych.

Wolę sklasyfikować Save-Data jako wskazówkę dotyczącą sieci, ponieważ wiele czynników w ten sposób działają podobnie do innych wskazówek dotyczących sieci. Użytkownicy mogą też w środowiskach o dużej przepustowości lub małej przepustowości. Ta podpowiedź, kiedy obecny, zawsze wygląda tak:

Save-Data: on

W Google omówiliśmy, co można zrobić Save-Data Jego wpływ na skuteczność reklam może być ogromny. Jest to sygnał, że użytkownicy dosłownie proszą, żeby im było wysyłać mniej rzeczy! Jeśli wysłuchasz ich i będziesz to robić użytkownicy docenią taki sygnał.

Jak zastosować teorię w praktyce

Sposób wykorzystywania wskazówek klienta zależy od Ciebie. Mają tak wiele w ofercie, dostępnych jest wiele opcji. Aby znaleźć potrzebne pomysły, zobaczmy, co wskazówki dla klienta mogą pomóc Sconnie Timber, fikcyjne drewno firmy z siedzibą w osobie na Środkowym Zachodzie. Tak jak często w przypadku pracy zdalnej obszary, połączenia sieciowe mogą być słabe. W tym przypadku technologia taka jak wskazówki klienta może mieć naprawdę duże znaczenie dla użytkowników.

Obrazy elastyczne

Wszystkie przypadki użycia obrazów elastycznych oprócz najprostszych mogą być skomplikowane. A co, jeśli mają różne wersje i warianty tych samych obrazów na różnych ekranach rozmiary – i różne formaty? Znaczniki są bardzo skomplikowane bardzo . Łatwo jest popełnić błąd, łatwo jest zapomnieć lub źle zrozumieć ważne Pojęcia (takie jak sizes).

Chociaż <picture> i srcset to niewątpliwie świetne narzędzia, mogą być czasochłonne ich opracowywanie i utrzymywanie w złożonych przypadkach użycia. Możemy zautomatyzować podczas generowania znaczników, ale to też jest trudne, ponieważ funkcja Usługi <picture> i srcset są na tyle złożone, że wymagają automatyzacji w sposób zapewniający ich elastyczność.

Możesz to uprościć, korzystając ze wskazówek klienta. Negocjowanie z klientem odpowiedzi w postaci obrazów wskazówki mogą wyglądać mniej więcej tak:

1. W razie potrzeby najpierw wybierz obraz (np. zdjęcia skierowane do dzieł sztuki), sprawdzając podpowiedź Viewport-Width.
2. Wybierz rozdzielczość obrazu, sprawdzając podpowiedź Width i podpowiedź DPR, a następnie wybierając źródło, które pasuje do układu obrazu i gęstości ekranu (podobnie jak działają deskryptory x i w w srcset).
3. Wybierz najbardziej optymalny format pliku obsługiwany przez przeglądarkę (Accept co pomaga w większości przeglądarek).

Gdy niepokoił się mój fikcyjny klient, firma produkująca drewno, opracowałem procedura wyboru obrazów elastycznych w języku PHP, która korzysta ze wskazówek dla klienta. Oznaczało to, zamiast wysyłać te znaczniki do wszystkich użytkowników:

<picture>
  <source
    srcset="
      company-photo-256w.webp   256w,
      company-photo-512w.webp   512w,
      company-photo-768w.webp   768w,
      company-photo-1024w.webp 1024w,
      company-photo-1280w.webp 1280w
    "
    type="image/webp"
  />
  <img
    srcset="
      company-photo-256w.jpg   256w,
      company-photo-512w.jpg   512w,
      company-photo-768w.jpg   768w,
      company-photo-1024w.jpg 1024w,
      company-photo-1280w.jpg 1280w
    "
    src="company-photo-256w.jpg"
    sizes="(min-width: 560px) 251px, 88.43vw"
    alt="The Sconnie Timber Staff!"
  />
</picture>

Udało mi się ograniczyć je do następujących wartości dostosowanych do obsługi poszczególnych przeglądarek:

<img
  src="/image/sizes:true/company-photo.jpg"
  sizes="(min-width: 560px) 251px, 88.43vw"
  alt="SAY CHEESY PICKLES."
/>

W tym przykładzie adres URL /image jest skryptem PHP, po którym następują parametry przepisane przez mod_rewrite. it pobiera nazwę pliku obrazu i dodatkowe parametry, aby ułatwić skryptowi backendu wybrać najlepsze zdjęcie w określonych warunkach.

Rozumiem, że „Czy nie jest to tylko ponowne wdrożenie <picture> i srcset w z backendu?” to Twoje pierwsze pytanie.

Tak, ale z pewną różnicą – gdy aplikacja używa wskazówki dla klienta dotyczące przygotowywania odpowiedzi do mediów, większość pracy (jeśli nie wszystkie) wymaga łatwiejszy do automatyzacji, który może obejmować usługę (np. sieć CDN) wykonującą to zadanie. w Twoim imieniu. Natomiast w przypadku rozwiązań HTML nowe znaczniki trzeba wpisywać dla każdego zastosowania. Oczywiście, możesz zautomatyzować generowanie znaczników. Jeśli lub wymagania, ale istnieje duża szansa, że trzeba będzie przemyśleć swoją strategię automatyzacji w przyszłości.

Wskazówki klienta pozwalają rozpocząć od bezstratnej reklamy o wysokiej rozdzielczości który można dynamicznie zmieniać rozmiar, by zoptymalizować dowolną kombinację od strony ekranu i układu. W przeciwieństwie do reguły srcset, która wymaga wyliczenia stałych lista możliwych obrazów do wyboru przez przeglądarkę. Ta metoda ale może być bardziej elastyczny. Z kolei srcset zmusza do oferowania przeglądarkom podstawowego zestawu wariantów – np. 256w, 512w, 768w i 1024w – wskazówki dla klienta oparte na technologii, które mogą wyświetlać się na dowolnej szerokości strony bez konieczności korzystania z ogromnego stosu znaczników.

Oczywiście nie musisz samodzielnie pisać instrukcji wyboru obrazów. Chmurowe korzysta ze wskazówek klienta do tworzenia odpowiedzi graficznych podczas korzystania z interfejsu w_auto , i zaobserwowali, że mediana użytkowników pobiera o 42% mniej bajtów, gdy korzystają z przeglądarek wskazówek dla klientów.

Tylko uważaj! Zmiany w komputerowej wersji Chrome 67 nie obsługują już tej wersji dla klienta z innych domen . Na szczęście te ograniczenia nie mają wpływu na mobilne wersje Chrome. zostaną całkowicie wycofane na wszystkich platformach po pracy nad funkcją są gotowe.

Pomoc dla użytkowników korzystających z powolnych sieci

Wydajność adaptacyjna oznacza, że możemy dostosowywać sposób dostarczania zasobów na podstawie informacji udostępnionych nam przez klienta; konkretnie informacje o bieżącym stanie połączenia sieciowego użytkownika.

Jeśli obawiamy się o stronę Sconnie Timber, staramy się zmniejszyć obciążenie sieci są powolne, a nagłówki Save-Data, ECT, RTT i Downlink są przeanalizowanych w naszym kodzie backendu. Wtedy generujemy jakość sieci wyniku, którego możemy użyć, aby określić, czy należy interweniować z myślą o użytkownikach. Ten wynik sieci mieści się w zakresie od 0 do 1, gdzie 0 to najgorsza wartość jakość sieci możliwej do sieci, a 1 jest najlepsza.

Na początek sprawdzamy, czy występuje Save-Data. Jeśli tak, jest to wynik 0, ponieważ zakładamy, że użytkownik chce, abyśmy zrobili wszystko, co jest konieczne, działają lżej i szybciej.

Jeśli jednak zabraknie Save-Data, bierzemy pod uwagę wartości z ECT, wskazówki RTT i Downlink służące do obliczania wyniku opisującego sieć; jakości połączenia. Źródło generowania wyników sieci kod jest dostępna na GitHubie. Zakładamy, że jeśli użyjemy wskazówek dotyczących sieci w trochę czasu, możemy ulepszać nasze usługi. sieci.

Gdy witryny dostosowują się do informacji podanych przez klienta, nie musimy ich stosować podejście „wszystko albo nic”. Możemy inteligentnie decydować, które zasoby wyślij. Możemy zmodyfikować zasady wyboru obrazów elastycznych, aby przesyłać je w niższej jakości obrazów dla danego wyświetlacza, aby przyspieszyć wczytywanie, gdy jakość sieci jest słabe.

W tym przykładzie widać, jaki wpływ na wskazówki klienta mają poprawia wydajność witryn w wolniejszych sieciach. Poniżej znajduje się test WebPagetest kaskada witryny o wolnej sieci, która nie dostosowuje się do wskazówek klienta:

Pojawił się też kaskada dla tej samej witryny działającej przy tym samym wolnym połączeniu, , witryna korzysta ze wskazówek klienta w celu wyeliminowania niekrytycznych zasobów strony:

Wskazówki klienta skróciły czas wczytywania strony z ponad 45 sekund do mniej niż dziesiątej tej części. W tym scenariuszu nie da się wykorzystać wskazówek dla klienta i mogą być przydatne dla użytkowników poszukujących i wysyłanie informacji przesyłanych przez powolne sieci.

Można też korzystać ze wskazówek klienta, nie tracąc przy tym doświadczenia w przeglądarkach, które ich nie obsługują. Na przykład, jeśli chcemy dostosować zasób symuluje wartość podpowiedzi ECT, a jednocześnie wyświetla pełną w nieobsługiwanych przeglądarkach, możemy ustawić wartość domyślną np.:

// Set the ECT value to "4g" by default.
$ect = isset($_SERVER["HTTP_ECT"]) ? $_SERVER["HTTP_ECT"] : "4g";

W tym przypadku "4g" reprezentuje najwyższą jakość połączenia sieciowego (nagłówek ECT). opisanej przez nas. Jeśli zainicjujemy $ect na "4g", przeglądarki, które nie obsługują klienta nie będzie to miało wpływu na wskazówki. Dołącz do akcji!

Uważaj na pamięci podręczne!

Przy każdej zmianie odpowiedzi opartej na nagłówku HTTP musisz pamiętać o jak pamięci podręczne będą obsługiwać przyszłe pobrania tego zasobu. Vary nagłówek to jest tu niezbędna, ponieważ przypisuje wpisy w pamięci podręcznej do wartości nagłówków żądań i dostarcza ją użytkownikowi. Mówiąc najprościej, jeśli zmienisz dowolną odpowiedź na podstawie nagłówek żądania, prawie zawsze należy umieszczać żądanie tego nagłówka w Vary np.:

Vary: DPR, Width

Jest to jednak poważne zastrzeżenie: nigdy nie chcesz Varyumieszczać plików w pamięci podręcznej. odpowiedzi w przypadku często zmieniającego się nagłówka (np. Cookie), ponieważ te zasobów nie można zapisywać w pamięci podręcznej. Dlatego lepiej unikać Vary na nagłówkach wskazówek dla klienta, takich jak RTT lub Downlink, ponieważ które mogą się często zmieniać. Jeśli chcesz zmienić odpowiedzi w tych nagłówkach, rozważ dodanie klucza tylko do nagłówka ECT, który i zminimalizować liczbę błędów w pamięci podręcznej.

Oczywiście ma to zastosowanie tylko wtedy, gdy odpowiedź przechowujesz w pamięci podręcznej. Nie zapisuj np. zasobów HTML w pamięci podręcznej, jeśli ich zawartość jest dynamiczna, co może negatywnie wpłynąć na wrażenia użytkowników podczas kolejnych wizyt. W takich przypadkach zmieniać takie odpowiedzi w zależności od potrzeb, które uznasz za konieczne, obawiaj się: Vary.

Wskazówki dotyczące klienta w skryptach service worker

Negocjowanie treści nie dotyczy już tylko serwerów. Skrypty service worker działają jako serwery proxy między klientami a serwerami, masz kontrolę nad tym, jak zasoby są generowane przez JavaScript. Obejmuje to wskazówki dotyczące klienta. W mechanizmie Service Worker fetch, możesz użyć metody typu event request.headers.get. odczytuje nagłówki żądań zasobu w następujący sposób:

self.addEventListener('fetch', (event) => {
  let dpr = event.request.headers.get('DPR');
  let viewportWidth = event.request.headers.get('Viewport-Width');
  let width = event.request.headers.get('Width');

  event.respondWith(
    (async function () {
      // Do what you will with these hints!
    })(),
  );
});

W ten sposób możesz odczytywać każdy nagłówek ze wskazówkami dla klienta. Choć to To nie jedyny sposób, aby uzyskać te informacje. Wskazówki dotyczące konkretnej sieci można odczytać w tych równoważnych właściwościach JavaScript w obiekcie navigator:

Wtyczki Imagemin dla typów plików.

Podpowiedź klienta	Odpowiednik JS
„ECT”	`navigator.connection.effectiveType`
„RTT”	`navigator.connection.rtt`
Zapisz dane	`navigator.connection.saveData`
Link do dołu	`navigator.connection.downlink`
„Pamięć urządzenia”	`navigator.deviceMemory`

Ponieważ te interfejsy API nie są dostępne wszędzie tam, gdzie jest potrzebne sprawdzenie funkcji za pomocą in :

if ('connection' in navigator) {
  // Work with netinfo API properties in JavaScript!
}

Tutaj możesz użyć logiki podobnej do jak na serwerze, z wyjątkiem Nie potrzebujesz serwera do negocjowania treści z wykorzystaniem wskazówek klienta. Usługa że tylko pracownicy mogą przyspieszyć i usprawnić proces obsługi, do możliwości wyświetlania treści również wtedy, gdy użytkownik jest offline.

Podsumowanie

Dzięki wskazówkom klienta możemy przyśpieszyć obsługę użytkowników w pełni progresywnej metody. Możemy wyświetlać multimedia w zależności od urządzenia użytkownika możliwości w sposób ułatwiający wyświetlanie elastycznych obrazów w <picture> i srcset, zwłaszcza w złożonych przypadkach użycia. Dzięki temu możemy nie tylko po to, by skrócić czas i wysiłek po stronie programistów, lecz także zoptymalizować zasobów, a zwłaszcza obrazów, w sposób dopasowany do ekranów użytkowników; dokładniej niż i srcset.

Co ważniejsze, możemy wykryć słabe połączenia sieciowe i mosty dla użytkowników, modyfikując to, co i w jaki sposób wysyłamy. Może to spowodować mogą dłużej ułatwiać dostęp do witryn użytkownikom korzystającym z niestabilnych sieci. W połączeniu z pracownikami obsługi klienta możemy tworzyć i dostęp offline.

Wskazówki dla klienta są dostępne tylko w Chrome i opartych na Chromium przeglądarek – można z nich korzystać w sposób, który nie obciąża przeglądarki, które ich nie obsługują. Za pomocą wskazówek klienta zastanów się nad inkluzywne i elastyczne rozwiązania, które uwzględniają urządzenie każdego użytkownika i sieci, z którymi się łączą. Mamy nadzieję, że inni dostawcy przeglądarek zauważą ich wartość i wykażą zamiar ich wdrożenia.

Zasoby

• Automatyczne obrazy elastyczne w połączeniu z klientem Wskazówki
• Wskazówki klienta i obrazy elastyczne – co się zmieniło w Chrome 67
• Wskazówka dla klienta (Prezentacje)
• Szybkie i lekkie aplikacje – Save-Data

Dziękujemy Ilyi Grigorika i Erica Portis, Jeff Posnick, Yoav Weiss i Estelle Weyl. opinie i zmiany dotyczące tego artykułu.