仅为新客户端更新 ServiceWorker

Question

我正在尝试更新我的 ServiceWorker。

我有一个老服务人员，一些窗口在它的控制之下。现在有一个新版本的 ServiceWorker。它得到正确安装。但它不会为新页面激活。我的目标是为旧页面保留旧页面，为每个查看的新标签/页面保留新页面。

知道如何做到这一点吗？

编辑：

我如何检查新的服务人员是否未更新：

我有一个 sendMessage 方法：

sendMessage(message): Promise {
    const channel = new MessageChannel();
    const p1 = channel.port1;
    const result = new Promise(resolve => {
      p1.onmessage = ({ data }) => {
        resolve(data);
      };
    });
    serviceWorker.controller.postMessage(message, [channel.port2]);
    return result;
  }

然后我用它来检查页面开始

this.ready = this.sendMessage('version')
  .then(version => {
    if (version !== process.env.BUILD_NUMBER) {
      console.log('$$ Version mismatch, reinstalling service worker');
      throw new Error('build mismatch');
    }

    return serviceWorker.controller;
   });

我在 ServiceWorker 中回答

self.addEventListener('message', ({ data, ports  }) => {
  const client = ports[0];
  if (data === 'version') {
    client.postMessage(process.env.BUILD_NUMBER);
  }
});

编辑

添加：

event.waitUntil(self.clients.claim());

有帮助，但它也为老客户激活了 ServiceWorker。

谢谢

Answer 1

在 Service Worker 的 install 事件处理程序中调用 self.skipWaiting() 将导致新安装的 Service Worker 立即激活，即使存在当前对其他客户端处于活动状态的旧 Service Worker。如果没有self.skipWaiting()，新安装的Service Worker 将保持waiting 状态，直到前一个Service Worker 的所有其他客户端都已关闭。

有时也会使用从activate 事件处理程序内部调用self.clients.claim()，但前提是您希望新激活的服务工作者控制不受控制或由旧版本控制的已打开客户端的服务人员。在你的情况下，听起来你不想要这种行为，所以你不应该打电话给self.clients.claim()。