Как убедиться, что обновление PWA является «транзакцией atomi c»?

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 в браузере.

(я тестирую это в последняя Chrome на Android и Windows 10.)

Что здесь не так?

Answer 1

Вы можете получить описанное вами поведение, убедившись, что обещание, переданное в event.waitUntil(), отклоняется при сбое кэширования. Ваш текущий код оборачивает отклонение async в блок catch, но затем не выдает ошибку повторно, поэтому общее обещание всегда будет выполнено и никогда не будет отклонено.

Вы можете сделать это вместо :

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 для обзора этого этапа жизненного цикла сервис-воркера.