custom PWA version management

Question

Is is possible to get the onload event for the pwa application in general. I meant we had implemented the a custom versioning logic in-order to keep the app version based on database field.(ie clearing the service worker cache). The issues here is the logic almost works but when ever a new version is updated in the database, then we need to clear the cache of the respective browser in-order to trigger the update. On more investigation I found that when once the pwa app is opened, it is keeping the some sort of cache image, on reopening the pwa app again won't trigger the start-up code of the app, but load app from cache.

So is it possible to get an onload sort of event for pwa ?

For testing purpose I added some alert() in the app component, but didn't fired, on reopening a pwa app

this.httpService.GetAppVersion(ver).subscribe(
        res => {
          if (res != null || res !== undefined) {
            this.version = res.versionNumber;
            ver = localStorage.getItem("appVersion");
            if (ver === null || ver === undefined) {
              localStorage.setItem("appVersion", "1.0");
              ver = "1.0";
            }

            let localVersion = ver.split(".");
            let incomingVersion = this.version.split(".");
            let result = this.helperService.compareVersion(
              localVersion,
              incomingVersion
            );
            //alert("result : " + result);
            if (result === 1) {
              const snackBarRef = this.snackBar.open(
                "New version available. Load New Version?",
                "Yes",
                { duration: 50000000 }
              );
              snackBarRef.afterDismissed().subscribe(() => {
                console.log("The snack-bar was dismissed");
              });
              snackBarRef.onAction().subscribe(() => {
                localStorage.setItem("appVersion", this.version.toString());
                this.helperService.Update(); // which clears the cache
                setTimeout(() => {
                  window.location.reload(true);
                }, 500);
              });
            }
          }
        },
        error => {
          alert("http error" + JSON.stringify(error));
        }
      );

at least the code in the app component's constructor will execute every time when the app is reopened after closing.

Answer 1

See: How to display a "new version available" for a Progressive Web App

Answer 2

I know this question is very old, but what I'm doing now (and I'm trying to find a better approach because I don't really like this one) is storing the version on the service worker code.

Then, when the window.onload fires, the main JavaScript code sends a message to the service worker (using postMessage()) and the service worker replies with the version number.

It's not exactly what you need, but it's an approximation.

Still, and as I said, I'm looking for a better, more maintenable approach. If I find one I'll post it here, just in case someone is searching for this (as I did).