What is the best way to retrieve the version hash of the current Angular PWA?

Question

What is the best way to retrieve the version hash of the current Angular PWA?

Is there a way to retrieve the currently active hash of my Angular PWA without waiting for an event trigger?

While the SwUpdate object offers observables for accessing the hash when a new version is activated or becomes available, it does not seem to provide a method for getting the hash of the current version statically.

class SwUpdate {
  available: Observable<UpdateAvailableEvent>
  activated: Observable<UpdateActivatedEvent>
  unrecoverable: Observable<UnrecoverableStateEvent>
  isEnabled: boolean
  checkForUpdate(): Promise<void>
  activateUpdate(): Promise<void>
}

I am looking for something like SwUpdate.current to get the current hash value (e.g.

a518f9f1ab65954c2eafa02fec134fa54b391651

) without relying on an available or activated event. Is this feasible?

Addendum

Although I couldn't find a solution through official channels, I managed to address this issue by creating a custom hash version for the app during the CI build process. This was stored in a JSON file within the app and used as the app version's hash instead of the Angular-generated one. So far, this workaround has been effective.

angular typescript service-worker

Answer 1

Answer №1

To implement automatic updates in your Angular application, you can utilize the SwUpdate module from @angular/service-worker. A common way to do this is by checking for updates in the main component file, such as app.component.ts:

import { Component, OnInit } from '@angular/core';
import { SwUpdate } from '@angular/service-worker';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {

  constructor(private swUpdate: SwUpdate) {}

  checkForUpdate() {
    if (this.swUpdate.isEnabled) {
      this.swUpdate.available.subscribe((event) => {
        console.log('Update is available!');
        console.log('Current version: ' + event.current.hash);
        console.log('New available version: ' + event.available.hash);
      });
    }
  }

  ngOnInit() {
    this.checkForUpdate();
  }
}

Answer 2

To implement automatic updates in your Angular application, you can utilize the SwUpdate module from @angular/service-worker. A common way to do this is by checking for updates in the main component file, such as app.component.ts:

import { Component, OnInit } from '@angular/core';
import { SwUpdate } from '@angular/service-worker';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {

  constructor(private swUpdate: SwUpdate) {}

  checkForUpdate() {
    if (this.swUpdate.isEnabled) {
      this.swUpdate.available.subscribe((event) => {
        console.log('Update is available!');
        console.log('Current version: ' + event.current.hash);
        console.log('New available version: ' + event.available.hash);
      });
    }
  }

  ngOnInit() {
    this.checkForUpdate();
  }
}

Answer 3

Answer №2

I encountered a similar issue and was unable to locate a solution online. It puzzles me why Angular does not offer this information straightforwardly. Thus, I delved into experimentation until I stumbled upon a potential workaround. The application data and its versions are stored in the cache:

https://i.sstatic.net/2fNZ78tM.png

Specifically, the hash of the most recent saved version can be found at the /latest path, and it can be retrieved using this method:

caches.open('ngsw:/:db:control').then((cache) => {
  cache.match('/latest').then((res) => {
    res?.json().then((body) => {
      console.log(body.latest)
    }
  }
}

I also wanted to fetch the version date, so I examined the manifest of that version and transformed it into an observable using the "from" operator from rxjs to prevent it from resolving as a promise:


    import { from } from 'rxjs';

    getAppVersion() {
        return from(
          caches.open('ngsw:/:db:control').then((cache) => {
            return cache.match('/latest').then((resLts) => {
              return resLts?.json().then((bodyLts) => {
                return cache.match('/manifests').then((resManifests) => {
                  return resManifests?.json().then((manifests) => {
                    return {
                      hash: bodyLts.latest,
                      timestamp: manifests[bodyLts.latest].timestamp,
                    };
                  });
                });
              });
            });
          })
        );
      }

This is the extent of my progress, and while I am content with the outcome, there is an issue wherein the cache may not exist on the initial site load, resulting in no return value. Perhaps periodic queries could be implemented until the necessary information is obtained, but I am uncertain of its effectiveness.

Furthermore, there is a concern that this solution may only be temporary since there is no official documentation in Angular indicating the permanence of these cache routes.

Despite the age of this question, I felt it was valuable to share in case it proves beneficial to others.

Answer 4

I encountered a similar issue and was unable to locate a solution online. It puzzles me why Angular does not offer this information straightforwardly. Thus, I delved into experimentation until I stumbled upon a potential workaround. The application data and its versions are stored in the cache:

https://i.sstatic.net/2fNZ78tM.png

Specifically, the hash of the most recent saved version can be found at the /latest path, and it can be retrieved using this method:

caches.open('ngsw:/:db:control').then((cache) => {
  cache.match('/latest').then((res) => {
    res?.json().then((body) => {
      console.log(body.latest)
    }
  }
}

I also wanted to fetch the version date, so I examined the manifest of that version and transformed it into an observable using the "from" operator from rxjs to prevent it from resolving as a promise:


    import { from } from 'rxjs';

    getAppVersion() {
        return from(
          caches.open('ngsw:/:db:control').then((cache) => {
            return cache.match('/latest').then((resLts) => {
              return resLts?.json().then((bodyLts) => {
                return cache.match('/manifests').then((resManifests) => {
                  return resManifests?.json().then((manifests) => {
                    return {
                      hash: bodyLts.latest,
                      timestamp: manifests[bodyLts.latest].timestamp,
                    };
                  });
                });
              });
            });
          })
        );
      }

This is the extent of my progress, and while I am content with the outcome, there is an issue wherein the cache may not exist on the initial site load, resulting in no return value. Perhaps periodic queries could be implemented until the necessary information is obtained, but I am uncertain of its effectiveness.

Furthermore, there is a concern that this solution may only be temporary since there is no official documentation in Angular indicating the permanence of these cache routes.

Despite the age of this question, I felt it was valuable to share in case it proves beneficial to others.

What is the best way to retrieve the version hash of the current Angular PWA?

Addendum

Answer №1

Answer №2

Similar questions

Customize the theme type with @mui/system

Angular, Bootstrap, and the magic of routing

The nest build process encounters errors related to TypeScript in the @nestjs/config package, causing it

Finding the specific type within a union based on its field type

What is the best way to create a type that can accept either a string or a

Incorporating items into a mat-tab-group component

Stars not functioning in Firefox for CSS Angular2 ng2-rating component

Issue with creating a new component in Angular cli

Webpack is mistakenly looking in the incorrect subfolder when attempting a relative import

How to limit character input in a Div using Angular 2

Implementing routing for page navigation within an angular tree structure

What is the best way to swap out the if else statement with a Ternary operator within a JavaScript function?

Efficiently Updating Property Values in Objects Using TypeScript and Loops

Encounter problem following transition from Angular 7 to Angular 8 upgrade

Angular's error notification system seems to be lacking in providing accurate

Guide on implementing Bootstrap tooltips using Bootstrap's Content Delivery Network in Angular

Utilizing NgRx 8 Actions in Conjunction with NgRx 7 Reducers: An Implementation

What is the syntax for creating a function with parameters of type `any` or `void` in TypeScript?

Issue with TypeScript: The JSX element 'MultiSelect' lacks any construct or call signatures

Attempting to categorize JSON object elements into separate arrays dynamically depending on their values

What is the best way to retrieve the version hash of the current Angular PWA?

Addendum

Answer №1

Answer №2

Similar questions

Customize the theme type with @mui/system

Angular, Bootstrap, and the magic of routing

The nest build process encounters errors related to TypeScript in the @nestjs/config package, causing it

Finding the specific type within a union based on its field type

What is the best way to create a type that can accept either a string or a

Incorporating items into a mat-tab-group component

Stars not functioning in Firefox for CSS Angular2 ng2-rating component

Issue with creating a new component in Angular cli

Webpack is mistakenly looking in the incorrect subfolder when attempting a relative import

How to limit character input in a Div using Angular 2

Implementing routing for page navigation within an angular tree structure

What is the best way to swap out the if else statement with a Ternary operator within a JavaScript function?

Efficiently Updating Property Values in Objects Using TypeScript and Loops

Encounter problem following transition from Angular 7 to Angular 8 upgrade

Angular's error notification system seems to be lacking in providing accurate

Guide on implementing Bootstrap tooltips using Bootstrap's *Content Delivery Network* in Angular

Utilizing NgRx 8 Actions in Conjunction with NgRx 7 Reducers: An Implementation

What is the syntax for creating a function with parameters of type `any` or `void` in TypeScript?

Issue with TypeScript: The JSX element 'MultiSelect' lacks any construct or call signatures

Attempting to categorize JSON object elements into separate arrays dynamically depending on their values

Guide on implementing Bootstrap tooltips using Bootstrap's Content Delivery Network in Angular