Travailler avec des service workers

Jeff Posnick

Cet atelier de programmation vous explique comment enregistrer un service worker depuis votre application Web et utiliser les outils pour les développeurs Chrome pour observer son comportement. Il présente également certaines techniques de débogage qui peuvent vous être utiles lorsque vous travaillez avec des services workers.

Se familiariser avec l'exemple de projet

Les fichiers de l'exemple de projet les plus pertinents pour cet atelier de programmation sont les suivants:

  • register-sw.js commence par être vide, mais il contiendra le code utilisé pour enregistrer le service worker. Il est déjà chargé via une balise <script> dans le index.html du projet.
  • service-worker.js est également vide. Il s'agit du fichier qui contiendra le service worker de ce projet.

Ajouter le code d'enregistrement du service worker

Un service worker (même vide, comme le fichier service-worker.js actuel) n'est pas utilisé tant qu'il n'a pas été enregistré. Pour ce faire, appelez:

navigator.serviceWorker.register(
  '/service-worker.js'
)

dans votre fichier register-sw.js.

Avant d'ajouter ce code, vous devez toutefois prendre en compte quelques points.

Tout d'abord, tous les navigateurs ne sont pas compatibles avec les services workers. Cela est particulièrement vrai pour les anciennes versions de navigateurs qui ne sont pas mises à jour automatiquement. Il est donc recommandé d'appeler navigator.serviceWorker.register() de manière conditionnelle, après avoir vérifié si navigator.serviceWorker est compatible.

Deuxièmement, lorsque vous enregistrez un service worker, le navigateur exécute le code de votre fichier service-worker.js et peut commencer à télécharger des URL pour remplir les caches, en fonction du code des gestionnaires d'événements install et activate de votre service worker.

L'exécution de code supplémentaire et le téléchargement d'éléments peuvent utiliser des ressources précieuses que votre navigateur pourrait utiliser pour afficher la page Web actuelle. Pour éviter ces interférences, il est recommandé de retarder l'enregistrement d'un service worker jusqu'à ce que le navigateur ait terminé de générer la page en cours. Un moyen pratique d'approximer cela consiste à attendre que l'événement window.load ait été déclenché.

En combinant ces deux points, ajoutez ce code d'enregistrement de service worker à usage général à votre fichier register-sw.js:

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js');
  });
}

Ajouter du code de journalisation du service worker

Votre fichier service-worker.js est l'endroit où toute la logique de l'implémentation de votre service worker se trouve normalement. Vous utiliserez un mélange des événements de cycle de vie du service worker, de l'API Cache Storage et de vos connaissances sur le trafic réseau de votre application Web pour créer un service worker parfaitement conçu, prêt à gérer toutes les requêtes de votre application Web.

Mais… vous en apprendrez plus à ce sujet plus tard. À ce stade, l'objectif est d'observer divers événements de service worker et de vous familiariser avec les outils pour les développeurs de Chrome pour déboguer l'état de votre service worker.

Pour ce faire, ajoutez le code suivant à service-worker.js, qui consigne les messages dans la console DevTools en réponse à divers événements (mais ne fait pas grand-chose d'autre):

self.addEventListener('install', (event) => {
  console.log('Inside the install handler:', event);
});

self.addEventListener('activate', (event) => {
  console.log('Inside the activate handler:', event);
});

self.addEventListener(fetch, (event) => {
  console.log('Inside the fetch handler:', event);
});

Se familiariser avec le panneau "Service Workers" dans les outils de développement

Maintenant que vous avez ajouté le code aux fichiers register-sw.js et service-worker.js, il est temps d'accéder à la version en ligne de votre exemple de projet et d'observer le service worker en action.

  • Pour prévisualiser le site, appuyez sur Afficher l'application, puis sur Plein écran plein écran.
  • Appuyez sur Ctrl+Maj+J (ou Cmd+Option+J sur Mac) pour ouvrir DevTools.
  • Cliquez sur l'onglet Console.

Les messages de journal suivants devraient s'afficher, indiquant que le service worker a été installé et activé:

Indique que le service worker est installé et activé.

Accédez ensuite à l'onglet Applications, puis sélectionnez le panneau Service Workers (Service workers). Ce type de page s'affiche :

Affiche les détails du service worker dans le panneau du service worker.

Cela vous indique qu'un service worker avec une URL source de service-worker.js, pour l'application Web solar-donkey.glitch.me, est actuellement activé et en cours d'exécution. Il indique également qu'un client (onglet ouvert) est actuellement contrôlé par le service worker.

Vous pouvez utiliser les liens de ce panneau, comme Unregister ou stop, pour modifier le service worker actuellement enregistré à des fins de débogage.

Déclencher le flux de mise à jour du service worker

L'un des concepts clés à comprendre lors du développement avec des service workers est l'idée d'un flux de mise à jour.

Une fois que vos utilisateurs ont accédé à une application Web qui enregistre un service worker, ils obtiennent le code de la copie actuelle de service-worker.js installée sur leur navigateur local. Mais que se passe-t-il lorsque vous mettez à jour la version de service-worker.js stockée sur votre serveur Web ?

Lorsqu'un visiteur régulier revient sur une URL qui relève du champ d'application d'un service worker, le navigateur demande automatiquement la dernière service-worker.js et vérifie les modifications. Si un élément du script du service worker est différent, le nouveau service worker aura la possibilité de s'installer, de s'activer et, éventuellement, de prendre le contrôle.

Vous pouvez simuler ce flux de mise à jour en revenant à l'éditeur de code de votre projet et en apportant n'importe quelle modification au code. Une modification rapide consisterait à remplacer

self.addEventListener('install', (event) => {
  console.log('Inside the install handler:', event);
});

avec

self.addEventListener('install', (event) => {
  console.log('Inside the UPDATED install handler:', event);
});

Après avoir effectué cette modification, revenez à la version en direct de votre application exemple et actualisez la page avec l'onglet "Application" de DevTools toujours ouvert. Vous devriez voir un message semblable à celui-ci:

Affiche deux versions de service worker installées.

Cela montre qu'à ce stade, deux versions de votre service worker sont installées. La version précédente, qui était déjà activée, est en cours d'exécution et contrôle la page actuelle. La version mise à jour du service worker est listée juste en dessous. Il est à l'état waiting et restera en attente jusqu'à ce que tous les onglets ouverts contrôlés par l'ancien service worker soient fermés.

Ce comportement par défaut garantit que si votre nouveau service worker présente une différence fondamentale de comportement par rapport à l'ancien (par exemple, un gestionnaire fetch qui répond avec des ressources incompatibles avec les anciennes versions de votre application Web), il ne sera pas appliqué tant qu'un utilisateur n'aura pas fermé toutes les instances précédentes de votre application Web.

Récapitulatif

Vous devriez maintenant être à l'aise avec le processus d'enregistrement d'un service worker et d'observation de son comportement à l'aide des outils pour les développeurs de Chrome.

Vous êtes maintenant en mesure de commencer à implémenter des stratégies de mise en cache et toutes les bonnes choses qui aideront votre application Web à se charger de manière fiable et rapide.