Angular PWA Development

This post will be a brief tutorial on Angular PWA Development which demonstrates:

1. Generating PWA Application with Angular CLI (If you are new to PWA and Service Workers, you may need to start off here and here.
2. Adding an install button
3. Notifying for updates

Generating PWA with Angular CLI

1. Create your application ng n awesome-pwa
2. Add PWA Support ng add @angular/pwa --project awesome-pwa
3. Build your project ng build --prod (ng serve does not support service workers hence PWA. In order to test your Application’s PWA capabilities you should make a prod build and serve it with an http server)
4. Start http server http-server -p 8080 -c-1 dist/awesome-pwa

Now you can access your PWA at localhost:8080

Tip: When testing Angular service workers, it’s a good idea to use an incognito or private window in your browser to ensure the service worker doesn’t end up reading from a previous leftover state, which can cause unexpected behavior.

angular.io

One More Tip: If you want to see the PWA updates in action after making a change in the application, you should shutdown your http server, make a prod build then start it again. Once the server is up, open up the application with a new incognito tab. The change you’ve just made will be visible after a refresh to the page, because the initial load comes from the Service Worker’s cache. So user won’t be able to use the latest version without making a page refresh. Luckily there is a way to notify the user when there is an update available.

Testing with Lighthouse

Lighthouse is an open-source PWA analysis tool by Google. It is available as a browser extension and a CLI tool.

Lighthouse tests if your app:

– Can load in offline or flaky network conditions
– Is relatively fast
– Is served from a secure origin
– Uses certain accessibility best practices

developers.google.com

Testing those PWA aspects of your application at localhost is done by lighthouse cli.
First install lighthouse cli as a global module: npm install -g lighthouse
(If you are running an old version of Node, you may need to install one of the old lighthouse versions)
Then you can run the lighthouse analysis targeting your localhost: lighthouse http://localhost:8080/awesome-pwa
For more details about lighthouse you can take a look at here. After your analysis report you may want to optimize some aspects of your PWA, here is a guide.

Adding An Install Button

You make your application installable by adding pwa support. That means a compatible browser will fire beforeinstallprompt event when some conditions are met. If you handle the event properly you can let the browser prompt “Add To Home Screen” dialog. You can also stash the event and call it’s prompt method whenever you want to show the prompt to the user.

	public promptEvent;
	@HostListener('window:beforeinstallprompt', ['$event'])
	onbeforeinstallprompt(e) {
	e.preventDefault();
	this.promptEvent = e;
	}
	public installPWA() {
	this.promptEvent.prompt();
	}
	public shouldInstall(): boolean {
	return !this.isRunningStandalone() && this.promptEvent;
	}
	public isRunningStandalone(): boolean {
	return (window.matchMedia('(display-mode: standalone)').matches);
	}

view raw app.component.ts hosted with ❤ by GitHub

Notifying for Updates

Subscribe to the updates through SwUpdate from @angular/service-worker as shown below. If an update is available, user should know the page needs to be reloaded.

	public updateAvailable: boolean;
	constructor(private swUpdate: SwUpdate) {
	this.swUpdate.available.subscribe(evt => {
	this.updateAvailable = true;
	});
	}
	public reload() {
	this.swUpdate.activateUpdate().then(() => document.location.reload());
	}

view raw app.component.ts hosted with ❤ by GitHub

	<button *ngIf="shouldInstall()" class="install" (click)="installPWA()">Install as an application</button>
	<button *ngIf="updateAvailable" class="update" (click)="reload()">Update available. Click to refresh</button>

view raw app.component.html hosted with ❤ by GitHub

---

For the full source code: github/HalitTalha