How to properly "update" a PWA?

Hi,

We are working in a F7 PWA project. Everytime we have a new realease, we follow this steps:

  1. npm run build-prod
  2. rsync the ‘www’ folder to the hosting / web server.

This work ok but requires to clear browser cache in order to see the last version. Is there any way to avoid that?

Thanks in advance!

The browser caches the application. To avoid this, you can tell the browser not to cache by making some changes in service-worker.js.

https://developers.google.com/web/ilt/pwa/introduction-to-service-worker

Thanks @uslualper!

Checking the ‘service worker’ documentation I understood that this is not a topic directly related to F7.

Anyway, I found a solution that can be helpful to others in the community.

export function forceServiceWorkerUpdate() {
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.getRegistrations().then(function (registrations) {
      for (let registration of registrations) {
        // registration.update();  does not work!
        registration.unregister();
      }
      window.location.reload(true);
    });
  }
}
2 Likes