Lorsqu'un service worker gère des événements fetch, le navigateur attend qu'il fournisse une réponse. Bien que la latence de la requête réseau représente une grande partie de l'attente, le navigateur devra peut-être également attendre que le service worker démarre et déclenche des rappels d'événements fetch.
Le temps de démarrage varie en fonction de l'appareil et de ses fonctionnalités, mais il peut être considérable et ne pas dépasser une demi-seconde lorsqu'un processeur est lent ou soumis à des limitations en raison des conditions ambiantes. Le gain de performances lié à l'évitement du réseau est susceptible de l'emporter sur ce temps de démarrage lorsque vos réponses de navigation sont diffusées à partir d'une instance Cache. Pour les requêtes de navigation qui parviennent au réseau, l'introduction d'un service worker peut créer un délai perceptible.
Saisir le préchargement de navigation
Le préchargement de navigation est une fonctionnalité de service worker qui résout le retard causé par le temps de démarrage du service worker. Si le préchargement de navigation n'est pas activé, le démarrage du service worker et la requête de navigation qu'il gère se produisent de manière consécutive:
Ce n'est pas idéal, mais vous pouvez y remédier en activant le préchargement de la navigation, ce qui garantit le démarrage du service worker et la requête de navigation simultanément:
Bien que le préchargement de navigation soit une excellente optimisation des performances pour les sites qui font appel à des service workers, il n'est pas conseillé de l'activer dans toutes les situations. En particulier, les sites qui utilisent un shell d'application en pré-cache n'ont pas besoin de précharger la navigation, car le cache diffuse la requête de navigation pour le balisage du shell d'application sans aucune latence de navigation. Dans ces cas, la réponse préchargée sera gaspillée, ce qui n'est pas idéal.
Le meilleur moment pour utiliser le préchargement de navigation est lorsqu'un site Web ne peut pas effectuer de mise en cache HTML préalable. Pensez aux sites Web sur lesquels les réponses au balisage sont dynamiques et varient en fonction d’éléments tels que l’état d’authentification. Les requêtes de navigation correspondantes peuvent utiliser une stratégie axée sur le réseau (voire une stratégie exclusivement réseau). C'est là que le préchargement de la navigation peut faire une grande différence.
Utiliser le préchargement de navigation dans Workbox
Il est difficile d'utiliser le préchargement de navigation directement dans un service worker non fourni par Workbox. Tout d'abord, elle n'est pas compatible avec tous les navigateurs. Deuxièmement, il peut être difficile d'y arriver. Vous pouvez découvrir comment l'utiliser directement dans ce document explicatif de Jake Archibald.
Workbox simplifie l'utilisation du préchargement de navigation, car la méthode enable du module workbox-navigation-preload effectue les vérifications nécessaires à la compatibilité des fonctionnalités et crée l'écouteur d'événements activate pour l'activer.
À partir de là, les avantages du préchargement de la navigation sont pris en compte dans la prise en charge des navigateurs en utilisant Workbox pour gérer les requêtes de navigation à l'aide d'un gestionnaire de stratégie axé sur le réseau:
import * as navigationPreload from 'workbox-navigation-preload';
import {NetworkFirst, StaleWhileRevalidate} from 'workbox-strategies';
import {registerRoute, NavigationRoute, Route} from 'workbox-routing';
import {precacheAndRoute} from 'workbox-precaching';
// Precache the manifest
precacheAndRoute(self.__WB_MANIFEST);
// Enable navigation preload
navigationPreload.enable();
// Create a new navigation route that uses the Network-first, falling back to
// cache strategy for navigation requests with its own cache. This route will be
// handled by navigation preload. The NetworkOnly strategy will work as well.
const navigationRoute = new NavigationRoute(new NetworkFirst({
cacheName: 'navigations'
}));
// Register the navigation route
registerRoute(navigationRoute);
// Create a route for image, script, or style requests that use a
// stale-while-revalidate strategy. This route will be unaffected
// by navigation preload.
const staticAssetsRoute = new Route(({request}) => {
return ['image', 'script', 'style'].includes(request.destination);
}, new StaleWhileRevalidate({
cacheName: 'static-assets'
}));
// Register the route handling static assets
registerRoute(staticAssetsRoute);
Lorsque le préchargement de navigation est activé, Workbox répond aux requêtes de navigation qui utilisent les stratégies NetworkFirst ou NetworkOnly avec la réponse préchargée.
Comment savoir si le préchargement de la navigation fonctionne ?
Dans les builds de développement, Workbox consigne de nombreuses informations sur son fonctionnement. Pour vérifier si le préchargement de navigation fonctionne dans Workbox, ouvrez la console dans un navigateur compatible lors d'une requête de navigation. Le message de journal suivant s'affiche:
Par défaut, cette journalisation n'est pas visible dans les builds de production. Vous ne la verrez donc pas lorsque vous déployez votre service worker en production, mais il s'agit d'un excellent moyen de vérifier, entre autres, que le préchargement de la navigation fonctionne.
Personnaliser les réponses préchargées
Lorsque vous utilisez le préchargement de navigation, dans certains cas, il peut être nécessaire de personnaliser les réponses préchargées dans un backend d'application. Les service workers qui diffusent du contenu partiel depuis le réseau sont un cas dans lequel cela peut être pratique.
Dans de tels cas, il est utile de savoir que les requêtes de préchargement sont envoyées avec un en-tête Service-Worker-Navigation-Preload défini avec une valeur par défaut de true:
Service-Worker-Navigation-Preload: true
Ensuite, dans le backend d'application de votre choix, vous pouvez rechercher cet en-tête et modifier la réponse en fonction de vos besoins. Si la valeur par défaut de l'en-tête pose problème pour une raison quelconque, vous pouvez la modifier dans le contexte de la fenêtre. Sachez simplement que toute opération que vous effectuez sur le serveur pour lire cet en-tête vous appartient et ne relève pas de Workbox.
Conclusion
Il est difficile d'effectuer correctement le préchargement de la navigation lorsqu'il est utilisé directement, mais le travail acharné en vaut la peine pour s'assurer qu'un service worker n'empêche pas le navigateur d'envoyer des requêtes de navigation. Grâce à Workbox, le préchargement de la navigation est beaucoup plus simple. Pour en savoir plus sur le module workbox-navigation-preload, consultez sa documentation de référence.