How to update Reactjs based PWA to the new version?

Question

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.

Answer 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.

Answer 2

this work for me: 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();
    });
  },
});