为什么 ServiceWorkerRegistration 回调在 service worker 注册成功后没有命中？

Question

我正在使用下面的脚本注册 service worker，想看看这个 service worker 是否支持推送？仅出于测试目的，我正在打印 'Print Service worker'，但它没有打印到控制台。请帮我触发哪里出错了？

function register()
{
    if ('serviceWorker' in navigator)
    {
        navigator.serviceWorker.register('service-worker.js', {scope: scope}).then(initialiseState);
    } 
    else {
        console.warn('Service workers aren\'t supported in this browser.');
    }
}

function initialiseState() 
{ 
navigator.serviceWorker.ready.then(function(serviceWorkerRegistration)
        {  console.log('Print Service worker');});
}

提前致谢

Answer 1

您的问题可能是您没有声明范围变量？尝试：

navigator.serviceWorker.register('service-worker.js', { scope: '/' }).then(initialiseState);

另一种可能是您没有正确添加清单文件，此处的说明从 'Make a Project on the Google Developer Console' 开始：https://developers.google.com/web/updates/2015/03/push-notificatons-on-the-open-web?hl=en

Answer 2

首先，解释一下为什么您没有看到预期的日志记录：

除非您在 service worker 中调用 self.clients.claim()，否则在最初注册时，它不会在导航期间控制当前网页。至于 navigator.serviceWorker.ready promise，只有在有 service worker 控制页面时才会解决。将这两个放在一起，我不希望你的 console.log() 在你第一次访问该页面时执行，但我希望它在随后的访问中执行（如果 service worker 安装正确）。

如果您想让服务人员在您第一次导航到该页面时控制该页面，可以使用 example self.clients.claim()。

至于您的实际问题，如果您觉得需要对服务工作者推送支持进行功能检测，您应该能够检查 'pushManager' in registration，其中 registration 是 ServiceWorkerRegistration 对象，就像 navigator.serviceWorker.register() 解析的那样。无需等到您的页面由 service worker 控制。所以这应该有效：

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('service-worker.js').then(function(registration) {
    if ('pushManager' in registration) {
      // The service worker supports push
    } else {
      // The service worker doesn't support push
    }
  });
} else {
  // The browser doesn't support service workers
}

为什么 ServiceWorkerRegistration 回调在 service worker 注册成功后没有命中？

Why does ServiceWorkerRegistration callback is not hitting after the successful registration of service worker?

google-chrome

service-worker

chrome-gcm