Question

我遇到的问题是，在注册serviceWorker之后，navigator.serviceWorker.controller始终为null。我从不做强制刷新，只刷新页面。我使用谷歌浏览器42.0.2311.152米（32位）测试它。

var currentServiceWorker = null;
navigator.serviceWorker.register(SERVICE_WORKER_URL).then(function(serviceWorkerRegistration { 
  if (navigator.serviceWorker.controller) {
    currentServiceWorker = navigator.serviceWorker.controller;
  } else {
    currentServiceWorker = serviceWorkerRegistration.active;
  }
});

根据这个：

ServiceWorkerContainer接口的控制器只读属性在其状态被激活时返回ServiceWorker对象（ServiceWorkerRegistration.active返回的同一对象）。如果请求是强制刷新（Shift +刷新）或者没有活动工作程序，则此属性返回null。（来源：https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerContainer/controller）

navigator.serviceWorker.controller应返回与serviceWorkerRegistration.active相同的对象。但是.active我得到了活跃的工作人员，.controller没有。

你对这种情况有什么想法吗？

谢谢你，岸堤

Answer 1

调试时我要注意的第一件事是你当前的页面是否属于服务工作者的范围。如果您当前的页面不在范围内，那么它将无法控制（但您注册的服务人员仍然可以被视为活动页面。）

您正在调用register(SERVICE_WORKER_URL)，默认情况下，它将使用包含服务工作者脚本的目录作为范围。这通常是您想要的，但您需要确保SERVICE_WORKER_URL引用位于您网站根目录的脚本。这样，它就能够控制同一根级别的页面或Web根目录下的目录中的页面。因此，如果您的服务工作者JavaScript文件当前位于/scripts/子目录或类似的目录下，请将其移至根目录。

您可以访问chrome://serviceworker-internals/并查看与注册相关的范围，来检查服务工作者的当前范围。

Answer 2

navigator.serviceWorker.register只注册服务工作者并激活它。但要让控制器通过服务工作者，您需要将您的服务工作者放在公共根文件夹中，以便所有页面都在范围内，并且服务工作者将附加到它。

Answer 3

尝试在服务工作者中添加它：

self.addEventListener('activate', event => {
    clients.claim();
    console.log('Ready!');
});

Answer 4

clients.claim（）答案为我做到了，以及控制器已更改的监听器：

navigator.serviceWorker.addEventListener("controllerchange", (evt) => {
    console.log("controller changed");
    this.controller = navigator.serviceWorker.controller;
});

感谢库沙格拉·古尔

Answer 5

确保在开发人员工具>应用程序>服务工作者下未选中“网络绕过”。这将阻止您设置服务工作者控制器。

navigator.serviceWorker.controller始终为null

5 个答案: