¡Quiero poder controlar completamente mis versiones de Service Worker , creé señales y funciones que me permiten update u skipWaiting la espera de un Service Worker existente que funciona perfectamente!
self.addEventListener('install',event=> event.waitUntil(caches.open(version).then(cache=> cache.addAll([ ... ]).then(_=> condition? self.skipWaiting(): false ) )) ) self.addEventListener('activate',event=> event.waitUntil(clients.claim()) ) Cuando llamo a skipWaiting , el nuevo Service Worker reclama la página del cliente como se supone que debe hacerlo,
Pero no puedo hacer que se vuelva a cargar inmediatamente desde el nuevo caché del Service Worker recién instalado .
¿Cómo puedo skipWaiting la espera y obligar a todas las páginas de los clientes a recargarse desde el caché del Service Worker recién instalado?
Pruebe este fragmento de código:
// If service workers are supported... if ('serviceWorker' in navigator) { // Check to see if the page is currently controlled. let isControlled = Boolean(navigator.serviceWorker.controller); // Listen for a change to the current controller... navigator.serviceWorker.addEventListener('controllerchange', () => { if (isControlled) { // ...and if the page was previosly controlled, reload the page. window.location.reload(); } else { // ...otherwise, set the flag for future updates, but don't reload. isControlled = true; } }); } Recomiendo basar esta lógica en el evento de cambio de controllerchange en lugar de otros enfoques, como escuchar el statechange de estado de un trabajador de servicio de instalación/espera, ya que hay una pequeña brecha en el tiempo entre el momento en que se activa un trabajador de servicio y cuando toma el control de existente clientela. Esperar en cada página a que cambie el controller garantizará que la recarga se realice bajo el control del trabajador de servicio actualizado.
El uso de este código junto con un trabajador de servicio que llama a skipWaiting() debería brindarle el comportamiento que está buscando.