8

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.

ChrisM
  • 505
  • 6
  • 18
Abbas Habibnejad
  • 433
  • 5
  • 14
  • 1
    You may want to check this [post](https://deanhume.com/displaying-a-new-version-available-progressive-web-app/), this show a basic way how to update PWA to a newer version using ServiceWorker, PWA update notification and event listener. – Mr.Rebot Jul 17 '19 at 06:40
  • Thank you. It is Very useful and complete. – Abbas Habibnejad Jul 22 '19 at 14:49

2 Answers2

6

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.

Abbas Habibnejad
  • 433
  • 5
  • 14
  • 1
    Hi - I'm running into the same problem and just wanted to understand your 2019 update. Where did you put this code? What API checks for the new version? Thanks! – AlexM88 Jan 02 '20 at 23:07
  • 1
    Hi Alex. Actually, I have check function in every request on API. in this function, I check all requirements. so I send version name on header's request and on API, I first check the version's validity and if it was not valid, in response,I set status to UPDATE. so in react project, on every response I check if status is equal to UPDATE {1.clear cache; 2.reload the page to get new version}. for example: in react project we have variable for version_name is equal 1.0.0 . in API version_name is equal 1.0.1 . in this scenario, our response should be: {status="UPDATE"}. sorry about my English – Abbas Habibnejad Jan 04 '20 at 07:59
1

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();
    });
  },
});
Salu Escalante
  • 11
  • 1