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 pourraient vous être utiles lorsque vous traitez des service 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.jsest initialement vide, mais contient le code permettant d'enregistrer le service worker. Il est déjà en cours de chargement via une balise<script>dans leindex.htmldu projet.service-worker.jsest également vide. C'est le fichier qui contiendra le service worker pour ce projet.
Ajouter le code d'enregistrement du service worker
Un service worker (même vide, comme le fichier service-worker.js actuel) ne sera utilisé que s'il est enregistré au préalable. Pour ce faire, vous pouvez appeler la méthode suivante:
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 service workers. Cela est particulièrement vrai pour les anciennes versions de navigateurs qui ne se mettent pas à jour automatiquement. Il est donc recommandé d'appeler navigator.serviceWorker.register() de manière conditionnelle, après avoir vérifié si navigator.serviceWorker est pris en charge.
Ensuite, lorsque vous enregistrez un service worker, le navigateur exécute le code de votre fichier service-worker.js et peut potentiellement commencer à télécharger des URL pour remplir les caches, en fonction du code dans les 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 cette interférence, il est recommandé de différer l'enregistrement d'un service worker jusqu'à ce que le navigateur ait fini d'afficher la page actuelle. Un moyen pratique d'obtenir ce résultat consiste à attendre le déclenchement de l'événement window.load.
En regroupant ces deux points, ajoutez ce code d'inscription à un 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
C'est dans votre fichier service-worker.js que se trouve normalement toute la logique d'implémentation de votre service worker. Pour créer un service worker parfaitement conçu, prêt à gérer toutes les requêtes de votre application Web, vous devez combiner les événements de cycle de vie du service worker, l'API Cache Storage et vos connaissances sur le trafic réseau de votre application Web.
Mais... c'est tout pour apprendre plus tard. À ce stade, l'accent est mis sur l'observation de divers événements de service worker et sur l'utilisation des outils de développement Chrome pour déboguer l'état de votre service worker.
Pour ce faire, ajoutez le code suivant à service-worker.js, qui consignera les messages dans la console DevTools en réponse à divers événements (mais 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 worker" dans les outils de développement
Maintenant que vous avez ajouté le code aux fichiers register-sw.js et service-worker.js, vous pouvez accéder à la version en ligne de votre exemple de projet et observer le service worker en action.
- Pour prévisualiser le site, appuyez sur Afficher l'application, puis sur Plein écran
. - Appuyez sur Ctrl+Maj+J (ou Cmd+Option+J sur Mac) pour ouvrir les outils de développement.
- Cliquez sur l'onglet Console.
Les messages de journal suivants doivent s'afficher, indiquant que le service worker a été installé et activé:
Accédez ensuite à l'onglet Applications et sélectionnez le panneau Service workers (Service workers). Ce type de page s'affiche :
Cela vous indique qu'un service worker avec l'URL source service-worker.js, pour l'application Web solar-donkey.glitch.me, est actuellement activé et en cours d'exécution. Il vous indique également qu'un client (l'onglet ouvert) est actuellement contrôlé par le service worker.
Vous pouvez utiliser les liens de ce panneau, tels que Unregister ou stop, pour apporter des modifications au service worker actuellement enregistré à des fins de débogage.
Déclencher le flux de mise à jour d'un 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 accèdent à 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 vers une URL faisant partie du champ d'application d'un service worker, le navigateur demande automatiquement la dernière version de service-worker.js et recherche d'éventuelles modifications. Si un script de service worker est différent, le nouveau service worker aura la possibilité d'installer, d'activer et, à terme, de prendre le contrôle.
Vous pouvez simuler ce flux de mise à jour en revenant dans l'éditeur de code de votre projet et en apportant n'importe quelle modification au code. Un changement rapide serait de remplacer
self.addEventListener('install', (event) => {
console.log('Inside the install handler:', event);
});
par
self.addEventListener('install', (event) => {
console.log('Inside the UPDATED install handler:', event);
});
Une fois la modification effectuée, revenez à la version en ligne de votre application exemple et actualisez la page avec l'onglet "Application" des outils de développement toujours ouvert. Une page de contenu semblable à celle-ci doit s'afficher:
Cela montre que deux versions de votre service worker sont installées à ce stade. 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 indiquée ci-dessous. Il est à l'état waiting et attend 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 prendra effet qu'après l'arrêt par l'utilisateur de toutes les instances précédentes de votre application Web.
En résumé
Vous devriez maintenant être à l'aise avec l'enregistrement d'un service worker et l'observation de son comportement à l'aide des outils pour les développeurs Chrome.
Vous êtes maintenant en bonne position pour commencer à implémenter des stratégies de mise en cache, ainsi que toutes les bonnes choses qui aideront votre application Web à se charger de manière fiable et rapide.