CacheQueryOptions llega a Chrome 54

Jeff Posnick

Si usas la API de Cache Storage, ya sea en un service worker o directamente desde apps web a través de window.caches, tienes buenas noticias: a partir de Chrome 54, se admite el conjunto completo de CacheQueryOptions, lo que facilita encontrar las respuestas almacenadas en caché que buscas.

¿Qué opciones hay disponibles?

Las siguientes opciones se pueden configurar en cualquier llamada a CacheStorage.match() o Cache.match(). Si no están configurados, todos se establecen de forma predeterminada como false (o undefined para cacheName), y puedes usar varias opciones en una sola llamada a match().

ignoreSearch

Esto le indica al algoritmo de coincidencia que ignore la parte de búsqueda de una URL, también conocido como los parámetros de consulta de URL. Esto puede ser útil cuando tienes una URL de origen que contiene parámetros de consulta que se usan, por ejemplo, para el seguimiento de estadísticas, pero que no son significativos para identificar un recurso en la caché. Por ejemplo, muchas personas han sido víctimas del siguiente service worker:

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)
    );
  }
});

Este tipo de código funciona como se espera cuando un usuario navega directamente a index.html, pero ¿qué sucede si tu app web usa un proveedor de estadísticas para hacer un seguimiento de los vínculos entrantes y el usuario navega a index.html?utm_source=some-referral? De forma predeterminada, si pasas index.html?utm_source=some-referral a caches.match(), no se mostrará la entrada para index.html. Sin embargo, si ignoreSearch se configura como true, puedes recuperar la respuesta almacenada en caché que esperarías sin importar los parámetros de consulta que se hayan configurado:

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

cacheName

cacheName resulta útil cuando tienes varias cachés y deseas una respuesta que se almacene en una caché específica. Si lo usas, puedes hacer que tus consultas sean más eficientes (ya que el navegador solo debe verificar en una caché, en lugar de todas) y te permite recuperar una respuesta específica para una URL determinada cuando varias cachés pueden tener esa URL como clave. cacheName solo tiene efecto cuando se usa con CacheStorage.match(), no con Cache.match(), debido a que Cache.match() ya opera en una sola caché llamada.

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

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

ignoreMethod y ignoreVary

ignoreMethod y ignoreVary son un poco más de nicho que ignoreSearch y cacheName, pero tienen propósitos específicos.

ignoreMethod te permite pasar un objeto Request que tenga cualquier method (POST, PUT, etc.) como primer parámetro a match(). Por lo general, solo se permiten solicitudes GET o HEAD.

// 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 se configura como true, ignoreVary significa que las búsquedas en caché se realizarán sin tener en cuenta los encabezados Vary que se configuraron en las respuestas almacenadas en caché. Si sabes que no trabajas con respuestas almacenadas en caché que usan el encabezado Vary, no tienes que preocuparte por configurar esta opción.

Navegadores compatibles

CacheQueryOptions solo es relevante en navegadores que admiten la API de Cache Storage. Además de Chrome y los navegadores basados en Chromium, actualmente se limita a Firefox, que ya admite CacheQueryOptions de forma nativa.

Los desarrolladores que quieran usar CacheQueryOptions en versiones de Chrome anteriores a la 54 pueden usar un polyfill, cortesía de Arthur Stolyar.