navigator.serviceWorker 从未准备好

Question

我成功注册了一个service worker，但是后面的代码

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

挂起 -- 函数从未被调用。为什么？

Answer 1

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

不要那样做：将服务-worker.js 存储在root of your app（或更高版本）中。这样您的应用程序就可以访问服务人员。

参见HTML5Rocks article --

One subtlety with the register method is the location of the service worker file. You'll notice in this case that the service worker file is at the root of the domain. This means that the service worker's scope will be the entire origin. In other words, this service worker will receive fetch events for everything on this domain. If we register the service worker file at /example/sw.js, then the service worker would only see fetch events for pages whose URL starts with /example/ (i.e. /example/page1/, /example/page2/).

Answer 2

在我的例子中 - 只需关闭选项卡并再次打开它...

Answer 3

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

默认情况下，service worker 的范围是它的 JS 文件的路径。如果您的 JS 文件可以在 http://www.example.com/assets/js/service-worker.js 访问，您的服务工作人员将只工作/"be ready" for URL 从 /assets/js/.

开始

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

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

如果这样做，仅此而已，您将在 Chrome 控制台中收到错误消息：

The path of the provided scope ('/') is not under the max scope allowed ('/assets/js/'). Adjust the scope, move the Service Worker script, or use the Service-Worker-Allowed HTTP header to allow the scope.

/admin/#/builder:1 Uncaught (in promise) DOMException: Failed to register a ServiceWorker for scope ('http://www.example.com/') with script

('http://www.example.com/assets/js/service-worker.js'): The path of the provided scope ('/') is not under the max scope allowed ('/assets/js/'). Adjust the scope, move the Service Worker script, or use the Service-Worker-Allowed HTTP header to allow the scope.

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

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

Answer 4

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

您可以从 Link

下载 service-worker.js 文件

并使用下面的代码注册 service worker。

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

 }

Answer 5

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

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

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

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

当浏览器中的 url 为 http://localhost:9105/controller 时，service worker 从未准备好，但是当 url 为 http://localhost:9105/controller/ 时，它工作正常。

我使用下面的代码来控制这个

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

navigator.serviceWorker 从未准备好

navigator.serviceWorker is never ready

service-worker