Question

我成功注册了一个服务工作者，但接着是代码

navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
    // Do we already have a push message subscription?
    ....

挂起 - 永远不会调用该函数。为什么呢？

Answer 1

问题是service-worker.js文件存储在assets子目录中。

不要这样做：将service-worker.js存储在root of your app（或更高版本）中。这样您的应用就可以访问服务工作者了。

请参阅HTML5Rocks article -

注册方法的一个微妙之处是服务工作者文件的位置。在这种情况下，您会注意到服务工作者文件位于域的根目录。这意味着服务工作者的范围将是整个起源。换句话说，此服务工作者将接收此域上所有内容的获取事件。如果我们在/example/sw.js注册服务工作者文件，那么服务工作者只能看到URL以/ example /开头的页面的获取事件（即/ example / page1 /，/ example / page2 /）。 p>

<强>加

一个新问题是，如果页面被重新加载，那么服务工作者就永远不会准备好。后续软页面重新加载工作正常。谷歌自己的示例代码失败了。 See the Chrome bug report.

错误修复程序包含在Chrome 44中。

Answer 2

就我而言-只需关闭标签并再次将其打开...

Answer 3

有相同的问题，但是将Service Worker和安装脚本放在同一目录中并不能解决此问题。对我而言，解决方案是在网址末尾添加“ /”。所以我有：

http://localhost:9105/controller/main.js-安装脚本

http://localhost:9105/controller/sw.js-服务人员

http://localhost:9105/controller/index.html-页面

当浏览器中的URL为http://localhost:9105/controller时，服务人员尚未准备好，但是当URL为http://localhost:9105/controller/时，它可以正常工作。

我使用下面的代码来控制它

if (!window.location.href.endsWith('/')) {
    window.location.assign(window.location.href + '/')
  }

Answer 4

就像在接受的答案中所说的那样，问题确实出在，这可能是因为您的服务工作者JS文件位于与当前页面不同的路径中。

默认情况下，服务工作者的范围是其JS文件的路径。如果您的JS文件可以在http://www.example.com/assets/js/service-worker.js处访问，则您的服务工作者将只能工作/“准备好”以/assets/js/开始的URL。

但是，您可以更改服务工作者的范围。首先，您需要使用scope选项进行注册：

navigator.serviceWorker.register('http://www.example.com/assets/js/service-worker.js', {
    scope: '/',
});

仅此，您将在Chrome控制台中看到错误：

提供的范围（'/'）的路径不在最大范围内   允许（'/ assets / js /'）。调整范围，移动服务人员   脚本，或使用Service-Worker-Allowed HTTP标头允许   范围。

/ admin /＃/ builder：1未捕获（承诺）DOMException：无法   在以下位置注册用于范围（'http://www.example.com/'）的ServiceWorker   脚本

（'http://www.example.com/assets/js/service-worker.js'）：的路径   提供的范围（'/'）不在允许的最大范围内   （'/ assets / js /'）。调整范围，移动Service Worker脚本，或   使用Service-Worker-Allowed HTTP标头允许范围。

然后，您需要在网站的根目录下创建一个.htacess文件，其内容如下：

<IfModule mod_headers.c>
    <Files ~ "service-worker\.js">
        Header set Service-Worker-Allowed: /
    </Files>
</IfModule>

Answer 5

将 service-worker.js 文件添加到您的项目根目录

您可以从Link

下载 service-worker.js 文件。

并使用以下代码注册服务工作者。

if ('serviceWorker' in navigator) {
   navigator.serviceWorker
     .register('./service-worker.js', { scope: './' })
       .then(function (registration) {
          console.log("Service Worker Registered");
    })
      .catch(function (err) {
        console.log("Service Worker Failed to Register", err);
     })

 }

navigator.serviceWorker永远不会准备好

5 个答案: