Actualizaciones a la API de Service Worker Cache

Jake Archibald
Jake Archibald

Me pidieron que escribiera esta publicación con una actualización bastante menor de la API de caché del service worker. No pensé que justificara tener su propio artículo, pero después de un largo debate que se convirtió en un juego de piedra, papel o tijera, perdí, así que aquí está.

¿Estás listo para conocer las actualizaciones de la implementación de Chrome de la API de caché del service worker?

No te escucho. Dije, ¿estás listo para recibir información sobre las actualizaciones en la implementación de Chrome de la API de caché del service worker?

(Es posible que sigas leyendo si te apoyaste en la silla y gritaste: "¡SÍ, SÍ!". Simultáneamente, fingir que mueves un lazo es opcional, pero recomendado.

cache.addAll llegó a Chrome 46

Sí. Exacto. Caché. No agregues a todos. Chrome 46

De acuerdo, dejando de lado el sarcasmo, esto es un gran problema, ya que cache.addAll es la última parte restante del polyfill de elementos “esenciales” de la caché, por lo que ya no es necesario.

cache.addAll funciona de la siguiente manera:

// when the browser sees this SW for the first time
self.addEventListener('install', function(event) {
    // wait until the following promise resolves
    event.waitUntil(
    // open/create a cache named 'mysite-static-v1'
    caches.open('mysite-static-v1').then(function(cache) {
        // fetch and add this stuff to it
        return cache.addAll([
        '/',
        '/css/styles.css',
        '/js/script.js',
        '/imgs/cat-falls-over.gif'
        ]);
    })
    );
});

addAll toma un array de URLs y solicitudes, las recupera y las agrega a la caché. Esta es transaccional: si falla alguna de las operaciones de recuperación o escritura, fallará toda la operación y la caché volverá a su estado anterior. Esto es particularmente útil para las operaciones de instalación como las anteriores, en las que una sola falla debería ser una falla general.

El ejemplo anterior corresponde a un service worker, pero también se puede acceder por completo a la API de caché desde las páginas.

Firefox ya es compatible con esta API en su edición para desarrolladores, por lo que llegará con el resto de la implementación de su service worker.

Pero espera, eso no es todo, hay más mejoras de caché en la canalización...

cache.matchAll, disponible en Chrome 47

Esto te permite obtener varias coincidencias:

caches.open('mysite-static-v1').then(function(cache) {
    return cache.matchAll('/');
}).then(function(responses) {
    // …
});

Lo anterior obtendrá todo el contenido de mysite-static-v1 que coincida con /. La caché te permite tener varias entradas por URL si se pueden almacenar en caché de forma independiente (p. ej., si tienen diferentes encabezados Vary).

Firefox ya es compatible con esta edición para desarrolladores, de modo que llegará con el resto de la implementación de su service worker.

Las opciones de consulta de caché estarán disponibles en Chrome próximamente

Este es un controlador de recuperación bastante estándar:

self.addEventListener('fetch', function(event) {
    event.respondWith(
    caches.match(event.request).then(function(response) {
        return response || fetch(event.request);
    })
    );
});

Si tenemos / almacenado en caché y recibimos una solicitud de /, se entregará desde la caché. Sin embargo, si recibimos una solicitud para /?utm_source=blahblahwhatever que no provendrá de la caché. Para solucionar este problema, ignora la cadena de búsqueda de URL mientras estableces la coincidencia:

self.addEventListener('fetch', function(event) {
    event.respondWith(
    caches.match(event.request, {
        ignoreSearch: true
    }).then(function(response) {
        return response || fetch(event.request);
    })
    );
});

Ahora /?utm_source=blahblahwhatever coincidirá con la entrada de /. Las opciones completas son las siguientes:

  • ignoreSearch: Ignora la parte de búsqueda de la URL tanto en el argumento de la solicitud como en las solicitudes almacenadas en caché.
  • ignoreMethod: Ignora el método del argumento de la solicitud, de modo que una solicitud POST pueda coincidir con una entrada GET en la caché.
  • ignoreVary: Ignora el encabezado de variación en las respuestas almacenadas en caché.

Firefox ya admite esto en sus... Bueno, ya sabes el simulacro. Cuéntale a Ben Kelly lo genial que es incorporar todo esto a Firefox.

Si quieres seguir la implementación de Chrome de las opciones de consulta de caché, visita crbug.com/426309.

¡Nos vemos la próxima vez otro emocionante capítulo sobre “lo que implementamos en la API de caché”!