workbox-navigation-precaricamento

"Accelera Service Worker con precaricamenti di navigazione" spiega benissimo che cos'è il precaricamento di navigazione e i vantaggi che offre alle app web il cui service worker non gestisce esplicitamente le richieste di navigazione.

Cosa fa questo modulo?

workbox-navigation-preload gestirà il controllo in fase di runtime per verificare se il browser corrente supporta il precaricamento della navigazione e, in caso affermativo, creerà automaticamente un gestore di eventi activate per abilitarlo.

Anche il codice condiviso all'interno di workbox-core che gestisce l'esecuzione delle richieste di rete in tutto Workbox è stato aggiornato in modo da sfruttare automaticamente una risposta di precaricamento, se disponibile. Ciò significa che tutte le strategie integrate possono sfruttare automaticamente il precaricamento di navigazione, una volta attivato.

Chi deve abilitare i precaricamenti di navigazione?

Gli sviluppatori che gestiscono già le navigazioni rispondendo con HTML pre-memorizzato nella cache (potenzialmente configurato con un'app di riserva di App Shell) non devono abilitare il precaricamento della navigazione. Questa funzionalità è pensata per ridurre la latenza di navigazione per gli sviluppatori che non sono in grado di pre-memorizzare nella cache il proprio codice HTML, ma vogliono comunque utilizzare Workbox per gestire la memorizzazione nella cache di altri asset sui propri siti.

Ad esempio, se stai seguendo lo pattern App Shell e hai già configurato una route di navigazione per utilizzare il codice HTML pre-cache, attivare il precaricamento della navigazione sarà uno spreco. La risposta di rete associata alla richiesta di precaricamento non verrà mai utilizzata, dato che l'HTML pre-cache verrà usato incondizionatamente.

Utilizzo di base

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

Qual è la storia dell'assistenza dei browser?

Attualmente Google Chrome è l'unico browser che supporta il precaricamento di navigazione. enable() verificherà la presenza del supporto del browser in fase di runtime e tenterà di attivare il precaricamento di navigazione solo se è supportato dal browser corrente. È quindi sicuro chiamare enable() incondizionatamente nel service worker.

Tieni presente che questi browser non beneficiano della riduzione della latenza di navigazione e ti consigliamo di misurare attentamente le implicazioni in termini di prestazioni derivanti dall'invio di un worker di servizio che non gestisce le richieste di navigazione e non utilizza il precaricamento di navigazione.

workbox-navigation-preload.disable()

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

workbox-navigation-preload.isSupported()