How not to save an app on a web browser cache

Hi everyone,

I have a PWA hosted on firebase. Everything is good. I have a little issue: whenever I update the code. It doesn’t update on my users’ devices when they get in. The whole code gets stored on cache and they are not up to date with the version. They have to manually click on the link and hit enter - on Chrome - to refresh the cache. On Safari, I have to refresh the page like four times for it to refresh it.

Is there anything I can do so I can trigger an update on everyone’s phone?

Did u found a solution ? :confused:

Sure!

The problem was that the ng build --prod was outputing the same hash over and over. Caches look at this hash to see if there are updates. So, as browsers see the same hash, they don’t update the code and it gets cached.

The best solution is, instead of ng build --prod, I use ng build --prod --outputHashing=none

Hope it works for you.

1 Like

Okay thanks !!

I think we can change it in the angular.json file directly “outputHashing” ?

Another option is to use angular’s service worker API and provide a mechanism for updates to be applied.

    this.swUpdate.available.subscribe(async () => {
      const toast = await this.toastCtrl.create({
        message: 'Update available!',
        position: 'bottom',
        buttons: [
          {
            text: 'Reload',
            role: 'cancel',
          },
        ],
      });
      await toast.present();
      toast
        .onDidDismiss()
        .then(() => this.swUpdate.activateUpdate())
        .then(() => window.location.reload());
    });