如何将基于Reactjs的PWA更新到新版本？

我正在开发一个基于reactjs 的应用程序。我也做了service-worker对其进行设置。后add to home screen，应用程序从不检查服务器是否有新更新。

我也尝试过：

window.location.reload(true);

但它不会更新新版本。

我在用着Apache服务器来服务build文件夹并进行更新，我正在获取项目的新版本并将其提供给Apache server.

两天后我终于解决了我的问题。问题出在service-worker文件。如果页面重新加载并且服务器文件发生更改，我必须添加事件侦听器，以便它会更新文件。

所以我将这一部分添加到serviceWorker.js in 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服务来检查是否有新版本。如果有新版本，则必须重新加载页面才能获取新文件。

这个问题非常有帮助：如何清除Service Worker的缓存？ https://stackoverflow.com/questions/45467842/how-to-clear-cache-of-service-worker

更新（2019 年 12 月 1 日）：

我找到了更新新 PWA 的更好方法。实际上这种方式（上面）在 iOS 13 上不起作用。所以我决定通过 API 检查更新。 PWA 将当前版本发送到 API，如果有新版本发布，在 PWA 中我们应该删除所有缓存：

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

重新加载应用程序后：

window.location.href = "./";

重新加载后，由于离线模式下没有缓存加载页面，因此 PWA 将检查服务器并获取新版本。