workbox-nawigacja-wstępne wczytanie

W artykule „Przygotowanie nawigacji w ramach skryptu service worker” znajdziesz szczegółowe informacje o tym, czym jest wstępne wczytywanie nawigacji, i o korzyściach, jakie daje ono aplikacjom internetowym, których skrypt service worker nie obsługuje wprost żądań nawigacyjnych.

Co robi ten moduł?

workbox-navigation-preload sprawdza w czasie działania, czy bieżąca przeglądarka obsługuje wstępny wczytywanie nawigacji. Jeśli tak, automatycznie tworzy element obsługi zdarzeń activate, aby go włączyć.

Udostępniony kod w workbox-core, który obsługuje żądania sieci w Workbox, został również zaktualizowany, aby automatycznie korzystać z odpowiedzi wstępnego wczytania, jeśli jest ona dostępna. Oznacza to, że po włączeniu tej funkcji każda z wbudowanych strategii może automatycznie korzystać z wstępnego wczytywania nawigacji.

Kto powinien włączyć wstępny wczytywanie nawigacji?

Deweloperzy, którzy już obsługują nawigację, odpowiadając za pomocą zarchiwizowanego kodu HTML (potencjalnie skonfigurowanego z zastępczą aplikacją App Shell), nie muszą włączać wstępnego wczytywania nawigacji. Ta funkcja ma na celu zmniejszenie opóźnień w nawigacji w przypadku deweloperów, którzy nie mogą z powodu ograniczeń pamięci podręcznej zarchiwizować HTML-a, ale chcą używać Workboxa do obsługi pamięci podręcznej innych zasobów na swoich stronach.

Jeśli np. używasz szablonu App Shell i masz już skonfigurowaną ścieżkę nawigacji, aby korzystać z wstępnie zapisanego HTML, włączenie wstępnego wczytywania nawigacji będzie stratą czasu. Odpowiedź sieci powiązana z żądaniem pobierania wstępnego nigdy nie zostanie użyta, ponieważ bezwarunkowo zostanie użyty wcześniej pobrany kod HTML.

Podstawowe zastosowanie

import * as navigationPreload from 'workbox-navigation-preload';
import {NetworkFirst} from 'workbox-strategies';
import {registerRoute, NavigationRoute} from 'workbox-routing';

// Enable navigation preload.
navigationPreload.enable();

// Swap in NetworkOnly, CacheFirst, or StaleWhileRevalidate as needed.
const strategy = new NetworkFirst({
  cacheName: 'cached-navigations',
  plugins: [
    // Any plugins, like `ExpirationPlugin`, etc.
  ],
});

const navigationRoute = new NavigationRoute(strategy, {
  // Optionally, provide a allow/denylist of RegExps to determine
  // which paths will match this route.
  // allowlist: [],
  // denylist: [],
});

registerRoute(navigationRoute);

Jak wygląda obsługa w przeglądarce?

Obecnie Google Chrome jest jedyną przeglądarką, która obsługuje wstępny wczytywanie nawigacji. enable() sprawdza obsługę przeglądarki w czasie działania i próbuje włączyć wstępne wczytywanie nawigacji tylko wtedy, gdy przeglądarka obsługuje tę funkcję. Dlatego w Twoim skrypcie service worker możesz bez obaw wywoływać funkcję enable().

Pamiętaj, że te przeglądarki nie skorzystają z redukcji opóźnienia nawigacji. Zalecamy dokładne zmierzenie wpływu na wydajność wdrożenia workera usługi, który nie obsługuje żądań nawigacji i nie korzysta z wstępnego wczytywania nawigacji.

workbox-navigation-preload.disable()

workbox-navigation-preload.enable(
  headerValue?: string,
)

workbox-navigation-preload.isSupported()