workbox-navigation-precaricamento

L'articolo "Velocizzare il servizio worker con i precaricamenti di navigazione" illustra molto bene che cosa sia il precaricamento di navigazione e i vantaggi che offre alle app web il cui servizio worker non gestisce esplicitamente le richieste di navigazione.

Che cosa fa questo modulo?

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

Anche il codice condiviso all'interno di workbox-core che gestisce le richieste di rete in tutto Workbox è stato aggiornato per sfruttare automaticamente una risposta di precaricamento, se disponibile. Ciò significa che qualsiasi strategia integrata può sfruttare automaticamente il precaricamento della navigazione, una volta attivata.

Chi deve attivare i precarichi di navigazione?

Gli sviluppatori che gestiscono già le navigazioni rispondendo con HTML precompilato (potenzialmente configurato con un fallback di App Shell) non devono attivare il precaricamento della navigazione. Questa funzionalità è rivolta agli sviluppatori che non possono eseguire la precache del codice HTML, ma vogliono comunque utilizzare Workbox per gestire la memorizzazione nella cache di altri asset sui propri siti.

Ad esempio, se segui il pattern App Shell e hai già configurato un percorso di navigazione per utilizzare l'HTML precompilato, attivare il precaricamento della navigazione sarà uno spreco. La risposta della rete associata alla richiesta di precaricamento non verrà mai utilizzata, poiché il codice HTML precompilato verrà utilizzato 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 del supporto dei browser?

Al momento, Google Chrome è l'unico browser che supporta il precaricamento della navigazione. enable() verificherà il supporto del browser in fase di esecuzione e tenterà di attivare il precaricamento della navigazione solo se il browser corrente lo supporta. Pertanto, è sicuro chiamare enable() in modo incondizionato nel tuo worker di servizio.

Tieni presente che questi browser non trarranno vantaggio dalla riduzione della latenza di navigazione e ti consigliamo di misurare attentamente le implicazioni sul rendimento dell'invio di un worker di servizio che non gestisce le richieste di navigazione e non utilizza il precaricamento della navigazione.

workbox-navigation-preload.disable()

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

workbox-navigation-preload.isSupported()