Intro to Progressive Web Apps in Angular

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:

• Responsive - it should look good on any form-factor
• Progressive - utilizes latest browser features, but still usable on older browsers
• Offline usability - deliver a working experience, regardless of network connectivity
• Discoverability - a manifest “registers” the application, allowing search engines to index them as such
• Installability - the web app can be “installed” on a device, giving users a similar experience to using a native app

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.

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.

Auditing your Application via Lighthouse

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.

Chrome Lighthouse Audits in Developer Tools

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.

Make Your Angular Application a PWA

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 theAngular 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!

Further Detail

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

• angular.json was modified to include the serviceWorker: true property to the build configuration, as well as specifying src/manifest.webmanifest be included as a build asset.
• manifest.webmanifest is the Web Manifest file associated with the app, which defines things like theme colors and app icons.
• A couple of new packages were added to your package.json .
• index.html was updated to include references to the Web Manifest, set a default theme color, and specify a simple operative message to display if the user’s browser can’t run JavaScript.
• Several default icons of varying resolutions were added to the project. These are the familiar Angular shield logo - be sure to replace these with your actual website’s icon design before going to production.
• Your bootstrapped AppModule was modified to import the ServiceWorkerModule , which registers the Service Worker that does all the heavy lifting to make the app a PWA.
• You got a new file at the root of the project called ngsw-config.json , which, as it’s name indicates, is a configuration file for the Angular service worker. This configuration file allows you to define things like what static assets and data URLs (for example, the response from an API call) you’d like to be cached, and how.

Things to note

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.

Further Reading

• Angular Service Workers documentation
• Web App Manifest documentation
• PWA Checklist
• http-server npm package