更改 Service Worker 的名称？

Question

我试图找出如果我有叫活动网站注册的服务人员会发生什么sw.js，然后我的服务人员重命名为service-worker.js。现在旧的没有找到，但它仍然显示旧的缓存版本。

注册新重命名的 Service Worker 需要多长时间，或者它是如何工作的？

编辑

这就是我在反应应用程序中注册服务工作者的方式：

componentDidMount() {
  if ("serviceWorker" in navigator) {
    navigator.serviceWorker
      .register("/service-worker.js")
      .then(registration => {
        console.log("service worker registration successful: ", registration);
      })
      .catch(err => {
        console.warn("service worker registration failed", err.message);
      });
  }
}

Answer 1

新创建的 service worker（重命名）无法接管旧的 service worker，因为旧的 service worker 仍然处于活动状态并控制着客户端。新的 service worker（重命名为 one）将等到现有的 worker 控制零客户端。

现在想象一个 service workersw.js安装并处于活动状态（控制客户端），Chrome 会像这样为你可视化这个过程

1. Service Worker 已注册并处于活动状态

2.现在让我们将服务工作者文件重命名为 sw2.js

您可以看到 chrome 告诉您 Service Worker 发生了一些变化。但是当前的将继续控制客户端，直到您通过单击skipWaitting按钮或刷新缓存来强制新的客户端进行控制。单击按钮将导致sw2.js 控制sw1.js

现在，如果您需要以编程方式执行此操作，则可以install通过调用self.skipWaiting().

self.addEventListener('install', (e) => {

  let cache = caches.open(cacheName).then((c) => {
    c.addAll([
      // my files
    ]);
  });

  self.skipWaiting();
  e.waitUntil(cache);
});

以下来自 Jake Archibald 的文章The Service Worker Lifecycle 的动画图像可以使这个想法更加清晰。

Answer 2

您必须更新实例创建代码以反映初始化和使用共享工作线程的更改，例如您当前的代码如下所示

var worker = new SharedWorker("ws.js");

需要更新为

var worker = new SharedWorker("service-worker.js");