Cache

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 Cache de l' API ServiceWorker représente le stockage pour les paires d'objet Request / Response object qui sont mises en cache dans le cadre du cycle de vie d'un ServiceWorker.

Un domaine peut avoir de multiples objets Cache nommés, dont les contenus sont entièrement sous le contrôle des service workers.

Vous avez la responsabilité d'implémenter la façon dont le script du ServiceWorker gère les mises à jour du Cache. Les éléments dans un Cache ne sont pas mis à jour à moins d'une requête explicite; ils n'expirent pas non plus à moins d'être supprimés. Utiliser CacheStorage.open(cacheName) pour ouvrir un objet Cache nommé spécifique et appeler ensuite toute méthode de l'objet Cache pour faire la maintenance du Cache.

Vous avez également la responsabilité de la purge périodique des entrées du cache. Chaque navigateur dispose d'une limite physique quant à la capacité de stockage qu'un service worker donné peut utiliser. Le navigateur fait de son mieux pour gérer l'espace disque, mais il peut supprimer le stockage du Cache pour une origine.  Le navigateur supprimera généralement toutes les données d'une origine ou rien. Il faut s'assurer de versionner les caches par nom et d'utiliser seulement les caches à partir de la version du ServiceWorker avec lequel ils peuvent correctement fonctionner. Voir Supprimer des anciens caches pour plus d'informations.

Remarque : l'interface Cache est aussi bien exposée à des contextes fenêtrés qu'à des workers; vous ne devez pas l'utiliser en conjonction avec les service workers.

Remarque : Cache.putCache.add, et Cache.addAll permettent seulement aux requêtes de type GET d'être stockées dans le cache.

Remarque : les implementations initiales de Cache (à la fois dans Blink et Gecko) résolvent les promesses de Cache.add, Cache.addAll, et Cache.put lorsque le corps de la réponse est complétement écrit dans le stockage.  De plus récentes versions de la spec versions établissent que le navigateur peut résoudre la promesse aussitôt que l'entrée est enregistrée dans la base de données même si le corps de la réponse est encore en chargement.

Remarque : à partir de Chrome 46, l'API Cache stockera seulement les requêtes d'origines sécurisées, c'est-à-dire celles accessibles via HTTPS.

Méthodes

Cache.match(request, options)
Retourne une Promise 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 Promise 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 Promise qui se résout à true. Si aucune entrée Cache n'est trouvée, elle retourne false.
Cache.keys(request, options)
Retourne une Promise 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;
      });
    })
  );
});

Spécifications

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

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 40.0 39 (39) Pas de support 24 Pas de support
add() 44.0 (Oui) ? ? ?
addAll() 46.0 (Oui) ? ? ?
matchAll() 47.0 (Oui) ? ? ?
Require HTTPS for add(), addAll(), and put() 46.0 (Oui) ? ? ?
Fonctionnalité Android Android Webview Firefox Mobile (Gecko) Firefox OS IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support Pas de support Pas de support 39.0 (39) ? Pas de support ? Pas de support 40.0
add() Pas de support Pas de support (Oui) ? ? ? ? 44.0
addAll() Pas de support Pas de support (Oui) ? ? ? ? 46.0
matchAll() Pas de support Pas de support (Oui) ? ? ? ? 46.0
Require HTTPS for add(), addAll(), and put() Pas de support Pas de support (Oui) ? ? ? ? 46.0

Voir aussi

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : jean-pierre.gay
 Dernière mise à jour par : jean-pierre.gay,