javascript - Service Worker controllerchange 永远不会触发

Question

我想在每次页面加载时向 service worker 发送一条消息。

第一次加载页面时，它调用 register() 然后监听 navigator.serviceWorker 上的“controllerchange”事件，但这从未触发。

我怎么知道什么时候可以开始向 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);
});

Answer 1

How do I know when I can start postMessaging a service worker?

只关注这一点:我推荐以下方法，它利用了 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');
});

如果您想深入了解为什么您的 controllerchange 事件监听器没有触发，我猜您没有使用 clients.claim()在你的 service worker 的 activate 事件中，这意味着新激活的 service worker 不会控制当前页面。