¿Cómo guardar en caché el sw-toolbox?

He estado jugando con los trabajadores de servicio y sw-toolbox. Ambos son buenos métodos pero parecen tener sus debilidades.

Mi proyecto comenzó utilizando el método de trabajadores de servicio de Google ( enlace ). La forma en que veo esto es que tiene que actualizar manualmente el número de versión para el almacenamiento en caché. También podría estar equivocado, pero no creo que las páginas que han visitado los usuarios no se almacenarán en caché.

En comparación con el método sw-toolbox, todo lo que necesito agregar es el siguiente código:

self.toolbox.router.default = self.toolbox.networkFirst; self.toolbox.router.get('/(.*)', function (req, vals, opts) { return self.toolbox.networkFirst(req, vals, opts) .catch(function (error) { if (req.method === 'GET' && req.headers.get('accept').includes('text/html')) { return self.toolbox.cacheOnly(new Request(OFFLINE_URL), vals, opts); } throw error; }); }); 

Entonces se resolverá el problema de las páginas de caché. Aquí está mi problema: después de aplicar sw-toolbox a mi proyecto, el trabajador de servicio anterior no se borra ni se reemplaza por el nuevo a menos que vaya a las herramientas de desarrollo para borrarlo.

¿Alguna idea de cómo solucionar esto?

Aquí está mi problema: después de aplicar sw-toolbox a mi proyecto, el trabajador de servicio anterior no se borra ni se reemplaza por el nuevo a menos que vaya a las herramientas de desarrollo para borrarlo.

El navegador comprueba si hay actualizaciones en el archivo del trabajador del servicio cada vez que solicita un recurso en el ámbito del trabajador del servicio. Si hay una diferencia de bytes en los archivos del trabajador de servicio, el navegador instalará el nuevo trabajador de servicio. Solo necesita actualizar el trabajador de servicio manualmente en las herramientas de desarrollo porque la aplicación aún se está ejecutando, y el navegador no desea activar un nuevo trabajador de servicio mientras el anterior aún está en uso.

Si cierra todas las páginas asociadas con el trabajador del servicio (como lo haría un usuario al salir de su aplicación), el navegador podrá activar el nuevo trabajador del servicio la próxima vez que abra su página.

Si desea forzar al nuevo trabajador de servicios a asumir el control, puede agregar self.skipWaiting(); al evento de install . Aquí hay algo de documentación con un ejemplo .

Jake Arichbald puede conocer prácticamente todo lo que necesita saber sobre el ciclo de vida del trabajador de servicio.

En lo que respecta al almacenamiento en caché y la administración de caché, las herramientas como sw-toolbox manejarán el almacenamiento en caché por ti. Y, en realidad, Workbox es una nueva herramienta que está destinada a reemplazar sw-toolbox & sw-precache. También se encargará de la eliminación de la memoria caché y la administración de la memoria caché (mediante la comparación de hashes de archivos y la configuración / seguimiento de las fechas de caducidad de los recursos).

En general, siempre debe usar una herramienta como Workbox para escribir a sus trabajadores de servicio. Escribirlos a mano es propenso a errores y es probable que se pierda los casos de esquina.

Espero que ayude.

PD: Si no usas skipWaiting y, en cambio, solo se actualiza cuando un usuario cierra y vuelve a abrir la página, aún puedes habilitar la actualización automática para el desarrollo. En las herramientas de desarrollo de Chrome, Aplicación> Trabajadores de servicio tiene una opción Actualizar en recargar para actualizar automáticamente el trabajador de servicio.

No sé si sw_toolbox tiene incorporado el almacenamiento en caché. Normalmente, cuando cambia el trabajador del servicio y necesita purgar el caché de la versión anterior, debe hacerlo con el controlador de eventos.

La mejor práctica aquí es nombrar sus cachés con el número de versión de sw incluido. Aquí hay un ejemplo de código de un curso en línea que tengo sobre el almacenamiento en caché de trabajadores de servicio que podría ayudarlo a comenzar:

 self.addEventListener("activate", event => { console.log("service worker activated"); //on activate event.waitUntil(caches.keys() .then(function (cacheNames) { cacheNames.forEach(function (value) { if (value.indexOf(config.version) < 0) { caches.delete(value); } }); return; }) ); 

});