更改服务工作者的姓名？

Question

I'm trying to figure out what happens if I have a service worker registered on a live site called sw.js and then I rename the service worker to service-worker.js . Now the old one isn't found but it is still showing the old cached version.

How long does it take for it to register the new renamed service worker or how does this work at all?

Edit

This is how I have register the service worker in a react application:

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

The newly created service worker (renamed) cannot take over the old one because the old one is still active and controlling the client. the new service worker(renamed one) will wait until the existing worker is controlling zero clients.

Now imagine a service worker sw.js installed and active (controlling the client), Chrome will visualize the process for you like this

1. The service worker is registered and active

---

2. Now let's rename the service worker file to sw2.js

You can see that chrome is telling you that something has changed about the service worker. but the current one will keep controlling the client until you force the new one to take control by clicking on the skipWaitting button or by flushing your cache. clicking on the button will cause the sw2.js to take controll over the sw1.js

Now if you need to do this programmatically, you can do it in the install event inside your service worker by calling self.skipWaiting() .

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

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

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

The following animated image from Jake Archibald's article The Service Worker Lifecycle can make the idea more clear.

Answer 2

You have to update the instance creation code to reflect this change where your shared worker is being initialized and used, for example your current code would look like

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

That will need to be updated to

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

Answer 3

I was able to solve it by setting up a server which listens to both /service-worker.js and /sw.js get requests.

Since the service worker was renamed from sw.js to service-worker.js it was not finding the old service worker at http://example.com/sw.js so what I did was the following:

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

As you can see, I added a second path to serve the same service worker but with the /sw.js endpoint, one for the old sw.js and the other one for the newer service-worker.js .

Now when old visitors that have the old active sw.js will download the newer one and upon revisit, they will automatically fetch the newer renamed service-worker.js service worker.