Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

CacheStorage

Cette traduction est incomplète. Aidez à traduire cet article depuis l'anglais.

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 de l'API ServiceWorker représente le stockage pour les objets Cache. Elle fournit un répertoire général de tous les caches auquel un ServiceWorker peut accéder, et maintient une correspondance entre les chaînes de noms et ces objets Cache.

CacheStorage expose également CacheStorage.open() et CacheStorage.match(). CacheStorage.open() permet d'obtenir une instance de Cache tandis que CacheStorage.match() détermine si une Request donnée est une clé d'un des objets Cache que CacheStorage maintient.

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

Note: L'interface CacheStorage est exposée aux portées de fenêtres ainsi qu'aux workers; il n'est pas nécessaire de l'utiliser avec des service workers.
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 Promise résolue en cet objet Cache.
CacheStorage.has()
Retourne une Promise qui est résolue en true si un objet Cache qui correspond au cacheName existe.
CacheStorage.open()
Retourne une Promise 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 Promise résolue à true. Si aucun objet Cache n'est trouvée, elle est résolue à false.
CacheStorage.keys()
Retourne une Promise 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'
      ]);
    })
  );
});

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

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

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support de base 40.0 39 (39) Pas de support ? Pas de support
Accessible from Window 43.0 39 (39) ? ? ?
Accessible from WorkerGlobalScope 43.0 39 (39) ? ? ?
Fonctionnalité Android Android Webview Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
Support de base Pas de support Pas de support 39.0 (39) (Oui) (Oui) (Oui) 40.0
Accessible from Window Pas de support Pas de support 39.0 (39) ? ? ? 43.0
Accessible from WorkerGlobalScope Pas de support Pas de support 39.0 (39) ? ? ? 43.0

Voir aussi

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : NuclearPony
 Dernière mise à jour par : NuclearPony,