Los desarrolladores que usan service worker y la API de Cache Storage deben estar atentos a dos pequeños cambios que se lanzarán en Chrome 71. Ambos cambios alinean mejor la implementación de Chrome con las especificaciones y otros navegadores.
Cómo inhabilitar importScripts() asíncrono
importScripts() le indica a la secuencia de comandos del service worker principal que pause su ejecución actual, descargue código adicional de una URL determinada y la ejecute hasta su finalización en el alcance global actual. Una vez hecho esto, la secuencia de comandos del service worker principal reanuda la ejecución. importScripts() resulta útil cuando deseas dividir la secuencia de comandos principal del service worker en partes más pequeñas por razones organizativas o extraer código de terceros para agregar funcionalidad al service worker.
Los navegadores intentan mitigar los posibles problemas de rendimiento de "descargar y ejecutar código síncrono" almacenando automáticamente en caché todo lo que se extrae a través de importScripts(), lo que significa que, después de la descarga inicial, hay muy poca sobrecarga en la ejecución del código importado.
Sin embargo, para que eso funcione, el navegador debe saber que no habrá ningún código "sorpresa" importado al service worker después de la instalación inicial.
Según la especificación de service worker, se supone que
llamar a importScripts() solo funciona durante la ejecución síncrona de la secuencia de comandos
del service worker de nivel superior o, si es necesario, de forma asíncrona dentro del controlador install.
Antes de Chrome 71, se podía llamar a importScripts() de forma asíncrona fuera del controlador install. A partir de Chrome 71, esas llamadas arrojan una excepción de tiempo de ejecución (a menos que la misma URL se haya importado anteriormente en un controlador install), que coincide con el comportamiento en otros navegadores.
En lugar de usar un código como este:
// This only works in Chrome 70 and below.
self.addEventListener('fetch', event => {
importScripts('my-fetch-logic.js');
event.respondWith(self.customFetchLogic(event));
});
El código del service worker debería verse de la siguiente manera:
// Move the importScripts() to the top-level scope.
// (Alternatively, import the same URL in the install handler.)
importScripts('my-fetch-logic.js');
self.addEventListener('fetch', event => {
event.respondWith(self.customFetchLogic(event));
});
Baja de URLs repetidas que se pasan a cache.addAll()
Si usas la API de Cache Storage junto con un service worker, hay otro pequeño cambio en
Chrome 71 para alinearlo con la especificación relevante. Cuando se pasa la misma URL varias veces a una sola llamada a cache.addAll(), la especificación indica que se debe rechazar la promesa que mostró la llamada.
Antes de Chrome 71, esto no se detectaba y las URLs duplicadas se ignoraban.
Este registro es un preludio de Chrome 72, en el que, en lugar de solo una advertencia registrada, las URLs duplicadas harán que se rechacen cache.addAll(). Si llamas a cache.addAll() como parte de una cadena de promesas que se pasa a InstallEvent.waitUntil(), como es una práctica común, ese rechazo podría hacer que el service worker no se instale.
A continuación, te indicamos cómo podrías tener problemas:
const urlsToCache = [
'/index.html',
'/main.css',
'/app.js',
'/index.html', // Oops! This is listed twice and should be removed.
];
self.addEventListener('install', event => {
event.waitUntil(
caches.open('my-cache').then(cache => cache.addAll(urlsToCache))
);
});
Esta restricción solo se aplica a las URLs reales que se pasan a cache.addAll(), y el almacenamiento en caché de lo que termina siendo dos respuestas equivalentes que tienen URLs diferentes, como '/' y '/index.html', no activará un rechazo.
Prueba ampliamente la implementación de tu service worker
En este punto, los service workers están implementados de manera amplia en todos los principales navegadores"perdurables". Si pruebas con regularidad tu app web progresiva en varios navegadores o si tienes una cantidad significativa de usuarios que no usan Chrome, es probable que ya hayas detectado la incoherencia y actualizado tu código. Pero, en el caso de que no hayas notado este comportamiento en otros navegadores, queríamos destacar el cambio antes de cambiar el comportamiento de Chrome.