zone de travail-navigation-préchargement

"Speed up Service Worker with Navigation Preloads" (Accélérer le service worker grâce au préchargement de navigation) explique parfaitement ce qu'est le préchargement de la navigation et les avantages qu'il offre aux applications Web dont le service worker ne gère pas explicitement les requêtes de navigation.

En quoi consiste ce module ?

workbox-navigation-preload gère la vérification au moment de l'exécution pour voir si le navigateur actuel est compatible avec le préchargement de la navigation. Si c'est le cas, il créera automatiquement un gestionnaire d'événements activate pour l'activer.

Le code partagé dans workbox-core, qui gère les requêtes réseau sur l'ensemble de Workbox a également été mis à jour pour tirer automatiquement parti d'une réponse de préchargement, s'il est disponible. Cela signifie que toutes les stratégies intégrées peuvent automatiquement bénéficier du préchargement de la navigation, une fois qu'il est activé.

Qui doit activer le préchargement de la navigation ?

Les développeurs qui gèrent déjà les navigations en répondant avec du code HTML en pré-cache (potentiellement configuré avec une création de remplacement à l'interface App Shell) n'ont pas besoin d'activer le préchargement de la navigation. Cette fonctionnalité est conçue pour réduire la latence de navigation pour les développeurs qui ne peuvent pas mettre en cache leur code HTML en pré-cache, mais qui souhaitent tout de même utiliser Workbox pour gérer la mise en cache d'autres éléments sur leurs sites.

Par exemple, si vous suivez le modèle App Shell et que vous avez déjà configuré un itinéraire de navigation pour utiliser le code HTML en pré-cache, activer le préchargement de la navigation sera un gaspillage. La réponse réseau associée à la requête de préchargement ne sera jamais utilisée, car le code HTML en pré-cache sera utilisé de manière inconditionnelle.

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

En quoi consiste l'assistance pour les navigateurs ?

Actuellement, Google Chrome est le seul navigateur compatible avec le préchargement de la navigation. enable() vérifie si le navigateur est compatible au moment de l'exécution et tente d'activer le préchargement de navigation uniquement si le navigateur actuel le permet. Vous pouvez donc appeler enable() de manière inconditionnelle dans votre service worker.

Sachez que ces navigateurs ne bénéficieront pas de la réduction de la latence de navigation. Nous vous recommandons donc de mesurer soigneusement les conséquences sur les performances de l'envoi d'un service worker qui ne gère pas les requêtes de navigation et n'utilise pas le préchargement de navigation.

workbox-navigation-preload.disable()

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

workbox-navigation-preload.isSupported()