How To Make a PWA with Angular Right Now (Easy Tutorial)


Have you heard about the progressive web app success stories out there?

Starbucks, for example, was able to reduce the size of their app by 99.84% when they switched from their iOS app to a PWA. You can read a detailed case study here.

And Pinterest leapfrogged their ad revenue by 44%.

Not to mention other important brands Spotify, Uber, Twitter and others that have created their own success with progressive web apps.

cool-dog

But even with these tantalizing success stories I still run across companies that are using Angular but haven't converted their Angular app to a PWA - even when it only takes 5 minutes or less. 😲

For example, I recently did some Angular performance consulting for a startup based in Denmark named Relion. They were experiencing runtime performance issues and called me in to help them out. At one point I casually mentioned considering a PWA to improve their load-time performance and was surprised to discover they didn't know much about Angular's progressive web app features.

what

So...

Today we're going to discuss using Angular service workers to create a PWA (progressive web app).

Ready?

Let's dive in and begin by looking at the advantages.

What are the advantages of a PWA?

Here's a few of the advantages you'll get by converting your Angular application into a progressive web app.

  • Insane load-speed performance (when done right).
  • A native-like app that can be accessed via a mobile browser or Google Play Store (and Apple Store if you know how to do it).
  • App store independence.
  • Capable of operating offline (thanks to service workers).
  • The ability to send push notifications via the service worker.
  • Have a custom splash screen (also known as an app shell in Angular)
  • An awesome SEO score - As fast and responsive web page, PWAs have an average SEO score of 85.
  • Smaller file size (Native apps tend to require more data to download then a PWA).
  • Painless updates (the service worker will automatically update the app in the background without requiring the user to do anything).

What are the disadvantages of a PWA?

Disadvantages?

To be quite frank, there are very few disadvantages that I know of.

The largest disadvantage I'm aware of is that the Apple Store policy can make it difficult for developers to deploy their progressive web app as an app.

“Your app should include features, content, and UI that elevate it beyond a repackaged website. If your app is not particularly useful, unique, or “app-like,” it does not belong on the App Store.”

  • Apple App Store

Another disadvantage to remember is that your Angular PWA won't be able to access all the features of a device like Bluetooth, NFC and other device features.

If you know of any other outstanding disadvantages then please send me a note.

How to convert your Angular app into a PWA?

The first step is to use the Angular CLI to install the @angular/pwa package.

With this one command you'll convert your Angular app into a progressive web app.

ng add @angular/pwa

It used to take experts hours or even days to create a PWA - and now a 3-year old shaver can install this before you stop him.

So what just happened?

what

The @angular/pwa package is an Angular schematics that adds Progressive Web App support to an Angular app. In a nutshell, here's a few things it does that you should be aware of:

  • Automatically imports and registers the service worker in the app module.
  • Updates index.html to include the manifest.json file which has details about the progress web application.
  • Creates the icon files to support the PWA. These are place in the src/assets/icons folder and should be updated with the apps icon for branding purposes.
  • Creates src/ngsw-config.json. This file is used to configure the service worker.

And that is how to convert your Angular app into a PWA.

If you have questions about how to configure the caching behavior then check out this page on the Angular docs.

How does an Angular PWA work?

In case you're struggling to understand what all is happening, let me take a few moments to explain.

First of all, a progressive web app is nothing more then a glorified web page that uses a service worker to cache assets and data for offline usage or faster load speeds.

What we've just done is used the @angular/pwa schematics package to create a service worker that will cache whatever we configure it to cache. By default, the service worker will automatically cache the following files.

  • index.html
  • favicon.ico
  • All of the build artifacts (JavaScript and CSS bundles).
  • Any files located in the assets folder.
  • Images and fonts directly under the configured outputPath or resourcesOutputPath.

Now, when we deploy our Angular app the service worker will be deployed with it and will cache the assets above. Next time the user loads your web app, it will load much much faster because your CSS, JavaScript and other assets have been cached by the service worker.

And it gets better.

When you deploy a new version the service worker will detect those changes and silently update the cache in the background so that next time your app is reloaded the user will be running the latest version.

If you want to subscribe to those updates and prompt the user to reload after the cache has been updated, then here's how it's done.

import { Component, OnInit } from '@angular/core';
import { SwUpdate } from '@angular/service-worker';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{

  constructor( private swUpdate: SwUpdate) {}

    ngOnInit() {
      if (this.swUpdate.isEnabled) {
        this.swUpdate.available.subscribe(() => {
          if(confirm("You're using an old version of the control panel. Want to update?")) {
            window.location.reload();
          }
        });
      }
    }
}

You're done!

And now I'd like to hear from you:

Do you plan to convert your Angular project into a progressive web app?

Or maybe you don't think it's worth it?

Let me know.

signature