Service Worker controllerchange never fires
javascript, service-worker
Solution
How do I know when I can start postMessaging a service worker?
Just focusing on that bit: I'd recommend the following approach, which makes use of the `navigator.serviceWorker.ready` promise:
// navigator.serviceWorker.ready can be used from anywhere in your
// page's JavaScript, at any time.
// It will wait until there's an active service worker,
// and then resolve with the service worker registration
navigator.serviceWorker.ready.then(registration => {
registration.active.postMessage('ping');
});
If you do want to get to the bottom of why your `controllerchange` event listener isn't firing, my guess would be that you're not using `clients.claim()` in your service worker's `activate` event, which means the newly-activated service worker won't take control of the current page.
Problem
I want to send a message to a service worker every time the page loads. The first time the page loads it calls register() and then listens for the "controllerchange" event on navigator.serviceWorker but this never fires. How do I know when I can start postMessaging a service worker? ``` navigator.serviceWorker.register(swURL).then(function(){ var sw; if (navigator.serviceWorker.controller) { sw = navigator.serviceWorker.controller; sw.postMessage('ping'); return; } function onchange(){ sw = navigator.serviceWorker.controller; sw.postMessage('ping'); navigator.serviceWorker.removeEventListener('controllerchange', onchange); } navigator.serviceWorker.addEventListener('controllerchange', onchange); }).catch(function(err) { // registration failed :( console.log('ServiceWorker registration failed: ', err); }); ```