Angular - Service worker not applying the updates immediately

Question

We are using Angular 8 with .NET Web API. Recently we made a major change on UI side, which impacted end users, because service worker is not applying the latest changes from server immediately. Latest updates are applied on end user browser only after refreshing the browser or reopening the browser in next tag.

But we want to refresh the browser immediately once the update is available. Under developer tools we can see Service worker is pulling the latest changes, but not applying immediately.

Below picture from my browser - Service Worker showing the update available in browser

We tried to create our own ngsw-serviceworker.js file, but after post deployment script we can't see our own file. Angular creating default ngsw-serviceworker.js from service worker package.

This is the piece of code we wrote for force refresh if any update is available. But no luck, even this code is applying only if browser if reopened.

version we used - "@angular/service-worker": "8.2.14", Angular 8.

Angular.json

"serviceWorker": true, "ngswConfigPath": "ngsw-config.json"

App.Component.ts: (below is the code we wrote in constructor)

  if (this.swUpdate) {
   this.swUpdate.available.subscribe((event) => {
    console.log(`current`, event.current, `available `, event.available);
    this.swUpdate.activateUpdate().then(() =>
    {
      location.reload();
    
    }
    ); 
  });

Can someone please help us to find the solution, to apply html/js/CSS changes on user browser from server or reload the browser immediately once the service worker update is available.

Our UI code is deployed on cloud, AWS.

Answer 1

You need to tell the service worker to check the server for updates, I usually use a service for this:

export class UpdateService {

  constructor(public updates: SwUpdate) {
    if (updates.isEnabled) {
      interval(6 * 60 * 60).subscribe(() => updates.checkForUpdate()
        .then(() => console.log('checking for updates')));
    }
  }

  public checkForUpdates(): void {
    this.updates.available.subscribe(event => this.promptUser());
  }

  private promptUser(): void {
    console.log('updating to new version');
    this.updates.activateUpdate().then(() => document.location.reload()); 
  }

In your app-component.ts:

  constructor(private sw: UpdateService) {
    // check the service worker for updates
    this.sw.checkForUpdates();
  }

For whatever reason, Angular sometimes does not register the service worker properly. So you can modify main.ts : Replace:

platformBrowserDynamic().bootstrapModule(AppModule);

With:

platformBrowserDynamic().bootstrapModule(AppModule).then(() => {
  if ('serviceWorker' in navigator && environment.production) {
    navigator.serviceWorker.register('ngsw-worker.js');
  }
}).catch(err => console.log(err));

Edit 2025

Service worker shall now be added as follow, directly inside the main.ts providers -> Read more

provideServiceWorker('ngsw-worker.js', {
  enabled: !isDevMode(),
  registrationStrategy: 'registerWhenStable:30000',
}),