Gdy skrypt service worker obsługuje zdarzenia fetch, przeglądarka czeka na odpowiedź. Chociaż opóźnienie żądania sieciowego to duża część tego okresu, przeglądarka może też czekać na uruchomienie skryptu service worker i wywołanie wywołań zwrotnych zdarzeń fetch.
Czas uruchamiania różni się w zależności od urządzenia i jego możliwości, ale czas ten może być znaczny – może wynosić nawet pół sekundy, jeśli procesor działa wolno lub działa w stanie ograniczenia z powodu warunków otoczenia. Wzrost wydajności wynikający z unikania sieci prawdopodobnie będzie przewyższał czas uruchomienia, jeśli odpowiedzi dotyczące nawigacji są obsługiwane z instancji Cache. W przypadku żądań nawigacji, które trafiają do sieci, wprowadzenie mechanizmu Service Worker może powodować zauważalne opóźnienie.
Wpisz wstępne wczytanie nawigacji
Wstępne wczytywanie nawigacji to funkcja Service Worker, która rozwiązuje problemy wynikające z opóźnienia spowodowanego czasem uruchamiania skryptu service worker. Jeśli nie jest włączone wstępne wczytywanie nawigacji, uruchomienie mechanizmu Service Worker i obsługiwane przez niego żądanie nawigacji będą następujące po sobie:
Nie jest to idealne rozwiązanie, ale można rozwiązać ten problem, włączając wstępne wczytywanie nawigacji, dzięki któremu uruchamianie mechanizmu Service Worker i żądanie nawigacji odbywa się równocześnie:
Wstępne wczytywanie nawigacji doskonale sprawdza się w przypadku witryn używających mechanizmów Service Worker, ale nie należy go włączać za każdym razem. W szczególności witryny, które korzystają z powłoki aplikacji umieszczonej w pamięci podręcznej, nie wymagają wstępnego wczytywania nawigacji, ponieważ pamięć podręczna obsługuje żądania nawigacji dotyczące znaczników powłoki aplikacji bez opóźnienia nawigacji. W takich przypadkach wstępnie załadowana odpowiedź zostanie zmarnowana, co nie jest dobre.
Najlepszy czas na wstępne wczytywanie nawigacji to sytuacja, w której witryna nie może wstępnie buforować kodu HTML. Weźmy pod uwagę witryny, w których odpowiedzi znaczników są dynamiczne i różnią się np. stanem uwierzytelniania. Żądania związane z nawigacją mogą wykorzystywać strategię skoncentrowaną na sieci (lub nawet tylko sieci) – w takiej sytuacji duże znaczenie ma wstępne wczytywanie nawigacji.
Używanie wstępnego wczytywania nawigacji w Workbox
Użycie wstępnego wczytywania nawigacji bezpośrednio w skrypcie service worker nieobsługiwanym przez Workbox jest kłopotliwe. Po pierwsze, nie jest on obsługiwany we wszystkich przeglądarkach. Po drugie, ich wybór może być trudny. Aby dowiedzieć się, jak z niego korzystać, przeczytaj ten świetny film Jake'a Archibalda.
Workbox upraszcza korzystanie z wstępnego wczytywania nawigacji, ponieważ metoda enable modułu workbox-navigation-preload wykonuje niezbędną weryfikację funkcji, a także tworzy detektor zdarzeń activate, aby umożliwić Ci korzystanie z tej funkcji.
W tym celu można wykorzystać korzyści wstępnego wczytywania nawigacji w obsługiwanych przeglądarkach dzięki użyciu Workbox do obsługi żądań nawigacji przy użyciu modułu obsługi strategii skoncentrowanej na sieci:
import * as navigationPreload from 'workbox-navigation-preload';
import {NetworkFirst, StaleWhileRevalidate} from 'workbox-strategies';
import {registerRoute, NavigationRoute, Route} from 'workbox-routing';
import {precacheAndRoute} from 'workbox-precaching';
// Precache the manifest
precacheAndRoute(self.__WB_MANIFEST);
// Enable navigation preload
navigationPreload.enable();
// Create a new navigation route that uses the Network-first, falling back to
// cache strategy for navigation requests with its own cache. This route will be
// handled by navigation preload. The NetworkOnly strategy will work as well.
const navigationRoute = new NavigationRoute(new NetworkFirst({
cacheName: 'navigations'
}));
// Register the navigation route
registerRoute(navigationRoute);
// Create a route for image, script, or style requests that use a
// stale-while-revalidate strategy. This route will be unaffected
// by navigation preload.
const staticAssetsRoute = new Route(({request}) => {
return ['image', 'script', 'style'].includes(request.destination);
}, new StaleWhileRevalidate({
cacheName: 'static-assets'
}));
// Register the route handling static assets
registerRoute(staticAssetsRoute);
Gdy wstępne wczytywanie nawigacji jest włączone, Workbox będzie odpowiadać na żądania nawigacji korzystające ze strategii NetworkFirst lub NetworkOnly z wstępnie załadowaną odpowiedzią.
Jak sprawdzić, czy wstępne wczytywanie nawigacji działa?
W kompilacjach dla programistów Workbox rejestruje dużo informacji o tym, co robi. Jeśli chcesz sprawdzić, czy wstępne wczytywanie nawigacji działa w Workbox, otwórz konsolę w obsługiwanej przeglądarce podczas żądania nawigacji. Wyświetli się wtedy komunikat dziennika o treści:
To logowanie nie będzie domyślnie widoczne w kompilacjach produkcyjnych, więc nie będzie widoczne podczas wdrażania skryptu service worker w środowisku produkcyjnym. To świetny sposób na sprawdzenie, czy wstępne wczytywanie nawigacji działa (m.in.).
Dostosowywanie wstępnie wczytywanych odpowiedzi
W przypadku korzystania z wstępnego wczytywania nawigacji może być konieczne dostosowanie wstępnie wczytywanych odpowiedzi w backendzie aplikacji. Skrypty service worker przesyłające strumieniowo części treści z sieci to jeden z sytuacji, w którym może się to przydać.
W takich przypadkach warto wiedzieć, że żądania wstępnego wczytywania są wysyłane z nagłówkiem Service-Worker-Navigation-Preload ustawionym z wartością domyślną true:
Service-Worker-Navigation-Preload: true
Następnie w wybranym backendzie aplikacji możesz sprawdzić ten nagłówek i dostosować odpowiedź do swoich potrzeb. Jeśli domyślna wartość nagłówka stanowi z jakiegoś powodu problem, możesz ją zmienić w kontekście okna. Pamiętaj tylko, że to co wykonasz na serwerze w celu odczytania tego nagłówka, zależy od Ciebie – poza zakresem Workbox.
Podsumowanie
Wstępne wczytywanie nawigacji jest trudne przy bezpośrednim użyciu, ale warto popracować nad tym, aby mechanizm Service Worker nie powstrzymał przeglądarki od wysyłania żądań nawigacji. Workbox sprawia, że wstępne wczytywanie nawigacji nie wymaga dużo pracy. Aby dowiedzieć się więcej o module workbox-navigation-preload, zapoznaj się z jego dokumentacją.