[Angular] Service Worker Version Management

If our PWA application has a new version including some fixes and new features. By default, when you refresh your page, service worker will check ngsw.json file in dist folder to see whether any files updated, if yes, then service worker will download new assets. 

Then in the second reload, new version will be installed.

 

But if we want to tell users there is a new version in the first page load, we can do:

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

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

  snackBarRef: MatSnackBarRef<SimpleSnackBar>;
  constructor( private swUpdate: SwUpdate,
               public snackBar: MatSnackBar) {

  }

  ngOnInit() {
    // check that whether service worker is enabled or not
    if (this.swUpdate.isEnabled) {
      // if there is a new service worker version
      this.swUpdate.available.subscribe(() => {
        this.snackBarRef = this.snackBar.open('The new page is ready to update', 'Reload Page', {
          duration: 5000,
        });
      });

      // refresh the page
      this.snackBarRef.onAction().subscribe(() => {
        window.location.reload();
      });
    }
  }

}