javascript - 更改服务人员的名称？

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);
      });
  }
}

标签： javascriptreactjsservice-workerprogressive-web-apps

Answer 1

新创建的服务工作者（重命名）无法接管旧的服务工作者，因为旧的服务工作者仍然处于活动状态并控制着客户端。新的服务工作者（重命名为一个）将等到现有工作者控制零客户端。

现在想象一个服务工作者sw.js已安装并处于活动状态（控制客户端），Chrome 会像这样为您可视化该过程

1. service worker 注册并活跃

---

2. 现在让我们将 service worker 文件重命名为sw2.js

您可以看到 chrome 告诉您服务人员发生了一些变化。但是当前客户端将继续控制客户端，直到您通过单击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的动画图片可以让这个想法更加清晰。