Javascript 更改服务人员的姓名？

我试图弄清楚如果我在名为

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

---

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

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

这将需要更新到

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

---

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

现在想象一个服务人员

sw.js

已安装并处于活动状态（控制客户端）， Chrome会像这样为您可视化过程

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

---

2。现在，让我们将服务工作者文件重命名为

sw2.js

你可以看到，chrome告诉你，服务人员的某些方面发生了变化。但是当前客户端将继续控制客户端，直到您通过单击

skipwaiting

按钮或刷新缓存强制新客户端控制为止。点击按钮将使

sw2.js

控制

sw1.js

现在，如果需要以编程方式执行此操作，可以通过调用

self.skipWaiting（）

在服务人员内部的

install

事件中执行此操作

---

杰克·阿奇博尔德的文章中的以下内容可以让这个想法更加清晰。

我通过设置一个服务器来解决这个问题，该服务器可以同时侦听

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

如您所见，我添加了第二条路径为同一个service worker提供服务，但是使用了

/sw.js

端点，一条用于旧的

sw.js

，另一条用于新的

service worker.js

---

现在，当拥有旧的活动

sw.js

的老访问者将下载新的

service worker.js

service worker时，他们将自动获取新的重命名

service worker.js
你清除了浏览器的缓存吗？@Mathias这对我有用，但我希望它能为每个人更新OK，你不会经常改变的，对吧？我猜大多数人不会。不是真的，我只是想知道如何在一个实时站点上更改它以防万一。在reactjs应用程序中，你会怎么做？我已经添加了用于注册软件的代码，但我从未使用过您提到的
SharedWorker
。您部署的代码中的某个地方是“ws.js”。这是一个关于ServiceWorkers而不是WebWorkers的问题为什么没有意义？当老访问者到来时，老服务人员将再次尝试获取老服务人员（
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}`);
});