A Progressive Web App (or PWA) is a web application that provides a set of capabilities to give web sites an app-like experience. Personally, I always feel too many websites create native apps that provide next to no (or even less) additional functionality to their website except being able to have a shortcut. This is where PWAs can play a crucial role. Since Chrome 72 for Android, the Trusted Web Activity feature was shipped, meaning PWAs can be distributed in the Google Play Store, showing that this is an important development.

When building websites, developers have to face several challenges. Internet speed is not as fast everywhere in the world as you may be used to yourself. A website should be performant, so a user doesn’t have to wait when interacting with the website. It also turns out that users don’t often install native apps, simply because the threshold is too high. These challenges are all addressed with a PWA.

PWAs are fast because the app is installed, either through a manual install or through the service worker on the device. Data is cached and we can update the app when there are new changes. PWA’s behave like native apps, which means they can give more seamless and integrated experiences while also providing the benefits of native apps like push notifications. Because of the caching strategies they can paint a picture on a user’s screen when there’s no network. This makes them more reliable.

There are plenty of articles showing how to start a new Angular PWA application, so we’ll focus on upgrading an existing application. For this we’ll be using AngularCLI and Angular 7, since those are all the tools we need. The assumption is that you as reader already have a decent idea about what a service worker is.

Edit: the Github repository belonging to this article has been upgraded to Angular version 9.1.0 which you can use to kickstart your project.