More than just a buzzword, a Progressive Web App, or PWA, is a set of guidelines to utilize modern browser features in a way that creates a more app-like user experience. We won’t go into all the details that make an application a PWA, because it all sort of depends on who you ask. Some common concepts include:

In short, the ultimate goal behind a Progressive Web App is to deliver a fast, familiar, and optimized user experience, regardless of network connectivity, leveraging the latest browser features as they are available.

🐊 Alligator.io recommends ⤵

These all sound like great things - and they are - but how can we know how well our application adheres to the principles of a PWA?

If you are reading this, I will assume you are a web developer. And if you are a web developer, I will assume you also have Google Chrome installed. If you don’t have Chrome installed, go get it now, and come back to this article in Chrome.

While you are on this page in Chrome, open Developer Tools (F12 on the keyboard). Flip over to the “Audits” tab. Depending on the version of Chrome (73.0.3683.103 at the time of writing), you’ll see a few different features to run audits against. Choose “Desktop” for the device, and select only “Progressive Web App” from the “Audits” list.

Click “Run audits” and wait a few seconds to see how well Alligator.io does as a PWA!

You can run the Lighthouse audit tool on any page to see how well they implement the aspects of a Progressive Web App.

Let’s go ahead and create a sample Angular application and see how easy it is to convert it to a PWA.

From a terminal, with the Angular CLI installed globally, run the following command:

$ ng new pwa-example 

This just sets up a default, out-of-the-box, “Hello World” Angular application. Alternatively, generate a new project with any properties you like, or run the next command in an existing Angular project.

Change directories to your new project folder, and run this command:

$ ng add @angular/pwa && ng build --prod 

…and just like that, your Angular application is a production-ready PWA!

Let’s take a little bit of a deeper look to see what just happened. Some important changes that occurred:

If you try to run your application locally via ng serve, you won’t notice any PWA features. Angular Service Workers are enabled only on production builds, so in order to test these changes locally, you’ll need another strategy to serve your build. One option is to use something like the npm package http-server, and point it to the dist/ folder. When it’s running, you should see a fully-functional PWA.

However - if you were to open up a port to your new local web server, and try to visit it from another computer, the Service Worker would no longer work for you. This is because Service Workers will only work over the HTTPS protocol, or on localhost, for development purposes.

One great benefit of a PWA-enabled application is it’s ability to check for and install updates in the background, thanks to the Web Manifest file. However, the updates can’t be applied until the application tab is refreshed, or the user closes all tabs the application is running in, and reopens an application tab. It may be prudent to include an instructional message to the user when a new update has been applied.

We’ve only just scratched the surface of what PWAs are and what Service Workers can do for your Angular app. Take a look below to learn more.