更改服務工作者的姓名？

Question

我想弄清楚如果我在一個名為sw.js的實際站點上注冊的服務工作者，然后我將服務工作者重命名為service-worker.js 。 現在找不到舊的但它仍然顯示舊的緩存版本。

注冊新的重命名服務工作者需要多長時間，或者這根本有用嗎？

編輯

這就是我在反應應用程序中注冊服務工作者的方法：

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

新創建的服務工作者（已重命名）無法接管舊服務工作者，因為舊服務工作者仍處於活動狀態並控制客戶端。 新服務工作者（重命名為）將等到現有工作人員控制零客戶端。

現在想象一下服務工作者sw.js安裝並激活（控制客戶端），Chrome會像這樣為您顯示流程

1.服務人員已注冊並處於活動狀態

---

2.現在讓我們將服務工作者文件重命名為sw2.js

您可以看到chrome告訴您有關服務工作者的更改。 但是當前的一個將繼續控制客戶端，直到您通過單擊skipWaitting按鈕或刷新緩存強制新的客戶端來控制。 單擊該按鈕將使sw2.js控制sw1.js

現在，如果需要以編程方式執行此操作，可以通過調用self.skipWaiting()在服務工作者內部的install事件中執行此操作。

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

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的舊sw.js將下載較新的訪問者並重新訪問時，他們將自動獲取較新的重命名的service-worker.js服務工作者。