workbox-nawigacja-wstępne wczytanie

Artykuł „Przyspiesz proces Service Worker z wstępnym wczytywaniem nawigacji” dobrze wyjaśnia, czym jest wstępne ładowanie nawigacji i jakie korzyści oferuje aplikacjom internetowym, których mechanizm Service Worker nie obsługuje bezpośrednio żądań nawigacji.

Co robi ten moduł?

workbox-navigation-preload sprawdzi w czasie działania, czy bieżąca przeglądarka obsługuje wstępne wczytywanie nawigacji. Jeśli tak, automatycznie utworzy moduł obsługi zdarzeń activate, który włączy ten moduł.

Udostępniony kod w workbox-core, który obsługuje tworzenie żądań sieciowych we wszystkich obszarach Workbox, również został zaktualizowany tak, aby automatycznie korzystał z odpowiedzi wstępnego wczytywania, jeśli jest ona dostępna. Oznacza to, że każda z wbudowanych strategii może automatycznie korzystać z wstępnego wczytywania nawigacji po jej włączeniu.

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

Deweloperzy, którzy obsługują już nawigację, odpowiadając z użyciem kodu HTML w pamięci podręcznej (potencjalnie skonfigurowanego przez funkcję zastępczą App Shell), nie muszą włączać wstępnego wczytywania nawigacji. Ta funkcja ma na celu skrócenie opóźnień w nawigacji w przypadku programistów, którzy nie mogą wstępnie buforować kodu HTML, ale chcą używać Workbox do obsługi buforowania innych zasobów w swoich witrynach.

Jeśli np. przestrzegasz wzorca App Shell i masz już skonfigurowaną trasę nawigacji, aby korzystać z pamięci podręcznej HTML, włączenie wstępnego wczytywania nawigacji nie będzie miało wpływu na dane. Odpowiedź sieci powiązana z żądaniem wstępnego wczytywania nigdy nie zostanie użyta, ponieważ kod HTML zapisany w pamięci podręcznej będzie używany bezwarunkowo.

Podstawowe użycie

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);

Jaka jest historia pomocy przeglądarki?

Obecnie Google Chrome jest jedyną przeglądarką, która obsługuje wstępne wczytywanie nawigacji. enable() sprawdzi obsługę przeglądarki w czasie działania i próbuje włączyć wstępne wczytywanie nawigacji tylko wtedy, gdy obsługuje ją bieżąca przeglądarka. Dlatego możesz bezwarunkowo wywołać enable() w skrypcie service worker.

Pamiętaj, że skrócenie opóźnień w nawigacji w tych przeglądarkach nie będzie korzystne. Zalecamy staranne pomiary wpływu na wydajność związane z wysyłaniem skryptu service worker, 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()