CacheQueryOptions arrive dans Chrome 54

Jeff Posnick

Si vous utilisez l'API Cache Storage, que ce soit dans un service worker ou directement à partir d'applications Web via window.caches, sachez qu'à partir de Chrome 54, l'ensemble des CacheQueryOptions est compatible, ce qui vous permet de trouver plus facilement les réponses mises en cache que vous recherchez.

Quelles sont les options disponibles ?

Les options suivantes peuvent être définies dans n'importe quel appel de CacheStorage.match() ou Cache.match(). Si cette règle n'est pas configurée, elles sont toutes définies par défaut sur false (ou undefined pour cacheName). Vous pouvez utiliser plusieurs options lors d'un même appel à match().

ignoreSearch

Ce champ indique à l'algorithme de correspondance d'ignorer la partie search d'une URL (également appelée "paramètres de requête d'URL"). Cela peut s'avérer utile lorsque vous disposez d'une URL source contenant des paramètres de requête utilisés, par exemple, pour le suivi de l'analyse, mais qui ne sont pas significatifs en termes d'identification unique d'une ressource dans le cache. Par exemple, de nombreuses personnes sont tombées la proie du service worker suivant :

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('my-cache')
      .then(cache => cache.add('index.html'))
  );
});

self.addEventListener('fetch', event => {
  // Make sure this is a navigation request before responding.
  if (event.request.mode === 'navigation') {
    event.respondWith(
      caches.match(event.request) || fetch(event.request)
    );
  }
});

Ce type de code fonctionne comme prévu lorsqu'un utilisateur accède directement à index.html. Que se passe-t-il si votre application Web utilise un fournisseur de solutions d'analyse pour suivre les liens entrants et que l'utilisateur accède à index.html?utm_source=some-referral ? Par défaut, transmettre index.html?utm_source=some-referral à caches.match() ne renvoie pas l'entrée pour index.html. Toutefois, si ignoreSearch est défini sur true, vous pouvez récupérer la réponse mise en cache attendue, quels que soient les paramètres de requête définis:

caches.match(event.request, {ignoreSearch: true})

cacheName

cacheName s'avère pratique lorsque vous avez plusieurs caches et que vous souhaitez qu'une réponse soit stockée dans un cache spécifique. Elle peut améliorer l'efficacité de vos requêtes (car le navigateur ne doit vérifier qu'un seul cache, et non tous les caches) et vous permet de récupérer une réponse spécifique pour une URL donnée lorsque plusieurs caches peuvent avoir cette URL comme clé. cacheName n'a d'effet que lorsqu'il est utilisé avec CacheStorage.match(), pas avec Cache.match(), car Cache.match() fonctionne déjà sur un seul élément mis en cache nommé.

// The following are functionally equivalent:
caches.open('my-cache')
  .then(cache => cache.match('index.html'));

// or...
caches.match('index.html', {cacheName: 'my-cache'});

ignoreMethod et ignoreVary

ignoreMethod et ignoreVary sont un peu plus spécifiques que ignoreSearch et cacheName, mais ils servent des objectifs spécifiques.

ignoreMethod vous permet de transmettre un objet Request ayant n'importe quel method (POST, PUT, etc.) comme premier paramètre à match(). Normalement, seules les requêtes GET ou HEAD sont autorisées.

// In a more realistic scenario, postRequest might come from
// the request property of a FetchEvent.
const postRequest = new Request('index.html', {method: 'post'});

// This will never match anything.
caches.match(postRequest);

// This will match index.html in any cache.
caches.match(postRequest, {ignoreMethod: true});

Si la valeur est true, ignoreVary signifie que les recherches dans le cache seront effectuées sans tenir compte des en-têtes Vary définis dans les réponses mises en cache. Si vous savez que vous ne traitez pas de réponses mises en cache qui utilisent l'en-tête "Vary", vous n'avez pas à vous soucier de définir cette option.

Prise en charge des navigateurs

CacheQueryOptions n'est pertinent que dans les navigateurs compatibles avec l'API Cache Storage. Hormis Chrome et les navigateurs basés sur Chromium, cela se limite actuellement à Firefox, qui est déjà nativement compatible avec CacheQueryOptions.

Les développeurs qui souhaitent utiliser CacheQueryOptions dans des versions de Chrome antérieures à la version 54 peuvent utiliser un polyfill, grâce à Arthur Stolyar.