Exemple de partage de code montrant comment Javascript obtient le cache et efface l'API du cache

Cet article présente principalement l'explication détaillée de JavascriptObtenirCache et Effacer le cacheAPI L'éditeur pense que c'est plutôt bon. Maintenant, je vais le partager. avec vous et donnez-le également. Utilisons-le tous comme référence. Suivons l'éditeur pour y jeter un œil

L'avantage de l'API JavaScript ServiceWorker est qu'elle permet aux développeurs Web de contrôler facilement la mise en cache. Bien que l'utilisation de technologies telles que ETags soit également une technologie de contrôle du cache, appuyer sur pour utiliser JavaScript permet au programme de contrôler la fonction de cache de manière plus puissante et plus libre. Bien sûr, être puissant a ses avantages et ses inconvénients : vous devez faire face aux conséquences, et les soi-disant conséquences signifient nettoyer le cache.

Voyons comment créer un objet de cache, ajouter une requête au cache données du cache et supprimer un demande au cache Cache données, et enfin comment supprimer complètement le cache.

Déterminez la prise en charge par le navigateur de l'API de cache d'objets de cache

Vérifiez si le navigateur prend en charge l'API de cache...

if('caches' in window) {
 // Has support!
}

...Vérifiez s'il existe un objet cache dans la fenêtre.

Créer un objet cache

Pour créer un objet cache, utilisez caches.open() et transmettez le nom du cache :

caches.open('test-cache').then(function(cache) {
 // 缓存创建完成，现在就可以访问了
});

Cette méthode caches.open renvoie une promesse, dans laquelle l'objet cache est nouvellement créé s'il a été créé auparavant, il ne sera pas recréé.

Ajouter des données de cache

Pour ce type de cache, vous pouvez le considérer comme un objet Request tableau, les données de réponse obtenues par le Demande de requête La valeur de la clé sera stockée dans l'objet cache. Il existe deux méthodes pour ajouter des données au cache : ajouter et ajouterTout. Utilisez ces deux méthodes pour ajouter l'adresse de la requête à mettre en cache. Pour une introduction à l’objet Request, vous pouvez vous référer à l’article fetch API.

Utilisez la méthode addAll pour ajouter des requêtes de cache par lots :

caches.open('test-cache').then(function(cache) { 
 cache.addAll(['/', '/images/logo.png'])
  .then(function() { 
   // Cached!
  });
});

Cette méthode addAll peut accepter un tableau d'adresses en tant que paramètre, et les données de réponse de ces adresses de requête seront mises en cache dans l'objet cache. addAll renvoie une promesse. Pour ajouter une seule adresse, utilisez la méthode add :

caches.open('test-cache').then(function(cache) {
 cache.add('/page/1'); // "/page/1" 地址将会被请求，响应数据会缓存起来。
});
add()方法还可以接受一个自定义的Request:

caches.open('test-cache').then(function(cache) {
 cache.add(new Request('/page/1', { /* 请求参数 */ }));
});
//跟add()方法很相似，put()方法也可以添加请求地址，同时添加它的响应数据：

fetch('/page/1').then(function(response) {
 return caches.open('test-cache').then(function(cache) {
  return cache.put('/page/1', response);
 });
});

Accéder aux données du cache

Pour afficher les données de la demande modifiées, nous pouvons utiliser la touche dans l'objet cache méthode s() pour obtenir tous les objets Request mis en cache sous forme de tableau :

caches.open('test-cache').then(function(cache) { 
 cache.keys().then(function(cachedRequests) { 
  console.log(cachedRequests); // [Request, Request]
 });
});

/*
Request {
 bodyUsed: false
 credentials: "omit"
 headers: Headers
 integrity: ""
 method: "GET"
 mode: "no-cors"
 redirect: "follow"
 referrer: ""
 url: "http://www.webhek.com/images/logo.png"
}
*/

Si vous souhaitez afficher le contenu de la réponse de la requête Request mise en cache, vous pouvez utiliser cache.match () ou méthode cache.matchAll () :

caches.open('test-cache').then(function(cache) {
 cache.match('/page/1').then(function(matchedResponse) {
  console.log(matchedResponse);
 });
});

/*
Response {
 body: (...),
 bodyUsed: false,
 headers: Headers,
 ok: true,
 status: 200,
 statusText: "OK",
 type: "basic",
 url: "https://www.webhek.com/page/1"
}
*/

Pour l'utilisation et les détails de l'objet Response, vous pouvez vous référer à l'article fetch API.

Supprimer les données du cache

Pour supprimer les données du cache, nous pouvons utiliser la méthode delete() dans l'objet cache :

caches.open('test-cache').then(function(cache) {
 cache.delete('/page/1');
});

De cette façon, il n'y aura plus de données de requête /page/1 dans le cache.

Obtenir le nom du cache dans le cache existant

Pour obtenir le nom des données mises en cache qui existent déjà dans le cache, nous devons utiliser le caches.keys( ) :

caches.keys().then(function(cacheKeys) { 
 console.log(cacheKeys); // ex: ["test-cache"]
});

window.caches.keys() renvoie également une promesse.

Supprimer un objet de cache

Pour supprimer un objet de cache, vous n'avez besoin que du nom de la clé de cache :

caches.delete('test-cache').then(function() { 
 console.log('Cache successfully deleted!'); 
});

Méthodes pour supprimer en masse les anciennes données mises en cache :

// 假设`CACHE_NAME`是新的缓存的名称
// 现在清除旧的缓存
var CACHE_NAME = 'version-8';

// ...

caches.keys().then(function(cacheNames) {
 return Promise.all(
  cacheNames.map(function(cacheName) {
   if(cacheName != CACHE_NAME) {
    return caches.delete(cacheName);
   }
  })
 );
});

Vous voulez devenir un expert en service worker ? Le code ci-dessus mérite d'être ajouté à votre référentiel. Firefox et Google Chrome prennent tous deux en charge les techniciens de service. Je pense que davantage de sites Web et d'applications utiliseront bientôt cette technologie de mise en cache pour améliorer la vitesse d'exécution.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!