Estoy usando worbox y me encontré con un problema. Después de ensamblar los archivos, ejecuto injectManifest para generar los archivos almacenados previamente en caché. Además, tengo diferentes estrategias para diferentes tipos de archivos. Notifico a los usuarios que instalen una nueva versión a través de una ventana emergente con un botón de confirmación y esto funciona muy bien en Chrome. Confirmas la instalación, a través de postMessage envío un mensaje y se recargan todas las pestañas y se actualiza el caché. Pero en safari esto no funciona, de igual forma se recargan las pestañas, pero la caché se actualiza solo en 1 pestaña, en todas las demás se mantiene vieja y para que no haga lo único que ayuda es un navegador cerrado o reiniciando manualmente el caché, en todas las pestañas posteriores que abra el caché se actualiza.

Ejemplo de código con instalación de un trabajador y notificación posterior para la instalación

 import {Workbox} from 'https://storage.googleapis.com/workbox-cdn/releases/6.4.2/workbox-window.prod.mjs'; if ('serviceWorker' in navigator) { const wb = new Workbox('/pwabuilder-sw.js'); let refreshing; navigator.serviceWorker.addEventListener('controllerchange', (event) => { if (refreshing) return refreshing = true window.location.reload() }); const showSkipWaitingPrompt = (event) => { document.querySelector('.notification-install-sw').classList.add('show'); document.getElementById('reload').addEventListener('click', function(e){ wb.messageSkipWaiting(); document.querySelector('.offline-with-cache-notification').style.display = 'none'; }); }; wb.addEventListener('waiting', showSkipWaitingPrompt); wb.register(); } if (!navigator.onLine) { document.querySelector('.offline-with-cache-notification').classList.add('show'); }

Y código de ejemplo del propio archivo de trabajo

 importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.4.2/workbox-sw.js'); workbox.googleAnalytics.initialize(); const STYLE_CACHE = "stylesheets"; self.addEventListener('message', (event) => { if (event.data && event.data.type === 'SKIP_WAITING') { self.skipWaiting(); } }); workbox.core.clientsClaim(); // Clean Up Old Precaches workbox.precaching.cleanupOutdatedCaches(); workbox.precaching.precacheAndRoute(self.__WB_MANIFEST); workbox.routing.registerRoute( ({request, url}) => request.destination === "style", new workbox.strategies.StaleWhileRevalidate({ cacheName: STYLE_CACHE, plugins: [ new workbox.cacheableResponse.CacheableResponsePlugin({ statuses: [200] }), new workbox.expiration.ExpirationPlugin({ maxEntries: 15, maxAgeSeconds: 30 * 24 * 60 * 60, // 30 Days purgeOnQuotaError: true, }), ], }) )