更改服务人员的名字？

Question

我想弄清楚如果我在名为sw.js的实时站点上注册了服务工作者，然后将服务工作者重命名为service-worker.js会发生什么情况。现在找不到旧版本，但仍显示旧的缓存版本。

注册新的重命名的服务工作者需要多长时间，或者根本如何工作？

修改

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

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

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

现在想象一下服务工人sw.js已安装并处于活动状态（控制客户端）， Chrome会像这样

为您可视化该过程

1。服务人员已注册并处于活动状态

---

2。现在，将服务工作者文件重命名为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）的文章animated image中的以下The Service Worker Lifecycle可以使想法更清晰。

Answer 2

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

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

那需要更新为

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

Answer 3

我能够通过设置一台同时监听/service-worker.js和/sw.js获取请求的服务器来解决此问题。

由于服务人员已从sw.js重命名为service-worker.js，因此在http://example.com/sw.js找不到旧的服务人员，所以我要做的是：

createServer((req, res) => {
  const parsedUrl = parse(req.url, true);
  const { pathname } = parsedUrl;
  // new service worker
  if (pathname === "/service-worker.js") {
    const filePath = join(__dirname, "..", pathname);
    app.serveStatic(req, res, filePath);
  // added new endpoint to fetch the new service worker but with the 
  // old path
  } else if (pathname === "/sw.js") {
    const filePath = join(__dirname, "..", "/service-worker.js");
    app.serveStatic(req, res, filePath);
  } else {
    handle(req, res, parsedUrl);
  }
}).listen(port, err => {
  if (err) throw err;
  console.log(`> Ready on http://localhost:${port}`);
});

如您所见，我添加了第二条路径来服务同一服务工作者，但具有/sw.js端点，一条路径用于旧的sw.js，另一条路径用于较新的service-worker.js

现在，当具有旧有效sw.js的旧访客将下载较新的service-worker.js服务时，他们将自动获取较新的已重命名的{{1}}服务工作者。