CacheQueryOptions llega a Chrome 54

Jeff Posnick

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

¿Qué opciones hay disponibles?

Las siguientes opciones se pueden establecer en cualquier llamada a CacheStorage.match() o Cache.match(). Si no se establecen, todos se establecen de forma predeterminada en 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 conocida como los parámetros de consulta de la 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 en términos de identificar de manera inequívoca un recurso en la caché. Por ejemplo, muchas personas cayeron en la siguiente "trampa" del trabajador de servicio:

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 aplicación 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, pasar index.html?utm_source=some-referral a caches.match() no mostrará la entrada para index.html. Sin embargo, si ignoreSearch se establece en true, puedes recuperar la respuesta almacenada en caché que esperas, independientemente de los parámetros de consulta que se establezcan:

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

cacheName

cacheName es útil cuando tienes varias cachés y deseas obtener una respuesta que se almacene en una caché específica. Su uso puede hacer que tus consultas sean más eficientes (ya que el navegador solo tiene que verificar dentro de 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(), porque Cache.match() ya opera en una sola caché con nombre.

// 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 específicos que ignoreSearch y cacheName, pero cumplen con 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 establece en true, ignoreVary significa que las búsquedas de caché se realizarán sin tener en cuenta los encabezados Vary que se establezcan en las respuestas almacenadas en caché. Si sabes que no estás tratando con respuestas almacenadas en caché que usan el encabezado Vary, no te preocupes 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.