These days there is a lot of hype around creating progressive web apps (PWA) and how the adaption of the PWA technologies can make apps behave like native apps, all with just using the browser API.

First things first: what is a PWA?

A PWA is an app that progresses the traditional web boundaries by eg, enabling the user to use the app even if offline, interact with hardware directly from the browser, push notifications and native-like user experience and performance. The reason there is so much hype about this term is because this is a game changer for web apps, making them able to replace apps that previously only could work natively, only using the browser! We might see heavy desktop apps like Photoshop running as a web app in the future, especially as web assembly becomes more mature.

The foundational building blocks of a PWA

PWA has certain foundational building blocks you should be aware of.

The manifest.json file

The manifest file specifies information about the app, which is used for installing the app to the home screen, without getting it from an app store. This file specifies the app name, start URL, colors and icons among other. For a full list of options check the documentation.

Service Workers

A service worker is a javascript script the browser runs in the background enabling push notifications, background sync and offline availability of your app. A service worker gets installed on your website, which will make the browser run these scripts in the background, regardless of whether you are browsing the website or not.

A service worker is installed by registering a javascript file, which contains hooks into certain events. Using Chrome Devtools you can watch your installed Service workers like this:

This should give you an overview of what service workers are. We don’t need to actually implement service workers ourselves in this guide, because Angular has some neat tooling to do this for us on a higher abstraction level.

How to implement a PWA with Angular

Angular CLI and the @angular/pwa library makes the process of setting up a PWA really easy. What installing the @angular/pwa library would do is making the app offline accessible by caching all app files using service workers. This is done easily because Angular creates a ngsw-config.json file, which acts as an abstraction of service worker scripts. The configuration of this file will be compiled to a service worker script.

Step 1: Create a new Angular CLI project

First, we are gonna create a new Angular project using.

Make sure to update Angular Cli first:

npm i -g @angular/cli

And then create a new Angular project:

ng new pwa-demo

This will create a new project called pwa-demo.

Step 2: Install the @angular/pwa library

Now we are gonna add the @angular/pwa library to the project with:

npm i @angular/pwa@next

Note: at the time of writing this is fairly new and I’m using the next version here for having the most developed version as none of the current version are considered stable.

Installing this library you may notice it added a bunch of other stuff to your project:

1. Added two new files: manifest.json and ngsw-config.json.ngsw-config.json in the root of project and manifest.json in assets
2. 1. The ngsw-config file is setup to cache all our files and make them offline available. This is where you configure service worker scripts.
3. Added serviceWorker: true in angular.json
4. Fetches manifest.json from index.html using link tag as well as adds a theme-color meta tag.
5. Imports ServiceWorkerModule in app.module
6. Adds app icons to the assets folder in different sizes, used when installing the app on phones

Step 3: Run your offline available app

For running the app you can first build the app with:

npm run build

For serving the app you can use http-serverwhich can be installed with:

npm i -g http-server

Then open the terminal in the build location and run the app with:

http-server

You should now see the default Angular app but if you open dev tools and you make the app offline and refresh you will see, that the app is offline available. By going to the network tab you can see that the files are getting fetched from service worker:

Step 4: Add an install button

For installing the app locally you can add an install button like this:

Which triggers:

Build the app again and serve it with http-server.

Now find your computer IP and browse the site by going to *computer ip*:port on your phone.

You should now see an install button and be able to install the app on your phone.

Conclusion

In this post we discussed the usage of PWAs and saw how to create a PWA with Angular. The @angular/pwa library easily made the app offline available and we added further PWA features such as native installation button.