Comprendre la mise en cache des travailleurs de service | Au nouveau blog

Introduction

Nous entendons souvent parler des travailleurs des services dans le contexte des techniques de mise en cache, de leur importance dans les PWA et de l’optimisation globale. Ils nous permettent de créer des expériences hors ligne dans des sites Web ou des applications, d’effectuer des activités de synchronisation de fond et de créer des notifications push, entre autres fonctionnalités.

Comprendre la mise en cache des travailleurs de service

Comprenons ce qu’est le travailleur des services et comment les implémenter dans des sites Web ou des applications.

Qu’est-ce qu’un employé de service?

Selon la définition officielle, le travailleur des services est un serveur proxy qui se trouve entre le navigateur et la couche réseau. Il intercepte les demandes de réseau, peut prendre des mesures en fonction de la disponibilité du réseau, mettant à jour les actifs en fonction de l’exigence.

Un travailleur de service est essentiellement un code JavaScript qui s’exécute sur un thread séparé en arrière-plan, sans perturber le thread principal. Il capture les demandes de réseau, peut effectuer une certaine opération et fournir des fonctionnalités de mise en cache et hors ligne. Il agit comme un intermédiaire entre le navigateur et le serveur.

Caractéristiques clés

• Pour éviter les attaques d’homme dans le milieu, les travailleurs de service exécutent uniquement sur le protocole HTTPS et non HTTP.
• Ce sont des travailleurs axés sur les événements, basés sur une architecture basée sur des événements.
• Un travailleur de service n’a pas accès aux API DOM ou Web.
• Il est enregistré contre une origine et un chemin spécifiques.
• Tous les navigateurs ne prennent pas en charge les travailleurs des services, donc la compatibilité doit être vérifiée.

Comment fonctionne la mise en cache des travailleurs de service?

• Le travailleur des services intercepte les demandes faites par la page.
• Il vérifie le cache de l’actif demandé.
• Si l’actif est disponible, il est servi sur la page à partir du cache, sans passer un appel réseau.
• Si l’actif n’est pas disponible, un appel réseau est fait pour le récupérer.
• Une fois l’actif récupéré, il est enregistré dans le cache et servi sur la page.

Flux de travail des travailleurs de service

Comment mettre en œuvre un travailleur des services?

Pour commencer, nous récupérons trois ressources du réseau: un fichier de script, un fichier CSS et un fichier image. Ces ressources seront mises en cache en tant que sauvegarde et peuvent être utilisées lorsqu’il y a une défaillance de réseau ou des erreurs de réponse API.

Au moment de l’enregistrement du travailleur des services, plusieurs événements sont déclenchés dans une séquence. Le premier événement est «Installer», suivi de «Activate» et d’autres événements comme Fetch. Ceux-ci sont utilisés pour implémenter la mise en cache.

Étape 1: Enregistrez le fichier SW.JS

Tout d’abord, créez un fichier One pour la logique des travailleurs de service. Nous nommerons ce SW.JS. Maintenant, à partir du fichier script.js, nous enregistrerons le SW.JS FLE. Dans le fichier SW.JS, nous écouterons les événements clés pour implémenter la mise en cache. Nous devons vérifier si les travailleurs des services sont pris en charge dans le navigateur. En cas de prise en charge, nous enregistrons le fichier SW.JS à partir de notre fichier script.js.

Enregistrer le fonctionnaire

Travailleur de service enregistré

Étape 2: Incluez le chemin des fichiers vers le cache avec un nom de cache unique

Un nom unique est donné au cache et la liste des URL que nous voulons mettre en cache est ajoutée au cache. Au cours de l’événement d’installation, un nouveau cache avec nom unique est ouvert et toutes les URL requises sont ajoutées une par une.

Installer un employé de service

Étape 3: Écoutez l’événement Fetch

Nous ajoutons un écouteur d’événements pour l’événement Fetch pour écouter tous les appels de réseau. Il existe deux approches communes pour gérer l’événement Fetch:

• Réseau d’abord, le repli Cache: Lorsqu’une ressource est demandée, elle est initialement récupérée du réseau. Une fois la ressource récupérée, le cache est mis à jour avec la nouvelle ressource et les informations sont servies à la page. Le cache agit comme une sauvegarde si le réseau échoue pendant la demande ou s’il y a une erreur de réponse API à l’arrière.
• Cache d’abord, se repliez du réseau: Dans cette approche, nous vérifions d’abord si le cache a la ressource pour la demande. Si vous êtes trouvé, nous répondons à l’aide de la version mise en cache. Sinon, nous faisons un appel réseau et répondons avec la ressource récupérée.

Récupérer la demande de réseau

Étape 4: Nettoyez les vieilles caches

Dans la mémoire du cache, il est possible de stocker plusieurs versions d’informations en cache. Il est essentiel de nettoyer les caches obsolètes qui ne sont pas nécessaires. Ce nettoyage se produit généralement pendant l’événement Activate.

Activer le fonctionnaire

Demandes de réseau devant le travailleur des services

Demande de réseau devant le travailleur des services

Demandes de réseau après le travailleur des services

Demande de réseau après le travailleur du service

Cache stocké dans le stockage de cache

Cache stocké dans le stockage de cache

Conclusion

Le travailleur des services est une excellente fonctionnalité pour améliorer les performances du Web et offrir des expériences utilisateur hors ligne supérieures. En utilisant correctement la mise en cache des travailleurs de service, nous pouvons optimiser le temps de chargement et rendre nos applications plus rapides et réactives.

Vous avez trouvé cela utile? PARTAGEZ-LE