Cet atelier de programmation vous explique comment enregistrer un service worker depuis votre application et utiliser les outils pour les développeurs Chrome afin d'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.jscommence par être vide, mais il contiendra le code utilisé pour enregistrer le service worker. Elle est déjà en cours de chargement via un<script>. dans l'élémentindex.htmldu projet.service-worker.jsest é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)
ne sera utilisée que
inscrit(e)
en premier. Pour ce faire, vous pouvez appeler:
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
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
service-worker.js fichier. Il est possible qu'il commence à télécharger les URL à renseigner
en fonction du code de la couche de
install
et
activate
et les gestionnaires d'événements.
L'exécution de code supplémentaire et le téléchargement de ressources
de précieuses ressources que votre navigateur pourrait utiliser pour afficher la page
d'une page Web. Pour éviter ces interférences, nous vous recommandons de retarder
un service worker jusqu'à ce que le navigateur ait fini d'afficher
page actuelle. Un moyen pratique de s'en approcher est d'attendre que le
window.load événement a été déclenché.
En regroupant ces deux points, nous ajoutons ce service worker à usage général
d'inscription à 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 l'emplacement de toute la logique de votre service worker
l'implémentation fonctionne normalement. Vous devez utiliser à la fois un service worker
les événements du cycle de vie,
la
API Cache Storage,
et les connaissances sur le trafic réseau de votre application Web pour créer
service worker, prêt à traiter toutes les requêtes de votre application Web.
Mais... c'est tout pour apprendre 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 consignera
des messages à la console DevTools en réponse à divers événements (mais peu
else):
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
Le code a été ajouté à register-sw.js et à service-worker.js.
consultez la version en ligne de votre exemple de projet et observez
le service worker en action.
- Pour prévisualiser le site, appuyez sur Afficher l'application. Appuyez ensuite 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.
Vous devriez voir des messages de journal ressemblant à ceux-ci : indiquant que le service worker a bien é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, qui est actuellement
activé et en cours d'exécution. Il vous indique également qu'il existe
actuellement un client (ouvert
contrôlé par le service worker.
Vous pouvez utiliser les liens de ce panneau, comme Unregister ou stop, pour
les modifications apportées au 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 consiste à l’idée de un flux de mise à jour.
Après que vos utilisateurs accèdent à une application Web qui enregistre un service worker, ils mettent fin
avec le code de la copie actuelle de service-worker.js installée sur son
un navigateur local. Mais que se passe-t-il lorsque vous mettez
à jour la version de
service-worker.js stocké sur votre serveur Web ?
Lorsqu'un visiteur régulier revient à une URL appartenant à un service worker,
le navigateur demandera automatiquement la dernière version de service-worker.js et
et recherchez d'éventuelles modifications. Si un élément du script de service worker est différent,
le nouveau service worker peut
l'installer, l'activer,
et finissent par 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 pour 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 la modification effectuée, revenez à la version "En ligne" de votre application exemple. Actualisez la page en gardant l'onglet "Application" des outils de développement ouvert. Vous devriez voir quelque chose comme ceci:
Ce code indique que deux versions de votre service worker sont installées à ce stade
point d'accès. La version précédente, déjà activée, est en cours d'exécution.
de la page actuelle. La version mise à jour du service worker est listée
juste en dessous. Il se trouve dans
État waiting,
et attendra jusqu'à ce que tous les onglets ouverts contrôlés par le bouton
un ancien service worker sont fermés.
Ce comportement par défaut garantit que, si votre nouveau
service worker présente une différence de comportement fondamentale par rapport à l'ancien.
Gestionnaire fetch qui répond avec des ressources incompatibles avec les anciennes
de votre application Web, celle-ci n'entre en vigueur que lorsque l'utilisateur ferme
aux instances précédentes de votre application Web.
Récapitulatif
Vous devriez maintenant être familiarisé avec le processus d'enregistrement d'un service worker. et observer le comportement d'un service worker à l'aide des outils de développement 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.