从客户端内部测试活动的 Service Worker

Question

在 my 中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有一个活动的service worker 启动并运行。

从内部这样做在service-worker.js某种程度上相当于测试self.registration，因为self.registration.active似乎不起作用。

但是，从内部对活动服务工作者的等效测试是client.js什么？

navigator.serviceWorker.ready返回 a Promise，但我不知道这是否真的是我需要在/作为条件使用的。

Answer 1

您的选择

如果要检查当前页面当前是否处于某个Service Worker的控制之下，可以检查navigator.serviceWorker.controller. 这将是null如果当前页面不是由服务人员控制，并设置为一个ServiceWorker，如果它是由一个控制实例。

如果您想检查与给ServiceWorkerRegistration定时间点相关联的 service worker是否处于活动状态，您可以使用以下代码执行此操作：

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

如果你正在调用clients.claim()你的服务工作者，那么主动和控制之间的区别通常可以被忽略。