Angular › Progressive Web Apps (PWA) with Angular

How would you notify users when a new version of your Angular PWA is available and prompt them to refresh?

Advanced

Answer

Angular's SwUpdate service lets you subscribe to version update events, detecting when the service worker has downloaded a new version of the app in the background, letting you show a friendly notification prompting the user to reload and get the latest version.

import { SwUpdate } from '@angular/service-worker';

constructor(private swUpdate: SwUpdate) {
  this.swUpdate.versionUpdates.subscribe((event) => {
    if (event.type === 'VERSION_READY') {
      if (confirm('A new version is available, reload now?')) {
        window.location.reload();
      }
    }
  });
}

Real-world example A news app shows a small banner asking users to refresh whenever a new version has finished downloading in the background, ensuring readers eventually see the latest articles and fixes without an abrupt, unexpected reload.

Common follow-ups: What happens to users who never manually refresh after seeing this prompt?;How would you automatically reload the app after a certain period instead of waiting for user action?

Build Environments & Deployment;RxJS & Observables