CacheStorage

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 CacheStorage représente le stockage des objets Cache.

L'interface :

Utilisez CacheStorage.open() pour obtenir une instance Cache.

Utilisez CacheStorage.match() pour vérifier si une Requête donnée est une clé dans l'un des objets Cache que l'objet CacheStorage surveille.

Vous pouvez accéder à CacheStorage via la propriété globale caches.

Note: CacheStorage échouera systématiquement avec une SecurityError sur les domaines non certifiés (i.e. ceux qui n'utilisent pas HTTPS, bien que cette définition risque de devenir plus complexe dans le future). Pendant vos tests vous pouvez contourner ce comportement en cochant l'option "Enable Service Workers over HTTP (when toolbox is open)" dans les options Firefox Devtools / le menu gear.
Note: CacheStorage.match() est une méthode de convenance. Il est possible d'implémenter une fonctionnalité équivalente pour matcher une entrée de cache en appelant CacheStorage.open(), puis en retournant CacheStorage.keys(), et en matchant les entrées voulues avec CacheStorage.match().

Méthodes

CacheStorage.match()
Cherche si une Request donnée est la clé de n'importe lequel des objets Cache maintenus par le CacheStorage, et retourne une Promesse résolue en cet objet Cache.
CacheStorage.has()
Retourne une Promesse qui est résolue en true si un objet Cache qui correspond au cacheName existe.
CacheStorage.open()
Retourne une Promesse qui est résolue en l'objet Cache qui correspond au cacheName (si il n'existe pas, un nouveau cache est créé).
CacheStorage.delete()
Trouve l'objet Cache correspondant au cacheName, et si il est trouvé, supprime l'objet Cache et retourne une Promesse résolue à true. Si aucun objet Cache n'est trouvé, la Promesse est résolue à false.
CacheStorage.keys()
Retourne une Promesse qui est résolue en un tableau qui contient toutes les chaînes correspondantes aux objets Cache maintenus par le CacheStorage. Cette méthode peut s'utiliser pour itérer sur une liste de tous les objets Cache.

Exemples

Cet extrait de code est tiré de l'exemple MDN sw-test (lancer sw-test dans votre navigateur). Ce service worker script attends le déclenchement d'un InstallEvent, puis lance waitUntil pour gérer la phase d'installation de l'app. Cela consiste à appeler CacheStorage.open pour créer un nouveau cache, puis Cache.addAll pour y ajouter une série d'assets.

Dans le second bloc de code, on attends le déclenchement d'un FetchEvent. On construit ensuite une réponse spéciale comme suit :

  1. Vérifier si il y a un match pour la requête dans le CacheStorage. Le cas échéant, servir ça.
  2. Sinon, récupérer la requête sur le réseau, puis ouvrir le cache du premier bloc et y ajouter un clone de la requête grâce à Cache.put (cache.put(event.request, response.clone()).)
  3. En cas d'échec (e.g. car le réseau est inaccessible), retourner une réponse par défaut.

Enfin, on retourne cette réponse en utilisant FetchEvent.respondWith.

this.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open('v1').then(function(cache) {
      return cache.addAll([
        '/sw-test/',
        '/sw-test/index.html',
        '/sw-test/style.css',
        '/sw-test/app.js',
        '/sw-test/image-list.js',
        '/sw-test/star-wars-logo.jpg',
        '/sw-test/gallery/',
        '/sw-test/gallery/bountyHunters.jpg',
        '/sw-test/gallery/myLittleVader.jpg',
        '/sw-test/gallery/snowTroopers.jpg'
      ]);
    })
  );
});

self.addEventListener('fetch', function(event) {
  event.respondWith(caches.match(event.request).then(function(response) {
    // caches.match() fonctionne toujours
    // mais en cas de succès, la réponse aura une valeur
    if (response !== undefined) {
      return response;
    } else {
      return fetch(event.request).then(function (response) {
        // la réponse ne peut être utilisée qu'une seule fois
        // nous devons sauvegarder le clone pour mettre
        // une copie en cache et servir le second
        let responseClone = response.clone();
        
        caches.open('v1').then(function (cache) {
          cache.put(event.request, responseClone);
        });
        return response;
      }).catch(function () {
        return caches.match('/sw-test/gallery/myLittleVader.jpg');
      });
    }
  }));
});

Cet extrait montre comment l'API peut être utilisée en dehors du contexte d'un Service Worker, et utilise l'opérateur "await" pour un code beaucoup plus lisible.

// Essayer d'obtenir des données du cache, mais se rabattre sur la récupération en direct.
async function getData() {
   const cacheVersion = 1;
   const cacheName    = `myapp-${ cacheVersion }`;
   const url          = 'https://jsonplaceholder.typicode.com/todos/1';
   let cachedData     = await getCachedData( cacheName, url );

   if ( cachedData ) {
      console.log( 'Récupération des données mises en cache' );
      return cachedData;
   }

   console.log( 'Obtenir de nouvelles données' );

   const cacheStorage = await caches.open( cacheName );
   await cacheStorage.add( url );
   cachedData = await getCachedData( cacheName, url );
   await deleteOldCaches( cacheName );

   return cachedData;
}

// Obtenir des données du cache.
async function getCachedData( cacheName, url ) {
   const cacheStorage   = await caches.open( cacheName );
   const cachedResponse = await cacheStorage.match( url );

   if ( ! cachedResponse || ! cachedResponse.ok ) {
      return false;
   }

   return await cachedResponse.json();
}

// Delete any old caches to respect user's disk space.
async function deleteOldCaches( currentCache ) {
   const keys = await caches.keys();

   for ( const key of keys ) {
      const isOurCache = 'myapp-' === key.substr( 0, 6 );

      if ( currentCache === key || ! isOurCache ) {
         continue;
      }

      caches.delete( key );
   }
}

try {
   const data = await getData();
   console.log( { data } );
} catch ( error ) {
   console.error( { error } );
}

Spécifications

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

Compatibilités des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
CacheStorage
Expérimentale
Chrome Support complet 40
Notes
Support complet 40
Notes
Notes Accessible from Window from version 43.
Notes Accessible from WorkerGlobalScope from version 43.
Edge Support complet ≤18Firefox Support complet 44
Notes
Support complet 44
Notes
Notes Service workers (and Push) have been disabled in the Firefox 45 & 52 Extended Support Releases (ESR.)
IE Aucun support NonOpera Support complet 27Safari Support complet 11.1WebView Android Support complet 40
Notes
Support complet 40
Notes
Notes Accessible from Window from version 43.
Notes Accessible from WorkerGlobalScope from version 43.
Chrome Android Support complet 40
Notes
Support complet 40
Notes
Notes Accessible from Window from version 43.
Notes Accessible from WorkerGlobalScope from version 43.
Firefox Android Support complet 44Opera Android Support complet 27Safari iOS Support complet 11.3Samsung Internet Android Support complet 4.0
Notes
Support complet 4.0
Notes
Notes Accessible from Window from Samsung Internet 4.0.
Notes Accessible from WorkerGlobalScope from Samsung Internet 4.0.
delete
Expérimentale
Chrome Support complet 40Edge Support complet 16Firefox Support complet 44
Notes
Support complet 44
Notes
Notes Service workers (and Push) have been disabled in the Firefox 45 & 52 Extended Support Releases (ESR.)
IE Aucun support NonOpera Support complet 27Safari Support complet 11.1WebView Android Support complet 40Chrome Android Support complet 40Firefox Android Support complet 44Opera Android Support complet 27Safari iOS Support complet OuiSamsung Internet Android Support complet 4.0
has
Expérimentale
Chrome Support complet 40Edge Support complet 16Firefox Support complet 44
Notes
Support complet 44
Notes
Notes Service workers (and Push) have been disabled in the Firefox 45 & 52 Extended Support Releases (ESR.)
IE Aucun support NonOpera Support complet 27Safari Support complet 11.1WebView Android Support complet 40Chrome Android Support complet 40Firefox Android Support complet 44Opera Android Support complet 27Safari iOS Support complet OuiSamsung Internet Android Support complet 4.0
keys
Expérimentale
Chrome Support complet 40Edge Support complet 16Firefox Support complet 44
Notes
Support complet 44
Notes
Notes Service workers (and Push) have been disabled in the Firefox 45 & 52 Extended Support Releases (ESR.)
IE Aucun support NonOpera Support complet 27Safari Support complet 11.1WebView Android Support complet 40Chrome Android Support complet 40Firefox Android Support complet 44Opera Android Support complet 27Safari iOS Support complet OuiSamsung Internet Android Support complet 4.0
match
Expérimentale
Chrome Support complet 54
Support complet 54
Support partiel 40
Notes
Notes The options parameter only supports ignoreSearch, and cacheName.
Edge Support complet 16Firefox Support complet 44
Notes
Support complet 44
Notes
Notes Service workers (and Push) have been disabled in the Firefox 45 & 52 Extended Support Releases (ESR.)
IE Aucun support NonOpera Support complet 41
Support complet 41
Support partiel 27
Notes
Notes The options parameter only supports ignoreSearch, and cacheName.
Safari Support complet 11.1WebView Android Support complet 54
Support complet 54
Support partiel 40
Notes
Notes The options parameter only supports ignoreSearch, and cacheName.
Chrome Android Support complet 54
Support complet 54
Support partiel 40
Notes
Notes The options parameter only supports ignoreSearch, and cacheName.
Firefox Android Support complet 44Opera Android Support complet 41
Support complet 41
Support partiel 27
Notes
Notes The options parameter only supports ignoreSearch, and cacheName.
Safari iOS Support complet OuiSamsung Internet Android Support complet 6.0
Support complet 6.0
Support partiel 4.0
Notes
Notes The options parameter only supports ignoreSearch, and cacheName.
open
Expérimentale
Chrome Support complet 40Edge Support complet 16Firefox Support complet 44
Notes
Support complet 44
Notes
Notes Service workers (and Push) have been disabled in the Firefox 45 & 52 Extended Support Releases (ESR.)
IE Aucun support NonOpera Support complet 27Safari Support complet 11.1WebView Android Support complet 40Chrome Android Support complet 40Firefox Android Support complet 44Opera Android Support complet 27Safari iOS Support complet OuiSamsung Internet Android Support complet 4.0
Secure context required
Expérimentale
Chrome Support complet 65Edge Support complet ≤79Firefox Support complet 44IE Aucun support NonOpera Support complet 52Safari Support complet OuiWebView Android Support complet 65Chrome Android Support complet 65Firefox Android Support complet 44Opera Android Support complet 47Safari iOS Support complet OuiSamsung Internet Android Support complet 9.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