Estoy tratando de usar serviceWorkers por primera vez y, aunque comenzó bien, estoy un poco atascado.
Aquí está mi muy simple service-worker.js :
self.addEventListener('install', () => { console.log('Hello world from the Service worker') }) self.addEventListener('activate', () => { console.log('Serive worker now active') }) self.addEventListener('message', event => { console.log('Service worker received message ' + JSON.stringify(event)) })Me registro para el trabajador de servicio así:
useEffect(() => { if ('serviceWorker' in navigator) { navigator.serviceWorker .register('/service-worker.js') .then(() => { console.log('Service worker registration successful') }) .catch(e => { console.error('Service worker registration failed: ' + e) }) } }, [])Mientras cargo mi aplicación, obtengo los siguientes registros:
Service worker registration successful // APP Hello world from the Service worker // SERVICE WORKER install event Entonces, recibo el evento de install llamado, pero no el evento de activate .
Además, cuando envío un mensaje al trabajador del servicio desde mi aplicación:
navigator.serviceWorker.controller.postMessage({test: 'test'}) el evento de message en el trabajador del servicio tampoco se llama ...
¿Hay algo mal que estoy haciendo? ¿El trabajador del servicio no se activa de alguna manera?
Para contexto adicional, mi aplicación usa Next.js y coloco service-worker.js en la carpeta public de mi proyecto.
Además, en la aplicación, si intento publicar el mensaje como este:
navigator.serviceWorker.ready.then(registration => { console.log(registration.active) registration.active.postMessage({test: 'test'}) })Me registra la instancia del trabajador del servicio, (supongo) lo que significa que el trabajador del servicio está realmente activo/listo.
ServiceWorkerRegistration.active no está disponible de inmediato, por lo que la instancia debe obtenerse con la installing o waiting primero. skipWaiting() podría usarse cuando el SW se actualiza/modifica desde la última instalación.
// main.js navigator.serviceWorker?.register('./service-worker.js') .then(reg => { console.log('registered', reg) const sw = reg.installing || reg.waiting || reg.active sw.postMessage({ milliseconds: Date.now() }) }) .catch(() => console.error('registration failed')) // service-worker.js self.addEventListener('install', e => { console.log(e.type) self.skipWaiting() // always activate updated SW immediately }) self.addEventListener('activate', e => console.log(e.type)) self.addEventListener('message', e => console.log(e.type, e.data))