Vous êtes-vous déjà demandé comment certains sites Web semblent continuer à fonctionner même lorsque vous êtes hors ligne? Le secret est simple: ces sites Web ont des travailleurs de service.
Les travailleurs de service sont la technologie clé derrière de nombreuses fonctionnalités natives de type application des applications Web modernes.
Que sont les travailleurs des services ?
Les travailleurs des services sont un type spécialisé de Travailleurs Web JavaScript. Un service worker est un fichier JavaScript qui fonctionne un peu comme un serveur proxy. Il intercepte les requêtes réseau sortantes de votre application, vous permettant de créer des réponses personnalisées. Vous pouvez, par exemple, fournir des fichiers mis en cache à l'utilisateur lorsqu'il est hors ligne.
Les techniciens de service vous permettent également d'ajouter des fonctionnalités telles que la synchronisation en arrière-plan à vos applications Web.
Pourquoi les Service Workers ?
Les développeurs Web essaient depuis longtemps d'étendre les capacités de leurs applications. Avant l'arrivée des techniciens de service, vous pouviez utiliser diverses solutions pour rendre cela possible. AppCache est particulièrement remarquable, ce qui rend les ressources de mise en cache pratiques. Malheureusement, il y avait des problèmes qui en faisaient une solution peu pratique pour la plupart des applications.
AppCache semblait être une bonne idée car il vous permettait de spécifier très facilement les actifs à mettre en cache. Cependant, il a fait de nombreuses hypothèses sur ce que vous essayiez de faire, puis s'est horriblement cassé lorsque votre application n'a pas suivi exactement ces hypothèses. Lisez celui de Jake Archibald (malheureusement intitulé mais bien écrit) Le cache d'application est un douchebag pour plus de détails. (La source: MDN)
Les service workers sont la tentative actuelle de réduire les limites des applications Web, sans les inconvénients de technologies comme AppCache.
Cas d'utilisation pour les techniciens de service
Alors, qu'est-ce que les techniciens de service vous laissent faire exactement? Les Service Workers vous permettent d'ajouter des fonctionnalités caractéristiques des applications natives à votre application Web. Ils peuvent également fournir une expérience normale sur les appareils qui ne prennent pas en charge les techniciens de maintenance. Des applications comme celle-ci sont parfois appelées Applications Web progressives (PWA).
Voici quelques-unes des fonctionnalités rendues possibles par les techniciens de service :
- Permettre à l'utilisateur de continuer à utiliser l'application (ou au moins une partie de celle-ci) lorsqu'il n'est plus connecté à Internet. Les techniciens de service y parviennent en servant des actifs mis en cache en réponse aux demandes.
- Dans les navigateurs basés sur Chromium, un agent de service est l'une des conditions requises pour qu'une application Web puisse être installée.
- Les service workers sont nécessaires pour que votre application web puisse implémenter les notifications push.
Le cycle de vie d'un service worker
Les techniciens de service peuvent contrôler les requêtes pour un site entier ou seulement une partie des pages du site. Une page Web particulière ne peut avoir qu'un seul agent de service actif, et tous les agents de service ont un cycle de vie basé sur les événements. Le cycle de vie d'un service worker ressemble généralement à ceci :
- Inscription et téléchargement du travailleur. La vie d'un service worker commence lorsqu'un fichier JavaScript l'enregistre. Si l'enregistrement réussit, le service worker télécharge, puis commence à s'exécuter dans un thread spécial.
- Lorsqu'une page contrôlée par le service worker est chargée, le service worker reçoit un événement 'install'. Il s'agit toujours du premier événement qu'un service worker reçoit, et vous pouvez configurer un écouteur pour cet événement dans le worker. L'événement 'install' est généralement utilisé pour récupérer et/ou mettre en cache toutes les ressources dont le service worker a besoin.
- Une fois que le service worker a terminé l'installation, il reçoit un événement 'activate'. Cet événement permet à l'agent de nettoyer les ressources redondantes utilisées par les agents de service précédents. Si vous mettez à jour un agent de service, l'événement activate ne se déclenchera que lorsque cela sera possible en toute sécurité. C'est une fois qu'il n'y a plus de pages chargées utilisant encore l'ancienne version du service worker.
- Après cela, le technicien de service a le contrôle total de toutes les pages qui ont été chargées après son enregistrement réussi.
- La dernière phase du cycle de vie est la redondance, qui se produit lorsque le service worker est supprimé ou remplacé par une version plus récente.
Comment utiliser les Service Workers en JavaScript
L'API Service Worker (MDN) fournit l'interface qui vous permet de créer et d'interagir avec les service workers en JavaScript.
Les techniciens de service traitent principalement les requêtes réseau et autres événements asynchrones. Par conséquent, l'API de service worker fait un usage intensif de Promesses et programmation asynchrone.
Pour créer un service worker, la première chose à faire est d'appeler le navigateur.serviceWorker.register() méthode. Voici à quoi cela pourrait ressembler :
si ('serviceWorker' dans le navigateur) {
navigator.serviceWorker.register('/sw.js').then(fonction(enregistrement){
console.log('L'enregistrement du service worker a réussi :', enregistrement);
}).catch((erreur) => { console.log('Échec de l'enregistrement du service worker :', Erreur); });
} autre {
console.log('Les techniciens de service ne sont pas pris en charge.');
}
Le bloc if le plus externe effectue la détection des fonctionnalités. Il garantit que le code lié aux techniciens de service ne s'exécutera que sur les navigateurs qui prennent en charge les techniciens de service.
Ensuite, le code appelle le S'inscrire méthode. Il lui passe le chemin vers le service worker (relatif à l'origine du site) pour l'enregistrer et le télécharger. La S'inscrire La méthode accepte également un paramètre facultatif appelé scope, qui peut être utilisé pour limiter les pages contrôlées par le travailleur. Les service workers contrôlent toutes les pages d'une application par défaut. La S'inscrire La méthode renvoie une Promise qui indique si l'enregistrement a réussi.
Si la promesse se résout, le service worker s'est enregistré avec succès. Le code imprime ensuite un objet représentant le service worker enregistré sur la console.
Si le processus d'enregistrement échoue, le code intercepte l'erreur et l'enregistre dans la console.
Ensuite, voici un exemple simplifié de ce à quoi pourrait ressembler le service worker lui-même :
self.addEventListener('installer', (événement) => {
event.waitUntil(NouveauPromettre((résoudre, rejeter) => {
console.log("faire des trucs de configuration")
résoudre()
}))
console.log("L'agent de service a terminé l'installation")
})self.addEventListener('Activer', (événement) => {
event.waitUntil(NouveauPromettre((résoudre, rejeter) => {
console.log("faire des trucs de nettoyage!")
résoudre()
}))
console.log('activation terminée !')
})
self.addEventListener('aller chercher', (événement) => {
console.log("Demande interceptée", un événement)
});
Ce travailleur de service de démonstration a trois écouteurs d'événement, enregistrés contre lui-même. Il en a un pour l'événement 'install', l'événement 'activate' et l'événement 'fetch'.
A l'intérieur des deux premiers écouteurs, le code utilise le attendre jusqu'à méthode. Cette méthode accepte une promesse. Son travail consiste à s'assurer que le travailleur de service attendra que la promesse soit résolue ou rejetée avant de passer à l'événement suivant.
L'écouteur d'extraction se déclenche chaque fois qu'une demande est faite pour une ressource contrôlée par le service worker.
Les ressources contrôlées par un service worker incluent toutes les pages qu'il contrôle, ainsi que tous les actifs référencés dans ces pages.
Améliorez vos applications Web avec les Service Workers
Les service workers sont un type particulier de web worker qui sert un objectif unique. Ils s'assoient devant les demandes du réseau pour activer des fonctionnalités telles que l'accès aux applications hors ligne. L'utilisation de service workers dans une application Web peut considérablement améliorer son expérience utilisateur. Vous pouvez créer des service workers et interagir avec eux à l'aide de l'API service worker.
