Как обновить PWA на основе Reactjs до новой версии?

Я наконец решил свою проблему через два дня. Проблема была в service-worker файле. Мне пришлось добавить прослушиватель событий, если страница перезагрузилась, а файлы сервера изменились, чтобы он обновил файлы.

Поэтому я добавил этот раздел в serviceWorker.js в функции register:

window.addEventListener('activate', function(event) {
      event.waitUntil(
          caches.keys().then(function(cacheNames) {
              return Promise.all(
                  cacheNames.filter(function(cacheName) {
                      // Return true if you want to remove this cache,
                      // but remember that caches are shared across
                      // the whole origin
                  }).map(function(cacheName) {
                      return caches.delete(cacheName);
                  })
              );
          })
      );
    });

Только не забудь. Этот вызов слушателя при перезагрузке страницы. Поэтому я делаю службу API, чтобы проверить, есть ли новая версия или нет. если есть новая версия, необходимо перезагрузить страницу, чтобы получить новые файлы.

этот вопрос был очень полезен: Как очистить кеш работника службы?

Обновление (1 декабря 2019 г.):

Я нашел лучший способ обновить новый PWA. На самом деле этот способ (выше) не работает на iOS 13. Поэтому я решил проверить обновление по API. PWA Отправьте текущую версию в API, и если будет выпущена новая версия, в PWA мы должны удалить все кеши:

caches.keys().then(function(names) {
    for (let name of names)
        caches.delete(name);
});

И после этого перезагрузите приложение:

window.location.href = "./";

После перезагрузки из-за отсутствия кеша для загрузки страниц в автономном режиме, поэтому PWA проверит сервер и получит новую версию.

эта работа для меня: src/index.tsx

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://cra.link/PWA
serviceWorkerRegistration.register({
  onUpdate: (e) => {
    const { waiting: { postMessage = null } = {} as any, update } = e || {};
    if (postMessage) {
      postMessage({ type: 'SKIP_WAITING' });
    }
    update().then(() => {
      window.location.reload();
    });
  },
});