Funkcje natychmiastowej nawigacji

Uzupełnianie tradycyjnych technik wstępnego pobierania za pomocą usług robotów.

Wykonywanie zadania w witrynie zwykle wymaga wykonania kilku czynności. Na przykład zakup produktu w witrynie e-commerce może obejmować wyszukanie produktu, wybranie go z listy wyników, dodanie do koszyka i dokonanie płatności.

W języku technicznym przewijanie różnych stron oznacza wysyłanie żądania nawigacji. Zwykle nie używa się długotrwałych nagłówków Cache-Control do umieszczania w pamięci podręcznej odpowiedzi HTML na żądanie nawigacyjne. Zwykle powinny one być zaspokajane przez sieć za pomocą Cache-Control: no-cache, aby zapewnić, że kod HTML wraz z łańcuchem kolejnych żądań sieciowych jest (w miarę) aktualny. Wymagana zmiana sieci za każdym razem, gdy użytkownik przechodzi na nową stronę, może niestety oznaczać, że każda zmiana może być powolna, a co najmniej nie będzie zawsze szybka.

Aby przyspieszyć te żądania, jeśli możesz przewidzieć działanie użytkownika, możesz z wyprzedzeniem poprosić o te strony i komponenty oraz przechowywać je w pamięci podręcznej przez krótki czas, dopóki użytkownik nie kliknie tych linków. Ta technika nazywa się wstępnym pobieraniem i jest zwykle implementowana przez dodanie do stron tagów <link rel="prefetch">, które wskazują zasób do wstępnego pobierania.

W tym przewodniku omawiamy różne sposoby korzystania z usług działających w tle jako uzupełnienia tradycyjnych technik wstępnego pobierania.

Przypadki produkcyjne

MercadoLibre to największa witryna e-commerce w Ameryce Łacińskiej. Aby przyspieszyć nawigację, dynamicznie wstrzykują tagi <link rel="prefetch"> w niektórych częściach procesu. Na przykład na stronach z listą wyników pobieranie następnej strony wyników następuje, gdy użytkownik przewinie stronę do samego dołu:

Zrzut ekranu stron z informacjami o produkcie w MercadoLibre (1 i 2) oraz tagu linkowania z poprzednim pobieraniem łączącego obie strony

Pliki pobrane w poprzednim czasie są pobierane z priorytetem „Najniższy” i przechowywane w pamięci podręcznej HTTP lub pamięci podręcznej (w zależności od tego, czy zasób można przechowywać w pamięci podręcznej), przez czas, który różni się w zależności od przeglądarki. Na przykład w wersji Chrome 85 ta wartość wynosi 5 minut. Zasoby są przechowywane przez 5 minut, po których obowiązują normalne zasady Cache-Control dotyczące zasobu.

Korzystanie z buforowania w ramach usługi workera może wydłużyć czas życia zasobów z wyprzedzeniem poza 5-minutowy limit.

Na przykład włoski portal sportowy Virgilio Sport używa usług workerów do wstępnego pobierania najpopularniejszych postów na stronie głównej. Korzystają też z interfejsu Network Information API, aby uniknąć pobierania w tle w przypadku użytkowników korzystających z połączenia 2G.

Logo Virgilio Sport

W wyniku tych działań w ciągu 3 tygodni czas wczytywania stron z artykułami skrócił się o 78%, a liczba wyświetleń artykułów wzrosła o 45%.

Zrzut ekranu stron głównej i artykułów w witrynie Virgilio Sport z danymi o wpływie pobierania w poprzednim.

Wdrożenie wcześniejszego pobierania za pomocą Workbox

W następnej sekcji pokażemy na przykładzie Workboxa, jak wdrażać w usługach workerów różne techniki buforowania, które mogą być używane jako uzupełnienie <link rel="prefetch"> lub nawet jako jego zamiennik, ponieważ całkowicie delegują to zadanie na usługę workera.

1. Wczytaj wstępnie strony statyczne i podresury strony

Przedwczesna pamięć podręczna to możliwość zapisywania plików w pamięci podręcznej przez usługę w trakcie instalowania.

W tych przypadkach do wstępnego przechowywania danych wykorzystuje się podobne cele jak w przypadku wstępnego pobierania: przyspieszenie nawigacji.

Wstępne wczytywanie stron statycznych

W przypadku stron generowanych w czasie kompilacji (np. about.html, contact.html) lub w przypadku witryn całkowicie statycznych można po prostu dodać dokumenty witryny do listy precache, dzięki czemu będą one dostępne w pamięci podręcznej za każdym razem, gdy użytkownik do nich zagląda:

workbox.precaching.precacheAndRoute([
 
{url: '/about.html', revision: 'abcd1234'},
 
// ... other entries ...
]);

Wstępne wczytywanie podzasobów strony

Wstępne pobieranie statycznych zasobów, których mogą używać różne sekcje witryny (np. JavaScript, CSS itp.), to ogólna dobra praktyka, która może dodatkowo zwiększyć wydajność w scenariuszach wstępnego pobierania.

Aby przyspieszyć nawigację w witrynie e-commerce, możesz użyć tagów <link rel="prefetch"> na stronach z informacjami o produkcie, aby z wyprzedzeniem pobrać strony ze szczegółami pierwszych kilku produktów na stronie z informacjami o produkcie. Jeśli masz już zapisane w pamięci podręcznej podzasoby strony produktu, może to jeszcze przyspieszyć nawigację.

Aby to zrobić:

  • Dodaj do strony tag <link rel="prefetch">:
 <link rel="prefetch" href="/phones/smartphone-5x.html" as="document">
  • Dodaj podzasoby strony do listy zasobów do wstępnego buforowania w usługach:
workbox.precaching.precacheAndRoute([
 
'/styles/product-page.ac29.css',
 
// ... other entries ...
]);

2. wydłużenie czasu przydatności zasobów w ramach funkcji wstępnego pobierania;

Jak wspomnieliśmy wcześniej, <link rel="prefetch"> pobiera zasoby i przechowuje je w pamięci podręcznej HTTP przez ograniczony czas, po którym zaczynają obowiązywać reguły Cache-Control dotyczące danego zasobu. Od wersji 85 Chrome ta wartość wynosi 5 minut.

Usługa workera umożliwia wydłużenie czasu działania stron z wczytywaniem wstępnym, a także zapewnia dodatkowe korzyści, ponieważ zasoby te są dostępne w trybie offline.

W poprzednim przykładzie można uzupełnić <link rel="prefetch"> używany do wstępnego pobierania strony produktu o strategię buforowania Workboxa w czasie wykonywania.

Aby to zrobić:

  • Dodaj do strony tag <link rel="prefetch">:
 <link rel="prefetch" href="/phones/smartphone-5x.html" as="document">
  • W przypadku tych typów żądań w usłudze roboczej należy zastosować strategię buforowania w czasie wykonywania:
new workbox.strategies.StaleWhileRevalidate({
  cacheName
: 'document-cache',
  plugins
: [
   
new workbox.expiration.Plugin({
      maxAgeSeconds
: 30 * 24 * 60 * 60, // 30 Days
   
}),
 
],
});

W tym przypadku zdecydowaliśmy się na strategię sprawdzania poprawności po upływie określonego czasu. W ramach tej strategii strony mogą być pobierane równolegle z pamięci podręcznej i z sieci. Odpowiedź pochodzi z pamięci podręcznej (jeśli jest dostępna), a w przeciwnym razie z sieci. Pamięć podręczna jest zawsze aktualizowana zgodnie z odpowiedzią sieci po każdym zrealizowanym żądaniu.

3. Przekazywanie pobierania w tle do usługi workera

W większości przypadków najlepiej jest użyć <link rel="prefetch">. Tag to wskazówka dotycząca zasobów, która ma na celu zwiększenie efektywności wstępnego pobierania.

W niektórych przypadkach lepiej jednak całkowicie powierzyć to zadanie usługowemu procesowi w tle. Na przykład: aby z wyprzedzeniem pobrać kilka pierwszych produktów na stronie z listą produktów renderowanych po stronie klienta, może być konieczne dynamiczne wstrzyknięcie na stronie kilku tagów <link rel="prefetch"> na podstawie odpowiedzi interfejsu API. Może to chwilowo zająć czas w głównym wątku strony i utrudnić implementację.

W takich przypadkach użyj strategii komunikacji „strona do workera usługi”, aby całkowicie zlecić zadanie wstępnego pobierania workerowi usługi. Ten typ komunikacji można uzyskać za pomocą funkcji worker.postMessage():

Ikona strony, która komunikuje się dwukierunkowo z usługą.

Pakiet okna Workbox upraszcza ten rodzaj komunikacji, abstrahując wiele szczegółów wywołania.

Wstępne pobieranie z oknem Workbox można zaimplementować w ten sposób:

  • Na stronie: wywołaj skrypt service worker, przekazując mu typ wiadomości i listę adresów URL do pobrania w ramach wstępnego pobierania:
const wb = new Workbox('/sw.js');
wb
.register();

const prefetchResponse = await wb.messageSW({type: 'PREFETCH_URLS', urls: […]});
  • W skrypcie service worker: zaimplementuj element obsługi wiadomości, aby wysyłać zapytanie fetch() do każdego adresu URL, który ma być pobierany z poziomu pamięci podręcznej:
addEventListener('message', (event) => {
 
if (event.data.type === 'PREFETCH_URLS') {
   
// Fetch URLs and store them in the cache
 
}
});