Service Worker controllerchange 永远不会触发

Question

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

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

我怎么知道我什么时候可以开始 postMessaging 一个 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

我如何知道何时可以开始向 Service Worker 发送消息？

只需关注这一点：我建议使用以下方法，该方法利用了承诺navigator.serviceWorker.ready：

// 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()在服务工作人员的activate事件中使用，这意味着新激活的服务工作人员将无法控制当前页面。