L'avantage de l'API JavaScript Serviceworker est qu'il permet aux développeurs Web de contrôler facilement les caches. Bien que l'utilisation de technologies telles que ETAGS soit également une technologie pour contrôler les caches, l'utilisation de JavaScript permet aux programmes de contrôler les caches plus puissantes et librement. Bien sûr, Strong a ses avantages et ses inconvénients - vous devez faire un traitement après le traitement. Le soi-disant traitement après le soins est de nettoyer le cache.
Voyons comment créer un objet de cache, ajouter les données de cache de demande dans le cache, supprimer les données de cache de demande du cache et enfin comment supprimer complètement le cache.
Déterminez la prise en charge du navigateur pour l'API du cache d'objet Cache
Vérifiez si le navigateur prend en charge l'API Cache ...
if ('caches' dans la fenêtre) {// a un support!}… Vérifiez s'il y a un objet cache dans la fenêtre.
Créer un objet de cache
La façon de créer un objet de cache consiste à utiliser caches.open () et à passer dans le nom du cache:
caches.open ('test-cache'). puis (fonction (cache) {// le cache est créé et vous pouvez y accéder maintenant});Cette méthode caches.open renvoie une promesse et l'objet de cache est nouvellement créé. S'il a déjà été créé, il ne sera pas recréé.
Ajouter des données mises en cache
Pour ce type de cache, vous pouvez le considérer comme un tableau d'objets de demande, et les données de réponse obtenues par la demande de demande seront stockées dans l'objet de cache par valeur clé. Il existe deux façons d'ajouter des données au cache: ajouter et addall. Utilisez ces deux méthodes pour ajouter l'adresse de la demande à mettre en cache. Pour une introduction à l'objet de demande, vous pouvez vous référer à l'article API Fetch.
Utilisez la méthode Addall pour ajouter des demandes de cache en lots:
caches.open ('test-cache'). puis (fonction (cache) {cache.addall (['/', '/images/logo.png']) .Then (function () {// cached!});});Cette méthode Addall peut accepter un tableau d'adresse en tant que paramètre, et les données de réponse de ces adresses de demande seront mises en cache dans l'objet Cache. Addall renvoie une promesse. Pour ajouter une seule adresse, utilisez la méthode ADD:
cache.open ('test-cache'). puis (fonction (cache) {cache.add ('/ page / 1'); // L'adresse "/ page / 1" sera demandée et les données de réponse seront mises en cache.});La méthode Add () peut également accepter une demande personnalisée:
caches.open ('test-cache'). puis (fonction (cache) {cache.add (new request ('/ page / 1', {/ * Paramètre de demande * /}));});Il est très similaire à la méthode Add (). La méthode put () peut également ajouter l'adresse de demande et ajouter ses données de réponse en même temps:
fetch ('/ page / 1'). puis (fonction (réponse) {return caches.open ('test-cache'). alors (fonction (cache) {return cache.put ('/ page / 1', réponse);});});Accéder aux données mises en cache
Pour afficher les données de demande modifiées, nous pouvons utiliser la méthode Keys () dans l'objet Cache pour obtenir tous les objets de demande mis en cache dans un formulaire de tableau:
cache.open ('test-cache'). puis (fonction (cache) {cache.keys (). puis (fonction (cachedEquests) {console.log (cachedRequests); // [request, request]});}); / * request {bodysed: false ficed "Suivez" référent: "" URL: "http://www.webhek.com/images/logo.png"Si vous souhaitez afficher le contenu de réponse de la demande de demande mise en cache, vous pouvez utiliser la méthode cache.match () ou cache.matchall ():
caches.open ('test-cache'). puis (fonction (cache) {cache.match ('/ page / 1'). puis (fonction (correspondance correspondant) {console.log (correspondance correspondant);});}); / * Response {body: (...), body utilisé: false, "Basocy: Url: true, status: 200, statustext:" ok "", ",", Url: True, statut: 200, statustext: "OK", "Tyle: Url: True, Status: 200, Statustext:" OK "", " "https://www.webhek.com/page/1"Pour plus d'informations sur l'utilisation et les détails des objets de réponse, vous pouvez vous référer à l'article API Fetch.
Supprimer les données dans le cache
Supprimer les données du cache, nous pouvons utiliser la méthode delete () dans l'objet Cache:
caches.open ('test-cache'). alors (fonction (cache) {cache.delete ('/ page / 1');});De cette façon, il n'y aura plus de données de demande / 1 de demande dans le cache.
Obtenez le nom du cache dans le cache existant
Pour obtenir le nom des données de cache qui existent déjà dans le cache, nous devons utiliser la méthode cache.keys ():
caches.keys (). puis (fonction (cachekeys) {console.log (cachekeys); // ex: ["test-cache"]});Window.caches.keys () renvoie une promesse.
Supprimer un objet de cache
Pour supprimer un objet mis en cache, vous n'avez besoin que du nom de clé en cache:
caches.delete ('test-cache'). puis (fonction () {console.log ('cache a réussi avec succès!');});Comment supprimer les anciennes données mises en cache en grande quantité:
// Supposons `cache_name` est le nom du nouveau cache // efface maintenant l'ancien cache var cache_name = 'version-8'; // ... caches.keys (). Puis (function (cachenames) {return promed.all (cachenames.map (function (cachename) {if (cachename); }}));});Vous voulez devenir un expert des travailleurs de service? Le code ci-dessus vaut la peine de mettre votre bibliothèque. Firefox et Google Chrome Support Service Worker, et je pense que davantage de sites Web et d'applications utiliseront cette technologie de mise en cache pour améliorer bientôt leur vitesse de fonctionnement.
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.