service-worker - navigator.serviceWorker 从未准备好

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（或更高版本）中。这样你的应用就可以访问 service-worker。

见HTML5Rocks 文章——

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

添加

一个新问题是，如果页面被硬重新加载，服务工作者永远不会准备好。随后的软页面重新加载工作正常。谷歌自己的示例代码失败。请参阅 Chrome 错误报告。

该错误修复包含在 Chrome 44 中。

Answer 2

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

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

但是，您可以更改服务人员的范围。scope首先，如果使用该选项，您需要注册：

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

如果这样做，就这样，您将在 Chrome 控制台中收到错误：

提供的范围 ('/') 的路径不在允许的最大范围 ('/assets/js/') 之下。调整范围，移动 Service Worker 脚本，或者使用 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 3

有同样的问题，但是将服务工作者和安装脚本放在同一个目录中并没有解决这个问题。对我来说，解决方案是在 url 的末尾添加一个“/”。所以我有：

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

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

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

当浏览器中的 url 是http://localhost:9105/controllerservice worker 时，还没有准备好，但是当 url 是它时http://localhost:9105/controller/它工作正常。

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

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

Answer 4

在我的情况下 - 只需关闭选项卡并再次打开它......

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

 }