Cet atelier de programmation vous explique comment enregistrer un service worker à partir de votre application Web et comment observer son comportement à l'aide des outils pour les développeurs Chrome. Il aborde également certaines techniques de débogage qui pourraient vous être utiles lors de l'utilisation de 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 il contient le code utilisé pour enregistrer le service worker. Il est déjà chargé via un tag<script>dans leindex.htmldu projet.service-worker.jsest également vide. C'est le fichier qui contiendra les service workers de 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 d'abord enregistré. Pour ce faire, vous pouvez appeler:
navigator.serviceWorker.register(
'/service-worker.js'
)
dans votre fichier register-sw.js.
Toutefois, avant d'ajouter ce code, vous devez prendre en compte quelques points.
Tout d'abord, les navigateurs ne sont pas tous 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 compatible.
Ensuite, lorsque vous enregistrez un service worker, le navigateur exécute le code dans votre fichier service-worker.js et peut éventuellement commencer à télécharger des URL pour remplir les caches, en fonction du code présent 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 ces interférences, il est recommandé de retarder l'enregistrement d'un service worker jusqu'à ce que le navigateur ait fini d'afficher la page actuelle. Un moyen pratique d'estimer cela consiste à attendre le déclenchement de l'événement window.load.
En réunissant 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 de service worker
Votre fichier service-worker.js contient normalement toute la logique de l'implémentation de votre service worker. Vous utilisez à la fois des événements de cycle de vie de service worker, l'API Cache Storage et des informations 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... c'est tout pour apprendre plus tard. À ce stade, l'objectif est d'observer différents événements de service worker et de se familiariser avec les outils de développement de Chrome pour déboguer l'état d'un service worker.
Pour ce faire, ajoutez le code suivant à service-worker.js, qui enregistrera les messages dans la console DevTools en réponse à divers événements (mais peu d'autres opérations):
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 le code a été ajouté 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 View App (Afficher l'application), puis sur Fullscreen (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.
Vous devriez voir des messages de journal semblables aux suivants, indiquant que le service worker a été installé et activé:
Accédez ensuite à l'onglet Applications et sélectionnez le panneau Service workers. Ce type de page s'affiche :
Cela vous indique qu'il existe un service worker dont l'URL source est 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 (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 de flux de mise à jour.
Une fois que vos utilisateurs accèdent à une application Web qui enregistre un service worker, le code de la copie actuelle de service-worker.js est installé dans 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 à une URL appartenant au champ d'application d'un service worker, le navigateur demande automatiquement la dernière version de service-worker.js et vérifie si des modifications ont été apportées. Si un élément du script est différent, le nouveau service worker aura la possibilité d'installer le service, de l'activer, puis de prendre le contrôle.
Pour simuler ce flux de mise à jour, revenez à l'éditeur de code de votre projet et apportez n'importe quelle modification au code. Un changement 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);
});
Une fois cette 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. Le résultat doit ressembler à ceci:
Ce message indique que deux versions de votre service worker sont installées à ce stade. La version précédente, 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 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 prendra effet qu'une fois qu'un utilisateur aura arrêté toutes les instances précédentes de votre application Web.
En résumé
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 de développement de Chrome.
Vous êtes maintenant en mesure de commencer à mettre en œuvre des stratégies de mise en cache et tout ce qu'il vous faut pour permettre à votre application Web de se charger rapidement et de manière fiable et fiable.