从客户端测试一个活跃的 service worker

Question

在我的 client.js 中，我注册了一个 service worker：

var someVariable;

if('serviceWorker' in navigator) {
    navigator.serviceWorker.register('./service-worker.js')
    .then(function() {
        console.log('Service worker registered.');
        if(localStorage.someVariable) {
            someVariable = JSON.parse(localStorage.someVariable);
        };
    });
};

现在，在我的 client.js 代码下方，我想检查 client.js 是否有一个 active service worker up 和运行 .

从 service-worker.js 中这样做在某种程度上对应于 self.registration 的测试，因为 self.registration.active 似乎不起作用。

但是，对于 client.js 中的活跃服务工作者来说，等效测试是什么？

navigator.serviceWorker.ready 返回一个 Promise，但我不知道这是否真的是我需要的 in/as 条件

Answer 1

你的选择

如果要查看当前页面当前是否在some个service worker的控制之下，可以查看navigator.serviceWorker.controller。如果当前页面不受 service worker 控制，它将是 null，如果它由 service worker 控制，则设置为 ServiceWorker 实例。

如果你想检查与给定 ServiceWorkerRegistration 关联的服务工作者在给定时间点是否处于活动状态，你可以使用如下代码来实现：

const registration = await navigator.serviceWorker.register('sw.js');
// Examine `registration.active` to see if, at the current point in time,
// there's an active service worker.

如果您想编写的代码会等待，直到有任何活动的服务工作者与当前页面的服务工作者注册相关联，那么 await navigator.serviceWorker.ready 会为您完成.

主动与控制

简单说明一下活跃的 service worker 和控制 service worker 之间的区别。 service worker 可以处于活动状态但不能控制任何客户端页面——如果 service worker 不调用 clients.claim().[=20=，这就是第一次为给定范围注册 service worker 时会发生的情况]

如果您在 service worker 中调用 clients.claim()，那么主动和控制之间的区别几乎可以忽略。

从客户端测试一个活跃的 service worker

Test for an active service worker from within the client

client

registration

es6-promise

service-worker

progressive-web-apps

你的选择

主动与控制