Visuals by Caroline Maltais. Thanks Caro!

Turn your Angular App into a PWA in 4 Easy Steps

You’ve coded an application in Angular and now you want to turn it into a Progressive Web App? No problem! PWAs are a nice way to make regular web applications act like native apps on Android, Windows, Chrome OS, and more…

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.

If you’re already using the official CLI, then you’re good to go. If not, I highly recommend you use it. Seriously there are so many good reasons to do so!

Step 2: Add necessary packages

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

ng add @angular/pwa --project yourProject

Note: the project part is necessary if you have a multi project setup

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.

Notice how it’s already pre-filled. Feel free to change or add members to customize your PWA. If you change the theme-color value, don’t forget to change it in your index.html file as well!

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:

• short_name or name
• display
• start_url
• icons

You also need to serve your app over https. For more details check out this guide from Google.

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!

For all details on how to configure your service worker, check out the official documentation on the Angular website.

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();
      }
    });
  }
}

Basically, this is the simplest way to do it. The Service Worker service supports 2 events: available and activated. What we need here is to see if an update is available. When it is, the service worker will download the updated app (or at least the files you set to prefetch earlier.

Once the files are downloaded, the available event will fire. You can then ask your users if they wish to reload the page to get the latest update or decide to display an update button in your layout. If they don’t update right away, don’t worry, they’ll automatically get the updated app on the next visit.

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!

Right now, if Chrome detects that your app has all the requirements needed for installation, it will ask the user if he/she wants to add the app to their home screen. The problem is that if the user declines, that suggestion won’t appear again until 3 months have passed.

Starting in Chrome 68, Chrome will fire the beforeinstallprompt event every time the user visits your app (but won’t necessarily suggest to install). You can catch this event to create a custom install button.

First you need to know that the event fires only once, and pretty quickly! You’ll want to listen to it as soon as you can. Let’s add this in the constructor our PwaService we created earlier:

window.addEventListener('beforeinstallprompt', event => {
  this.promptEvent = event;
});

If the event fires, we keep it in the service. We can then check if installation is possible like so:

<button *ngIf="Pwa.promptEvent" (click)="installPwa()">
  Install
</button>

And in the component:

constructor(public Pwa: PwaService) {}
installPwa(): void {
  this.Pwa.promptEvent.prompt();
}

Clicking on the button will show the user the browser’s dialog for adding the app to the home screen.

You’re good to go!

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

If you’ve been through this process before of have made a PWA on your own and want to share some advice, feel free to comment down below.

Keep coding!