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

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

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

仅为新客户端

1 个答案: