Service Worker控制器永远不会开火

Question

我想在每次加载页面时向服务人员发送一条消息。

第一次加载页面时，它调用寄存器（），然后侦听navigator.serviceWorker上的“控制器更改”事件，但这永远不会触发。

我如何知道何时可以开始发送邮件给服务人员？

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

它不触发的原因是，在服务人员已经安装/激活后，您正在注册controllerchange事件。因此，此事件将针对新的服务人员触发，例如使用skipWaiting（）的人员。但不适用于最初的服务人员。

使用导航器。服务人员。就绪promise，无论何时安装/激活，只要检测到活动服务工作人员，就会立即解决。

Answer 2

我如何知道何时可以开始发送邮件给服务人员？

只关注这一点：我推荐以下方法，它使用了navigator.serviceWorker.readypromise：

// 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');
});

如果您确实想了解为什么您的ControlerChange事件侦听器没有触发，我的猜测是您没有在服务工作者的激活事件中使用clients.claim（），这意味着新激活的服务辅助角色不会控制当前页面。