zone de travail-navigation-préchargement

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

À quoi sert ce module ?

workbox-navigation-preload se chargera de vérifier au moment de l'exécution si le navigateur actuel est compatible de navigation et, le cas échéant, 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 dans l'ensemble de Workbox a également été mis à jour pour tirer automatiquement parti d'une réponse de préchargement, si elle est disponible. Cela signifie que toutes les stratégies intégrées peuvent automatiquement tirer parti du préchargement de la navigation une fois qu'il est activé.

Qui doit activer les préchargements de navigation ?

Les développeurs qui gèrent déjà les navigations en répondant avec du code HTML en pré-cache configurés avec une création de remplacement App Shell) n'ont pas besoin d'activer le préchargement de la navigation. Cette fonctionnalité vise à réduire la latence de navigation pour les développeurs qui ne peuvent pas pré-cacher leur code HTML, mais qui souhaitent tout de même utiliser Workbox pour gérer le 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 parcours de navigation pour utiliser le code HTML préchargé, l'activation du préchargement de la navigation serait un gaspillage. La réponse réseau associée à la requête de préchargement ne sera jamais utilisée, car le code HTML préchargé sera utilisé sans condition.

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

Quelle est l'histoire de l'assistance pour les navigateurs ?

Actuellement, Google Chrome est le seul navigateur compatible avec le préchargement de navigation. enable() vérifie la compatibilité du navigateur au moment de l'exécution et ne tente d'activer le préchargement de la navigation que si le navigateur actuel le prend en charge. Il s'agit donc vous pouvez appeler enable() sans condition 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 de mesurer attentivement les conséquences sur les performances de l'envoi d'un worker de service 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()