您如何確保 PWA 的更新是“原子事務”？

Question

在 PWA 中，我有一個 JavaScript 數組installCache ，其中包含要緩存的文件名。 這個更新代碼：

function addInstallListener() {
  self.addEventListener('install',
    event => {
      async function doIinstall() {
        try {
          await event.waitUntil(cache.addAll(installCache));
        } catch (err) {
          console.error("install event", err);
        }
      }
      event.waitUntil(doIinstall());
    }
  );
}
addInstallListener();

這不像我預期的那樣有效。 我希望列出的所有文件都安裝在客戶端上，但有時並非所有文件都已更新。

文件上傳到服務器（使用firebase deploy ），但舊版本的文件可能仍在瀏覽器的 PWA 緩存中。

（我正在 Android 和 Windows 10 上的最新 Chrome 中對此進行測試。）

這里有什么問題？

Answer 1

您可以通過確保在緩存失敗時傳遞給event.waitUntil()的 promise 拒絕來獲得您描述的行為。 您當前的代碼將async拒絕包裝在一個catch塊中，但不會重新拋出錯誤，因此總體 promise 將始終完成並且永遠不會拒絕。

你可以這樣做：

self.addEventListener('install', (event) => {
  const doInstall = async () => {
    try {
      const cache = await caches.open('my-cache-name');
      await cache.addAll(installCache);
    } catch (error) {
      // Do whatever logging you want.

      // Important: re-throw the error!
      throw error;
    }
  };

  event.waitUntil(doIinstall());
});

我建議通讀https://developers.google.com/web/fundamentals/primers/service-workers/lifecycle#install ，以了解 Service Worker 生命周期這一階段的概況。