CODEWITHSUNDEEP
angularionic-frameworkionic4progressive-web-apps
user2828442
user2828442

Reputation: 2515

PWA auto refresh / update client side on app update in Ionic 5

I have added the following code in my app.component.ts

constructor(private updates: SwUpdate,){

  {
    console.warn('check');
    this.updates.available.subscribe(event => {
        console.log('current version is', event.current);
        console.log('available version is', event.available);
        updates.activateUpdate().then(() => {
            console.warn('downloaded');
            document.location.reload();
        });
    });
    this.updates.activated.subscribe(event => {
        console.log('old version was', event.previous);
        console.log('new version is', event.current);
    });
}

I want to notify user when a new build is uploaded, and on clicking it, new build loads.

Do I need to write a service , store the version number in server and in local storage and keep checking for new version ?

Do I need to do anything else in app.component.ts ?

From where event.current, event.available values are coming ?

Edit 1

I don't see these messages in console even if I upload a new build

console.log('current version is', event.current);
console.log('available version is', event.available);

What is the reason for this?

Upvotes: 0

Views: 2622

Answers (2)

Eliran Eliassy
Eliran Eliassy

Reputation: 1600

Angular provides a way of checking if a new version available.

From the official docs:

@Injectable()
export class CheckForUpdateService {

  constructor(appRef: ApplicationRef, updates: SwUpdate) {
    // Allow the app to stabilize first, before starting polling for updates with `interval()`.
    const appIsStable$ = appRef.isStable.pipe(first(isStable => isStable === true));
    const everySixHours$ = interval(6 * 60 * 60 * 1000);
    const everySixHoursOnceAppIsStable$ = concat(appIsStable$, everySixHours$);

    everySixHoursOnceAppIsStable$.subscribe(() => updates.checkForUpdate());
  }
}

What's happening under the hood is that Angular contacting your static files server (or CDN) trying to get a new ngsw file.

Once there is one, your available observable will emit, and will you can create any sort of UX you want making your users:

 constructor(updates: SwUpdate) {
    updates.available.subscribe(event => {
      if (confirm('New version is available, do you want to reload to update?')) {
        updates.activateUpdate().then(() => document.location.reload());
      }
    });
  }

You can replace this confirm with any other UX you like.

Upvotes: 0

Pardeep Jain
Pardeep Jain

Reputation: 86740

From where event.current, event.available values are coming ?

Not sure but I believe it depends on the file versioning, in case a new chunk is available on the server-side or where the application is hosted then it will trigger the new version or new update and get captured in the event script you wrote.

How you update on click

Firstly you need to be sure that a newer version is available to download, if so then you can hold the instance of new download in variable and call on click action (like the example provided in official documentation for ATHS - Add to home screen), like below -

let appUpdate = updates.activateUpdate();

PS: haven't tested this but have to post as an answer as the content is lengthy for comment.

Upvotes: 1

Related Questions