Cache

Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

L'interface Cache fournit un mécanisme de stockage pour les paires d'objets Request/Response qui sont mises en cache, par exemple dans le cadre du cycle de vie ServiceWorker. Il est à noter que l'interface Cache est exposée à des portées fenêtrées ainsi qu'à des service workers. Vous n'êtes pas obligé de l'utiliser avec des services workers, même si elle est définie dans la spécification relative aux services workers.

Une origine peut avoir plusieurs objets nommés Cache. Vous êtes responsable de l'implémentation de la manière dont votre script (par exemple dans un ServiceWorker) gère les mises à jour du cache. Les éléments d'un cache ne sont pas mis à jour, sauf demande explicite ; ils n'expirent pas, sauf s'ils sont supprimés. Utilisez CacheStorage.open() pour ouvrir un objet Cache spécifique et appelez ensuite l'une des méthodes Cache pour maintenir le Cache.

Vous êtes également responsable de la purge périodique des entrées du cache. Chaque navigateur a une limite stricte sur la quantité de mémoire cache qu'une origine donnée peut utiliser. Les estimations de l'utilisation du quota de cache sont disponibles via le lien StorageEstimate API. Le navigateur fait de son mieux pour gérer l'espace disque, mais il peut supprimer le stockage en cache d'une origine. Le navigateur supprime généralement toutes les données d'une origine ou aucune des données d'une origine. Veillez à nommer les caches et à n'utiliser les caches qu'à partir de la version du script sur laquelle ils peuvent fonctionner en toute sécurité. Pour plus d'informations, voir Suppression des anciens caches.

Note : Les implémentations initiales du cache (dans Blink et Gecko) résolvent les engagements Cache.add(), Cache.addAll(), et Cache.put() lorsque le corps de la réponse est entièrement écrit sur le stockage. Des versions plus récentes de la spécification précisent que le navigateur peut résoudre la promesse dès que l'entrée est enregistrée dans la base de données, même si le corps de réponse est encore en cours d'écriture.

Note : L'algorithme des correspondances de clés est dépendant de la valeur de l'en-tête VARY. Ainsi, pour faire correspondre une nouvelle clé, il faut examiner à la fois la clé et la valeur des entrées dans le Cache.

Note : L'API de mise en cache n'honore pas les en-têtes de mise en cache HTTP.

Méthodes

Cache.match(request, options)
Retourne une Promesse qui se résout en une réponse associée à la première requête correspondante dans l'objet Cache.
Cache.matchAll(request, options)
Retourne une Promesse qui se résout en un tableau de toutes les requêtes correspondantes dans l'objet Cache.
Cache.add(request)
Prend une URL, la récupère et ajoute l'objet réponse associé au cache donné. C'est une fonctionnalité équivalente à l'appel de fetch(), puis à l'utilisation de Cache.put() pour ajouter les résultats  au cache.
Cache.addAll(requests)
Prend un tableau d'URLs, les récupère, et ajoute les objets réponses associés au cache donné.
Cache.put(request, response)
Prend à la fois une requête et sa réponse et l'ajoute au cache donné.
Cache.delete(request, options)
Trouve l'entrée Cache dont la clé est la requête, et le cas échéant, supprime l'entrée Cache et retourne une Promesse qui se résout à true. Si aucune entrée Cache n'est trouvée, elle retourne false.
Cache.keys(request, options)
Retourne une Promesse qui se résout en un tableau clés Cache.

Exemples

Cet extrait de code provient de l'exemple de mise en cache sélective. (voir selective caching live) Le code utilise CacheStorage.open(cacheName) pour ouvrir tous les objets Cache avec un en-tête Content-Type qui débute par font/.

Le code utilise alors Cache.match(request, options) pour voir s'il y a déjà une fonte correspondante dans le cache, et le cas échéant, la retourne. S'il n'y a pas de correspondance, le code récupère la fonte à partir du réseau et utilise Cache.put(request, response) pour mettre en cache la ressource récupérée.

Le code gère les exceptions déclenchées par l'opération de fetch(). A noter qu'une réponse HTTP en erreur (e.g., 404) ne déclenchera pas une exception. Elle retournera un objet de réponse normal qui dispose du code d'erreur approprié.

Cet extrait de code illustre également une bonne pratique pour versionner les caches utilisés par le service worker. Bien qu'il y ait seulement un cache dans cet exemple, la même approche peut être utilisée pour des caches multiples. Il associe un identifiant  court avec un nom de cache versionné et spécifique. Le code supprime aussi tous les caches qui ne sont pas nommés dans CURRENT_CACHES.

Note: In Chrome, visit chrome://inspect/#service-workers and click on the "inspect" link below the registered service worker to view logging statements for the various actions the service-worker.js script is performing.
var CACHE_VERSION = 1;

// Shorthand identifier mapped to specific versioned cache.
var CURRENT_CACHES = {
  font: 'font-cache-v' + CACHE_VERSION
};

self.addEventListener('activate', function(event) {
  var expectedCacheNames = Object.keys(CURRENT_CACHES).map(function(key) {
    return CURRENT_CACHES[key];
  });

  // Active worker won't be treated as activated until promise resolves successfully.
  event.waitUntil(
    caches.keys().then(function(cacheNames) {
      return Promise.all(
        cacheNames.map(function(cacheName) {
          if (expectedCacheNames.indexOf(cacheName) == -1) {
            console.log('Deleting out of date cache:', cacheName);
            
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

self.addEventListener('fetch', function(event) {
  console.log('Handling fetch event for', event.request.url);

  event.respondWith(
    
    // Opens Cache objects that start with 'font'.
    caches.open(CURRENT_CACHES['font']).then(function(cache) {
      return cache.match(event.request).then(function(response) {
        if (response) {
          console.log(' Found response in cache:', response);

          return response;
        } 
      }).catch(function(error) {
        
        // Handles exceptions that arise from match() or fetch().
        console.error('  Error in fetch handler:', error);

        throw error;
      });
    })
  );
});

Storing cookies in Caches

L'API Fetch exige que les en-têtes Set-Cookie soient supprimés avant de renvoyer un objet Response à partir de fetch(). Ainsi, une réponse stockée dans un cache ne contiendra pas d'en-têtes.

Spécifications

Spécification Statut Commentaire
Service Workers
La définition de 'Cache' dans cette spécification.
Version de travail Définition initiale.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Cache
Expérimentale
Chrome Support complet 43
Notes
Support complet 43
Notes
Notes From 40 to 42, this was only available on service workers.
Edge Support complet ≤18Firefox Support complet 39
Notes
Support complet 39
Notes
Notes Extended Support Releases (ESR) before Firefox 78 ESR do not support service workers and the Push API.
IE Aucun support NonOpera Support complet 30
Notes
Support complet 30
Notes
Notes From 27 to 29, this was only available on service workers.
Safari Support complet 11WebView Android Support complet 43
Notes
Support complet 43
Notes
Notes From 40 to 42, this was only available on service workers.
Chrome Android Support complet 43
Notes
Support complet 43
Notes
Notes From 40 to 42, this was only available on service workers.
Firefox Android Support complet 39Opera Android Support complet 30
Notes
Support complet 30
Notes
Notes From 27 to 29, this was only available on service workers.
Safari iOS Support complet 11Samsung Internet Android Support complet 4.0
Notes
Support complet 4.0
Notes
Notes From 40 to 42, this was only available on service workers.
add
Expérimentale
Chrome Support complet 44
Notes
Support complet 44
Notes
Notes Requires HTTPS from version 46.
Edge Support complet 16Firefox Support complet 39
Notes
Support complet 39
Notes
Notes Extended Support Releases (ESR) before Firefox 78 ESR do not support service workers and the Push API.
IE Aucun support NonOpera Support complet 31
Notes
Support complet 31
Notes
Notes Requires HTTPS from version 33.
Safari Support complet 11WebView Android Support complet 44
Notes
Support complet 44
Notes
Notes Requires HTTPS from version 46.
Chrome Android Support complet 44
Notes
Support complet 44
Notes
Notes Requires HTTPS from version 46.
Firefox Android Support complet 39Opera Android Support complet 32
Notes
Support complet 32
Notes
Notes Requires HTTPS from version 33.
Safari iOS Support complet 11Samsung Internet Android Support complet 4.0
Notes
Support complet 4.0
Notes
Notes Requires HTTPS from Samsung Internet 5.0.
addAll
Expérimentale
Chrome Support complet 46
Notes
Support complet 46
Notes
Notes Requires HTTPS.
Edge Support complet 16Firefox Support complet 39
Notes
Support complet 39
Notes
Notes Extended Support Releases (ESR) before Firefox 78 ESR do not support service workers and the Push API.
IE Aucun support NonOpera Support complet 33
Notes
Support complet 33
Notes
Notes Requires HTTPS.
Safari Support complet 11WebView Android Support complet 46
Notes
Support complet 46
Notes
Notes Requires HTTPS.
Chrome Android Support complet 46
Notes
Support complet 46
Notes
Notes Requires HTTPS.
Firefox Android Support complet 39Opera Android Support complet 33
Notes
Support complet 33
Notes
Notes Requires HTTPS.
Safari iOS Support complet 11Samsung Internet Android Support complet 5.0
Notes
Support complet 5.0
Notes
Notes Requires HTTPS.
delete
Expérimentale
Chrome Support complet 43Edge Support complet 16Firefox Support complet 39
Notes
Support complet 39
Notes
Notes Extended Support Releases (ESR) before Firefox 78 ESR do not support service workers and the Push API.
IE Aucun support NonOpera Support complet 30Safari Support complet 11WebView Android Support complet 43Chrome Android Support complet 43Firefox Android Support complet 39Opera Android Support complet 30Safari iOS Support complet 11Samsung Internet Android Support complet 4.0
keys
Expérimentale
Chrome Support complet 43Edge Support complet 16Firefox Support complet 39
Notes
Support complet 39
Notes
Notes Extended Support Releases (ESR) before Firefox 78 ESR do not support service workers and the Push API.
IE Aucun support NonOpera Support complet 30Safari Support complet 11WebView Android Support complet 43Chrome Android Support complet 43Firefox Android Support complet 39Opera Android Support complet 30Safari iOS Support complet 11Samsung Internet Android Support complet 4.0
match
Expérimentale
Chrome Support complet 43Edge Support complet 16Firefox Support complet 39
Notes
Support complet 39
Notes
Notes Extended Support Releases (ESR) before Firefox 78 ESR do not support service workers and the Push API.
IE Aucun support NonOpera Support complet 30Safari Support complet 11WebView Android Support complet 43Chrome Android Support complet 43Firefox Android Support complet 39Opera Android Support complet 30Safari iOS Support complet 11Samsung Internet Android Support complet 4.0
matchAll
Expérimentale
Chrome Support complet 47Edge Support complet 16Firefox Support complet 39
Notes
Support complet 39
Notes
Notes Extended Support Releases (ESR) before Firefox 78 ESR do not support service workers and the Push API.
IE Aucun support NonOpera Support complet 34
Notes
Support complet 34
Notes
Notes Requires HTTPS.
Safari Support complet 11WebView Android Support complet 47Chrome Android Support complet 47Firefox Android Support complet 39Opera Android Support complet 34Safari iOS Support complet 11Samsung Internet Android Support complet 5.0
put
Expérimentale
Chrome Support complet 43
Notes
Support complet 43
Notes
Notes Requires HTTPS from version 46.
Edge Support complet 16Firefox Support complet 39
Notes
Support complet 39
Notes
Notes Extended Support Releases (ESR) before Firefox 78 ESR do not support service workers and the Push API.
IE Aucun support NonOpera Support complet 30
Notes
Support complet 30
Notes
Notes Requires HTTPS from version 33.
Safari Support complet 11WebView Android Support complet 43
Notes
Support complet 43
Notes
Notes Requires HTTPS from version 46.
Chrome Android Support complet 43
Notes
Support complet 43
Notes
Notes Requires HTTPS from version 46.
Firefox Android Support complet 39Opera Android Support complet 30
Notes
Support complet 30
Notes
Notes Requires HTTPS from version 33.
Safari iOS Support complet 11Samsung Internet Android Support complet 4.0
Notes
Support complet 4.0
Notes
Notes Requires HTTPS from Samsung Internet 5.0.

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Voir les notes d'implémentation.
Voir les notes d'implémentation.

Voir aussi