Visuals by Caroline Maltais. Thanks Caro!

Turn your Angular App into a PWA in 4 Easy Steps

Etienne Talbot
Jul 16, 2018 · 5 min read

Step 1: Use Angular CLI

The easiest way to make your app a PWA is to start with Angular CLI. I won’t cover this step in details in this article but you can always refer to one of my previous articles: Speed Up Your Angular Application and Development with Angular CLI and Ahead of Time Compilation as well as the official documentation of the CLI.

Step 2: Add necessary packages

Run the following command to install everything that’s needed:

But what does it do?

  1. It adds serviceWorker: true in the production configuration.
  2. It creates two files at the root of the project: manifest.json and ngsw-config.json.
  3. It adds the manifest.json that was just created in the registered assets of the project.
  4. It adds two lines in the index.html: A <meta name=”theme-color”> tag (you’ll want to change its value) and a <link> tag pointing to the manifest.json file.
    Note: if you already had these tags in your index, it will not replace them. You’ll have to do it yourself.
  5. It imports the ServiceWorkerModule in your app (only in production). This is the service responsible for the automatic creation and use of a service worker. Look for this line in your app module:
    ServiceWorkerModule.register('/ngsw-worker.js', { enabled: environment.production })
    Note: if you are using a base-href in production, you’ll need to change the '/ngsw-worker.js' path to './ngsw-worker.js' to prevent a 404 error.
  6. It adds icons in your assets folder. You will of course need to change them if you don’t want your app to sport Angular logos as icons.

Step 3: Edit the manifest file

Every PWA should have a manifest file. Now that Angular CLI has created one for us, we need to edit it to fit our needs. Refer to this guide by MDN for the different possibilities.

Members you need to have

If you want your Angular App to be installable on home screens, these members must be present in your manifest file:

  • display
  • start_url
  • icons

Step 4: Edit the service worker config file

As mentioned above, ngsw-config.json has been created at the root of your project. In it you can specify which files to prefetch or lazy load when downloading a version of your PWA. You can create assetGroups with different configurations, decide if the service worker should prioritize freshness or performance… and much more!

Bonus Step 1: Noticing users about updates

This is totally optional, but if you need your users to run the most up-to-date version of your app, you can notify them when a new version is available. Let’s check it out:

import { Injectable } from '@angular/core';
import { SwUpdate } from '@angular/service-worker';
@Injectable()
export class PwaService {
constructor(private swUpdate: SwUpdate) {
swUpdate.available.subscribe(event => {
if (askUserToUpdate()) {
window.location.reload();
}
});
}
}

What’s going on behind the scenes

The service worker doesn’t check all the files that are served to see if a new version of a file exists. Instead it only checks ngsw-worker.js from time to time (on page load, during navigation, and after the app is back from a long idle state). If that file is different from the one it already has, it means a new version is available.

Bonus Step 2: Adding an Install button

You might want to help your users install your app to their phone. You can by adding an install button!

window.addEventListener('beforeinstallprompt', event => {
this.promptEvent = event;
});
<button *ngIf="Pwa.promptEvent" (click)="installPwa()">
Install
</button>
constructor(public Pwa: PwaService) {}installPwa(): void {
this.Pwa.promptEvent.prompt();
}

You’re good to go!

That’s it! Wasn’t that easy? Your Angular Application can now be installed and updated on your phone!

poka-techblog

Poka Tech Blog

Thanks to Maxime Leblanc and Marc-Alexandre Bérubé.

Etienne Talbot

Written by

Front-End Developer and Component Lead at Poka, in Quebec City, Canada. I like Angular, Typescript, a good scotch…

poka-techblog

Poka Tech Blog