javascript - 仅为新客户端更新 ServiceWorker

Question

我正在尝试更新我的 ServiceWorker。

我有一个旧的服务 worker ，一些窗口在它的控制之下。现在有一个新版本的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

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

调用self.clients.claim()有时也会使用 activate 事件处理程序内部的内容，但前提是您希望新激活的 Service Worker 控制已打开的客户端，这些客户端要么不受控制，要么由旧版本的 Service Worker 控制。服务人员。就您而言，听起来您不想要这种行为，因此您不应调用self.clients.claim()。