Question

我使用以下脚本注册服务工作者，并想检查此服务工作者是否支持推送？出于测试目的，我正在打印“打印服务工作人员”，但它没有打印到控制台。请帮助我触发我出错的地方？

＆＃13;

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

＆＃13;

提前感谢

Answer 1

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

除非您在服务工作人员中致电self.clients.claim()，否则在导航最初注册时，它将无法控制当前网页。对于navigator.serviceWorker.ready承诺，它不会解决，直到有一个控制页面的服务工作者。将这两者放在一起，我不希望你的console.log()在第一次访问页面时执行，但我希望在后续访问时（如果服务工作者正确安装）。

如果您希望让您的服务工作人员在您第一次导航时控制该页面，则example使用self.clients.claim()。

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

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);

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

为什么ServiceWorkerRegistration回调在服务工作者成功注册后没有响应？

2 个答案: