Cache.put()

La méthode put() de l'interface Cache permet d'ajouter des paires clé/valeur à l'objet Cache en cours.

Souvent, le comportement voulu est juste de fetch() une ou plusieurs requête, et d'ajouter les résultats directement dans le cache. Dans ce type de cas, il est plus judicieux d'utiliser Cache.add/Cache.addAll, étant donné que ces méthodes sont des raccourcis pour une ou plusieurs de ces opérations :

fetch(url).then(function (response) {
  return cache.put(url, response);
})

Syntaxe

cache.put(request, response).then(function() {
  // request/response pair has been added to the cache
});

Retour

Une promesse résolue en void.

Paramètres

request

La Request à ajouter au cache.

response

La Response à associer à la requête.

Exemples

Cet extrait de code est tiré du MDN sw-test example (lancez sw-test dans votre navigateur). On attend le déclenchement d'un FetchEvent, puis l'on va retourner une réponse spéciale d'après la procédure suivante :

1. Vérifier si un match pour la requête a été trouvé dans le CacheStorage grâce à CacheStorage.match. Si oui, servir cette réponse.
2. Sinon, ouvrir le cache v1 avec open(), insérer la requête réseau par défaut dans le cache via Cache.put, et retourner un clone de cette requête avec return response.clone() — nécessaire car put() détruit le corps de la réponse.
3. En cas d'échec (e.g., car le réseau est inaccessible), retourner une réponse de secours.

var response;
var cachedResponse = caches.match(event.request).catch(function() {
  return fetch(event.request);
}).then(function(r) {
  response = r;
  caches.open('v1').then(function(cache) {
    cache.put(event.request, response);
  });  
  return response.clone();
}).catch(function() {
  return caches.match('/sw-test/gallery/myLittleVader.jpg');
});

Spécifications

Compatibilité des navigateurs

Voir aussi

• Utilisation des Service Workers
• Cache
• WorkerGlobalScope.caches