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, nous avons une bonne nouvelle à vous annoncer: à partir de Chrome 54, l'ensemble complet de CacheQueryOptions est pris en charge, 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 à CacheStorage.match() ou Cache.match(). Si elles ne sont pas définies, elles sont toutes définies par défaut sur false (ou undefined pour cacheName). Vous pouvez utiliser plusieurs options dans un seul appel à match().

ignoreSearch

L'algorithme de correspondance est ainsi invité à ignorer la partie recherche d'une URL, également appelée paramètres de requête de l'URL. Cela peut être utile lorsque vous disposez d'une URL source contenant des paramètres de requête utilisés, par exemple, pour le suivi analytique, mais qui ne sont pas pertinents pour identifier de manière unique une ressource dans le cache. Par exemple, de nombreuses personnes sont tombées dans le piège 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, mais que se passe-t-il si votre application Web utilise un fournisseur de données analytiques 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 est utile lorsque vous disposez de plusieurs caches et que vous souhaitez obtenir une réponse stockée dans un cache spécifique. L'utilisation de cette fonctionnalité peut rendre vos requêtes plus efficaces (puisque le navigateur ne doit vérifier qu'un seul cache, au lieu de tous), et vous permet de récupérer une réponse spécifique pour une URL donnée lorsque plusieurs caches peuvent utiliser cette URL comme clé. cacheName n'a d'effet que lorsqu'il est utilisé avec CacheStorage.match(), et non avec Cache.match(), car Cache.match() fonctionne déjà sur un seul 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 contenant un 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 gérez pas les 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. En plus des navigateurs Chrome et Chromium, ce type de navigateur est actuellement limité à Firefox, qui est déjà compatible avec CacheQueryOptions de manière native.

Les développeurs qui souhaitent utiliser CacheQueryOptions dans les versions de Chrome antérieures à la version 54 peuvent utiliser un polyfill, fourni par Arthur Stolyar.