Bonjour mes amis!Beaucoup d'entre vous ont probablement entendu parler d'une telle innovation dans l'écosystème JavaScript comme Service Workers, qui sont un élément clé du développement Web moderne. Les travailleurs des services sont de plus en plus populaires, principalement en raison de la popularité des applications Web progressives (PWA).Quand j'ai entendu parler d'eux pour la première fois, je me suis demandé: «Quand devrions-nous utiliser des travailleurs de service? Dans quels scénarios ou contexte pouvons-nous les utiliser? »Dans cet article, nous considérerons plusieurs exemples pratiques d'utilisation de travailleurs de service, qui plus tard, j'ose l'espérer, feront le bonheur de vos utilisateurs.Je pense qu'avant d'analyser des exemples pratiques, il faut au moins esquisser les fondements théoriques du travail des travailleurs des services. Pour les débutants, ce sera une bonne aide dans les efforts futurs.Qu'est-ce qu'un travailleur de service?
Cersis Worker est un script exécuté par un navigateur en arrière-plan. N'oubliez pas qu'un travailleur de service est complètement indépendant de la page avec laquelle il interagit ou à laquelle il sert (servir).En substance, un travailleur de services est un serveur proxy entre une application Web, un navigateur et un réseau.Les employés de service permettent aux applications Web de fonctionner comme des applications natives.Quelques faits sur les travailleurs des services
- Les travailleurs des services n'ont pas d'accès direct au DOM. Pour ce faire, ils utilisent le mécanisme de réponse aux demandes via l'interface postMessages.
- Les travailleurs des services sont annulés de force (arrêtés) lorsqu'ils ne sont pas utilisés. Cela signifie qu'ils sont pilotés par les événements.
- Les travailleurs des services assument l'utilisation de promesses (promesses).
- En raison des grandes capacités, les employés de service ne peuvent être utilisés que via HTTPS. Sur un serveur local, vous pouvez vous passer de HTTPS.
Comment travaillent les travailleurs des services? Coup d'oeil
Les techniciens de service vous permettent d'intercepter les demandes du serveur et de mettre ces demandes en cache afin d'améliorer les performances des applications. Ainsi, des gains de productivité sont obtenus grâce à la mise en cache de tout le contenu.Mais il vaut mieux le voir une fois, alors voici une image montrant le travail d'un travailleur de service:Cycle de vie des travailleurs de service
Comme je l'ai mentionné plus tôt, les travailleurs des services travaillent indépendamment de la page de contrôle. Si vous souhaitez installer un technicien de service dans votre application, la première chose que vous devez faire est de l'enregistrer.Après cela, le navigateur qui a lancé l'installation du service worker passe en arrière-plan:
Cas d'utilisation courants
Maintenant que nous savons comment fonctionnent les travailleurs des services, il est temps de parler de l'endroit où ils sont utilisés.Mise en cache
Comme indiqué ci-dessus, les employés de service peuvent être utilisés pour la mise en cache. Voici quelques exemples:- Seulement mise en cache - vous avez du contenu statique qui ne change jamais.
- Réseau ou cache - vous voulez montrer aux utilisateurs du contenu pertinent avec une condition de téléchargement rapide.
- Cache et mise à jour - vous souhaitez afficher le contenu instantanément et ne vous souciez pas de la synchronisation périodique avec le serveur.
- Mettre en cache, mettre à jour et redémarrer - vous souhaitez afficher le contenu le plus rapidement possible, en mettant implicitement à jour ses parties individuelles et en les affichant de manière "transparente".
Web Push
Web push permet aux applications d'envoyer des notifications push et d'afficher le contenu reçu en réponse à ces notifications.- Diffusez et mettez à jour le contenu - vous souhaitez partager (livrer et recevoir) le contenu disponible.
- Push et contenu - vous souhaitez non seulement travailler avec du texte, mais aussi avec d'autres types d'informations qui enrichissent vos messages.
- Poussée saturée - vous souhaitez afficher des images, le processus de démarrage et d'autres choses qui améliorent le message que vous souhaitez transmettre.
- Push et client - vous souhaitez afficher les notifications en fonction de l'état de l'application.
Cas d'utilisation plus complexes
API Analytics
J'ai une application. Et je veux y ajouter la possibilité de surveiller l'utilisation de l'application. Pour ce faire, je prends une API synchrone pour mettre à jour de temps en temps les données collectées.Équilibreur de charge
Supposons que vous souhaitiez pouvoir choisir le meilleur fournisseur de contenu en fonction des performances du serveur. Dans ce cas, vous avez besoin d'un technicien pour intercepter les demandes et effectuer une sélection.Je vous recommande fortement de visiter ServiceWorke.rs pour un examen plus approfondi des travailleurs de service.Nous pratiquons les compétences
Comme je le dis toujours: "Si vous voulez apprendre à nager, mettez-vous à l'eau." Apprendre une théorie est une chose merveilleuse, mais jusqu'à ce que vous vous salissiez les mains, vous n'apprendrez rien.Inscription des travailleurs de service
Si nous nous tournons à nouveau vers l'illustration du cycle de vie d'un travailleur de service, nous verrons que nous devons d'abord l'installer. Pour ce faire, nous devons l'enregistrer.
if('serviceWorker' in navigator){
console.log('- ')
window.addEventListener('load', () => {
navigator.serviceWorker
.register('/service-worker.js')
.then(registration => {
console.log(`- , scope: ${registration.scope}`)
})
})
.catch(error => {
console.log(` : ${error}`)
})
}
Vous pouvez vérifier le travail de l'agent de service en accédant à: Chrome: // inspect / # service-workers.
De plus, des informations sur le statut du technicien de service peuvent être obtenues dans les outils de développement: Application -> Service Workers.
Et après?
Maintenant, nous devons mettre en cache tous les fichiers. Nous pouvons sélectionner des fichiers à mettre en cache. Voici à quoi ça ressemble:
const CACHE_NAME = 'example.com-v1'
const cacheAssets = ['index.html', 'about.html', 'js/main.js']
self.addEventListener('install', e => {
console.log('- ')
e.waitUntil(
caches
.open(CACHE_NAME)
.then(cache => {
console.log(' -: ')
cache.addAll(cacheAssets)
})
.then(() => {
self.skipWaiting()
})
)
})
Voici ce qui se passe ici:- Nous déterminons le nom du cache (example.com-v1).
- Nous sélectionnons les fichiers à mettre en cache. Pour ce faire, créez un tableau.
- Dans le gestionnaire d'événements «install», nous demandons au navigateur d'attendre la fin de la promesse, puis ouvrons le cache, qui sera enregistré sous le nom «example.com-v1».
- Enfin, ajoutez les fichiers sélectionnés au cache.
Supprimer le cache inutilisé
Ensuite, nous devons supprimer les anciennes versions de cache:
self.addEventListener('activate', e => {
console.log('- ')
e.waitUntil(
caches.keys().then(cacheNames => {
return Promise.all(
cacheNames.map(cache => {
if(cache !== CACHE_NAME){
console.log(' ')
return caches.delete(cache)
}
})
)
})
)
})
Recevoir une réponse
Rien de ce qui précède n'a de sens si nous n'avons aucun moyen d'obtenir du contenu mis en cache.Il peut être obtenu à l'aide du gestionnaire d'événements fetch:
self.addEventListener('fetch', e => {
e.respondWith(
fetch(e.request)
.then(res => {
const copyCache = res.clone()
caches.open(CACHE_NAME).then(cache => {
cache.put(e.request, copyCache)
})
return res
})
.catch(error => caches.match(e.request).then(res => res))
)
})
Tout le code peut être consulté ici .Merci de votre attention.