0

I've an Angular PWA with refreshing problem. I have a TAB disabled.

<nz-collapse-panel [nzActive]="false" [nzDisabled]="true">

Now on the code i set this tab to enabled and build the solution and deployed on the webspace.

<nz-collapse-panel [nzActive]="false" [nzDisabled]="false">

If a go to the PWA and refresh, this Collapse remain disabled. I must reload the page more and more time and at the end, the Tab is enabled.

I close and reopen the app, the tab is disabled...

The data is correct and refreshed. It seem's only the HTML is using some cache that is not refreshed.

The strange thing is that after reload the page more time, the TAB become enabled (so i think have update the cache) and when reopen the app, the TAB is disabled again.

Also the menù doesn't refresh the list. It seems only html element's are not refreshing.

My configuration is with Angular 11 with Ng-Zorro

P.s Obviously if i go on browser on Developer Tool -> Application -> Delete site data, the cache is cleared and the PWA is Updated but on mobile phone i can't and i don't want to do this

This is my ngsw file:

{
"version": 3,
"$schema": "./node_modules/@angular/service-worker/config/schema.json",
"index": "/index.html",
"assetGroups": [
    {
        "name": "app",
        "installMode": "prefetch",
        "resources": {
            "files": ["/favicon.ico", "/index.html", "/manifest.webmanifest", "/*.css", "/*.js"]
        }
    },
    {
        "name": "assets",
        "installMode": "lazy",
        "updateMode": "prefetch",
        "resources": {
            "files": ["/assets/**", "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"]
        }
    }
],
"cacheConfig": {
    "strategy": "freshness"
}

}

and my appcomponent file

constructor(public baseService: BaseService, public webapi: WebapiService, private swUpdate: SwUpdate) {
    this.baseService.initialize();
    this.baseService.setWidth(window.innerWidth);
    //#region Check for updates
    if (this.swUpdate.isEnabled) {
        this.swUpdate.activated.subscribe((upd) => {
            window.location.reload();
        });
        this.swUpdate.available.subscribe(
            (upd) => {
                this.swUpdate.activateUpdate();
            },
            (error) => {
                console.error(error);
            }
        );
        this.swUpdate
            .checkForUpdate()
            .then(() => {})
            .catch((error) => {
                console.error('Could not check for app updates', error);
            });
    }
    //#endregion
}
Massimiliano Oreto
  • 57
  • 10

1 Answers1

1

@angular/pwa contains a service worker that caches your entire angular app. To have it updated you must:

  1. update your ngsw-config.json by adding a "version": 1, field at root level. Increment the version on each deploy.
  2. Call upon SwUpdate:

Code sample:

constructor(private swUpdate: SwUpdate) {
  //#region Check for updates
  if (this.swUpdate.isEnabled) {
    this.swUpdate.activated.subscribe((upd) => {
      window.location.reload();
    });
    this.swUpdate.available.subscribe((upd) => {
      this.swUpdate.activateUpdate();
    }, (error) => {
      console.error(error);
    });
    this.swUpdate.checkForUpdate().then(() => {
    }).catch((error) => {
      console.error('Could not check for app updates', error);
    });
  }
  //#endregion
}

I've experienced that it's not always necessary to increment the version on each new deploy, but I do it anyway.

Here's my ngsw-config.json

Pieterjan
  • 2,738
  • 4
  • 28
  • 55
  • Thank you i will test it immediately. I have tried this solution without success but i haven't added "version": 1 at root level. The Code Sample you write here must be placed on constructor ofa App.component.cs , correct? – Massimiliano Oreto Oct 08 '21 at 10:25
  • Yes, I've put it in the AppComponent – Pieterjan Oct 08 '21 at 10:29
  • Thank you , it seem's that work but i have a question. I open the ngsw.json that i load after deploy and in this file ther's no reference to versione. Instead i see ther's configVersion. – Massimiliano Oreto Oct 08 '21 at 16:50
  • Nothing, i close and then reopen the app and the tab is disabled again... I fixed the message on the top with my code – Massimiliano Oreto Oct 08 '21 at 16:59