Me pidieron que escribiera esta publicación sobre una actualización bastante menor de la API de la caché del trabajador de servicio. No creía que fuera necesario escribir un artículo sobre este tema, pero después de un largo debate que terminó en un juego de piedra, papel o tijera, perdí, así que aquí está.
¿Está todo listo para conocer las actualizaciones de la implementación de la API de caché de Service Worker en Chrome?
No te escucho. Te pregunté si estás listo para conocer las actualizaciones de la implementación de la API de caché de servicio en Chrome.
(solo puedes seguir leyendo si saltaste a tu silla y gritaste “¡YEAHHH!”. Simular que balanceas un lazo al mismo tiempo es opcional, pero se recomienda).
cache.addAll llegó a Chrome 46.
Sí. ¡Así es! Caché Dot add all! ¡Chrome 46!
Bien, bien, aparte del sarcasmo, esto es un gran problema, ya que cache.addAll es la última parte restante del polyfill de "elementos esenciales" de la caché, lo que significa que ya no es necesario.
A continuación, se explica cómo funciona cache.addAll:
// 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é. Esto es transaccional: si falla alguna de las recuperaciones o escrituras, fallará toda la operación y la caché volverá a su estado anterior. Esto es particularmente útil para operaciones de instalación como las anteriores, en las que una sola falla debe ser una falla general.
El ejemplo anterior se encuentra dentro de un service worker, pero también se puede acceder a la API de cachés desde las páginas.
Firefox ya admite esta API en su edición para desarrolladores, por lo que se lanzará con el resto de su implementación de service worker.
Pero espera, eso no es todo, hay más mejoras en la caché en proceso…
cache.matchAll llegará a 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 en 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 encabezados Vary diferentes.
Firefox ya admite esta función en su edición para desarrolladores, por lo que se lanzará con el resto de su implementación de service worker.
Pronto llegarán opciones de consulta de caché a Chrome
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 para /, se entregará desde la caché. Sin embargo, si recibimos una solicitud para /?utm_source=blahblahwhatever que no provenga de la caché, Para solucionarlo, ignora la cadena de búsqueda de URL mientras realizas 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 en el argumento de la solicitud y en las solicitudes almacenadas en caché.ignoreMethod: Ignora el método del argumento de la solicitud para que una solicitud POST pueda coincidir con una entrada GET en la caché.ignoreVary: Ignora el encabezado vary en las respuestas almacenadas en caché.
Firefox ya admite esto en su… ya sabes cómo funciona. Ve a decirle a Ben Kelly lo genial que es por incluir todo esto en Firefox.
Si quieres seguir la implementación de Chrome de las opciones de consulta de la caché, consulta crbug.com/426309.
Nos vemos la próxima vez para otro capítulo emocionante de “lo que implementamos en la API de caché”.