Gdy skrypt service worker obsługuje zdarzenia fetch, przeglądarka czeka na odpowiedź. Choć opóźnienie żądania sieciowego jest ważną częścią oczekiwania, przeglądarka może też czekać na uruchomienie skryptu service worker i uruchomienie 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 – czasami nawet do pół sekundy, gdy procesor jest powolny lub działa w stanie z ograniczonym prądem ze względu na warunki otoczenia. Wzrost wydajności wynikający z unikania sieci prawdopodobnie przeważy czas uruchamiania, gdy odpowiedzi nawigacji są udostępniane z instancji Cache. W przypadku żądań nawigacji wysyłanych do sieci wprowadzenie skryptu service worker może spowodować widoczne opóźnienie.
Włącz wstępne wczytywanie nawigacji
Wstępne wczytywanie nawigacji to funkcja skryptu service worker, która eliminuje opóźnienie spowodowane czasem uruchamiania skryptu service worker. Bez włączonego wstępnego wczytywania nawigacji uruchamianie skryptu service worker i żądanie nawigacji przez niego odbywa się po sobie:
Nie jest to idealne rozwiązanie, ale możesz to naprawić, włączając wstępne wczytywanie nawigacji, dzięki czemu mechanizm Service Worker uruchamia się i żądanie nawigacji odbywa się jednocześnie:
Wstępne wczytywanie nawigacji doskonale sprawdza się w przypadku witryn korzystających z skryptów service worker, ale nie należy włączać tej funkcji w każdej sytuacji. W szczególności witryny, które używają powłoki aplikacji w pamięci podręcznej, nie wymagają wstępnego wczytywania nawigacji, ponieważ pamięć podręczna obsługuje żądanie nawigacyjne znaczników powłoki aplikacji bez opóźnień związanych z nawigacją. W takiej sytuacji wstępnie wczytana odpowiedź zostanie zmarnowana, co nie jest odpowiednie.
Najlepszą metodą na korzystanie z wstępnego wczytywania nawigacji jest sytuacja, w której witryna nie może zapisać kodu HTML w pamięci podręcznej. Zastanów się, gdzie odpowiedzi dotyczące znaczników są dynamiczne i różnią się w zależności od stanu uwierzytelniania. W przypadku tych żądań nawigacji może być stosowana strategia ukierunkowana głównie na sieć (a nawet tylko na sieć). W takim przypadku wstępne wczytywanie nawigacji może mieć duże znaczenie.
Używanie wstępnego wczytywania nawigacji w Workbox
Korzystanie z wstępnego ładowania nawigacji bezpośrednio w skrypcie service worker, który nie korzysta z Workbox, jest trudne. Po pierwsze, nie wszystkie przeglądarki są obsługiwane. Po drugie, może być trudno zdecydować, co zrobić. Aby dowiedzieć się, jak z niej korzystać, zajrzyj do tego świetnego wyjaśnienia, które napisał Jake Archibald.
Panel roboczy upraszcza korzystanie z wstępnego wczytywania nawigacji, ponieważ metoda enable modułu workbox-navigation-preload przeprowadza niezbędne testy obsługi funkcji oraz tworzy odbiornik zdarzeń activate, który to umożliwia.
Dzięki temu korzyści z wstępnego wczytywania nawigacji są urzeczywistniane we wspomagających przeglądarkach dzięki zastosowaniu Workbox do obsługi żądań nawigacji za pomocą modułu obsługi strategii korzystającej głównie z 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, skrzynka robocza z wstępnie załadowaną odpowiedzią odpowiada na żądania nawigacji korzystające ze strategii NetworkFirst lub NetworkOnly.
Jak sprawdzić, czy wstępne wczytywanie nawigacji działa?
W kompilacjach dla programistów Workbox rejestruje wiele o tym, co robi. Jeśli chcesz sprawdzić, czy wstępne wczytywanie nawigacji w Workbox działa, podczas żądania nawigacji otwórz konsolę w obsługiwanej przeglądarce. Zobaczysz wtedy komunikat logu zawierający więcej informacji:
To logowanie nie będzie domyślnie widoczne w kompilacjach produkcyjnych, więc nie zobaczysz go po wdrożeniu skryptu service worker w środowisku produkcyjnym. Jest to jednak świetny sposób na sprawdzenie, czy wstępne wczytywanie nawigacji działa (między innymi).
Dostosowywanie wstępnie wczytywanych odpowiedzi
Podczas korzystania ze wstępnego wczytywania nawigacji może się zdarzyć, że konieczne będzie dostosowanie wstępnie wczytywanych odpowiedzi w backendzie aplikacji. Skrypty service worker przesyłające strumieniowo częściową treść z sieci są jednym ze scenariuszy, w których może się to przydać.
W takich przypadkach warto wiedzieć, że żądania wstępnego wczytywania są wysyłane z zestawem nagłówków Service-Worker-Navigation-Preload z wartością domyślną true:
Service-Worker-Navigation-Preload: true
Następnie w wybranym backendzie aplikacji możesz sprawdzić ten nagłówek i zmodyfikować odpowiedź do swoich potrzeb. Jeśli z jakiegoś powodu wartość domyślna nagłówka sprawia problemy, możesz ją zmienić w kontekście okna. Pamiętaj, że to Ty wykonujesz wszystkie czynności na serwerze, aby odczytać ten nagłówek, i wykraczasz poza zakres Workbox.
Podsumowanie
Wstępne wczytywanie nawigacji jest trudne do bezpośredniego zastosowania, ale warto wykonać ciężką pracę, aby mechanizm service worker nie powstrzymywał przeglądarki przed wysyłaniem żądań nawigacji. Dzięki Workbox możesz korzystać ze wstępnego wczytywania nawigacji, wykonując znacznie mniej pracy. Więcej informacji o module workbox-navigation-preload znajdziesz w dokumentacji referencyjnej.