How to update Reactjs based PWA to the new version?

问题

I'm developing a reactjs based application. I also made service-worker settings on it. After add to home screen , application never checks the server for new updates.

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.

回答1:

I finally resolved my problem after two days. The problem was in service-worker file. 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:

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. 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):

I found better way to update new PWA. Actually that way (above) not work on iOS 13. So I decide check update by API. PWA Send current version to API and if there is new version released , in PWA we should delete all caches:

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.

来源：https://stackoverflow.com/questions/56972246/how-to-update-reactjs-based-pwa-to-the-new-version