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

Question

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

我也试过：

window.location.reload(true);

但它不会更新新版本。

我正在使用Apache服务器来提供build文件夹和更新我正在获取我的项目的新版本并在Apache服务器上提供服务。

Answer 1

两天后我终于解决了我的问题。问题出在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 服务来检查是否有新版本。如果有新版本，它必须重新加载页面以获取新文件。

这个问题很有帮助：如何清除服务工作者的缓存？

更新（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 会检查服务器并获取新版本。