javascript - 如何将基于Reactjs的PWA更新到新版本？(How to update Reactjs based PWA to the new version?)

Question

I'm developing a reactjs based application.

(我正在开发一个基于reactjs的应用程序。)

I also made service-worker settings on it.

(我还对它进行了service-worker设置。)

After add to home screen , application never checks the server for new updates.

(add to home screen ，应用程序再也不会检查服务器是否有新更新。)

I also tried:

(我也尝试过：)

window.location.reload(true);

But it doesn't update new version.

(但是它不会更新新版本。)

I'm using Apache server to serve build folder and for update I'm getting a new build of my project and serve that on Apache server.

(我正在使用Apache服务器来提供build文件夹，并且为了进行更新，我正在获得一个新的项目构建并将其提供给Apache服务器。)

  ask by Abbas Habibnejad translate from so

Answer 1

I finally resolved my problem after two days.

(两天后，我终于解决了我的问题。)

The problem was in service-worker file.

(问题出在service-worker文件中。)

I had to add event listener if page reloaded and server files had changes so it will update the files.

(如果页面重新加载并且服务器文件已更改，则必须添加事件侦听器，以便它将更新文件。)

So I added this section to serviceWorker.js in register function:

(因此，我在register功能中将此部分添加到serviceWorker.js中：)

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);
                  })
              );
          })
      );
    });

Just don't forget.

(只是不要忘记。)

This listener call when page is reload.

(重新加载页面时，此侦听器调用。)

So I make API service to check there is new version or not.

(因此，我进行API服务以检查是否有新版本。)

if there is new version , It have to reload the page to get new files.

(如果有新版本，则必须重新加载页面以获取新文件。)

this question was so helpful: How to clear cache of service worker?

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

Update (December.1.2019):

(更新（2019年12月1日）：)

I found better way to update new PWA.

(我找到了更新新PWA的更好方法。)

Actually that way (above) not work on iOS 13. So I decide check update by API.

(实际上，这种方式（上述）在iOS 13上不起作用。因此，我决定通过API检查更新。)

PWA Send current version to API and if there is new version released , in PWA we should delete all caches:

(PWA将当前版本发送到API，如果发布了新版本，则在PWA中，我们应删除所有缓存：)

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

And after that reload application:

(在该重新加载应用程序之后：)

window.location.href = "./";

After reload because there is no cache to load pages on offline mode, so PWA will check server and get new version.

(重新加载后，因为没有缓存可以在脱机模式下加载页面，所以PWA将检查服务器并获取新版本。)