navigator.serviceWorker 从未准备好 [英] navigator.serviceWorker is never ready

问题描述

我成功注册了一个service worker，然后是代码

I registered a service worker successfully, but then the code

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

hangs -- 该函数永远不会被调用.为什么?

hangs -- the function is never called. Why?

推荐答案

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

The problem was that the service-worker.js file was stored in an assets sub-directory.

不要这样做:将 service-worker.js 存储在应用程序的根目录(或更高)中.这样你的应用就可以访问 service-worker.

Don't do that: store the service-worker.js in the root of your app (or higher). That way your app can access the service-worker.

参见 HTML5Rocks 文章 --

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

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/).

已添加

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

A new problem is that the serviceworker is never ready if the page is hard-reloaded. Subsequent soft page reloads work fine. Google's own sample code fails. See the Chrome bug report.

错误修复包含在 Chrome 44 中.

这篇关于navigator.serviceWorker 从未准备好的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！