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

Question

我正在使用下面的脚本来注册service worker，并且想检查这个service worker是否支持push?只是为了测试的目的，我打印"打印服务工作者"，但它没有被打印到控制台。请帮助我触发我错在哪里?

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

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

除非你在service worker中调用self.clients.claim()，否则它在初始注册时不会在导航过程中控制当前网页。至于navigator.serviceWorker.ready的承诺，它不会解决，直到有一个服务工作者控制的页面。把这两个放在一起，我不希望你的console.log()在你第一次访问页面时执行，但我希望它在随后的访问中执行(如果service worker安装正确)。

有一个使用self.clients.claim()的例子，如果你想让你的service worker在你第一次导航到那里时控制页面。

至于你的实际问题，如果你觉得需要功能检测服务工作者推送支持，你应该能够检查'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
}

Answer 2

您的问题可能是您没有声明一个作用域变量?试一试:

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

另一个可能的可能性是，你没有正确地添加一个清单文件，说明在这里开始在'在谷歌开发控制台做一个项目':https://developers.google.com/web/updates/2015/03/push-notificatons-on-the-open-web?hl=en