Earlier this week, I wrote a post about optimizing your angular application using lazy loading. In this post, I will focus on Progressive Web Apps to further improve the performance and user experience.

Introduction

The main goal of Progressive Web Apps (PWAs) is to provide a reliable, fast and engaging experience to your users. This basically involves caching static resources of your web app on the browser or client device, while also utilizing a ServiceWorker to cache some requests based on predetermined rules.

Basically, a ServiceWorker acts like an edge Content Delivery Network (CDN) on the client browser with almost zero latency. For instance, if you are operating a blog – the content of the blog post rarely changes once written. Therefore, there is no need to fetch it each time the user requests it or loads the page. It would be better if you could cache the blog post and only check for changes maybe every hour. This results to a much more smoother and rich experience for your users.

If you are interested in learning more about the internals of PWAs, please visit this page. The beauty of PWAs is that they will still work as normal website in older browsers or browsers. But in newer browsers, the experience is further enhanced. Another advantage is that it is possible to package and submit your PWA to Microsoft Store (For windows 10 users) increasing your audience significantly. A good example of this is the Twitter PWA. As major players continue to support PWAs, the benefits are only going to increase.

Adding Support for PWAs to Your App

In Angular 6, adding support for PWA is almost too easy, thanks to Schematics support. With a single command, angular will download and install relevant libraries and setup the basics of PWAs and ServiceWorker. The command is:

ng add @angular/pwa

When you run the above command, a web app manifest (manifest.json) and an Angular ServiceWorker config (ngsw-config.json) files are created. A web app manifest is a set of instructions to the browser on how the web app should behave once installed by the user. While the Angular ServiceWorker config file specifies which files and URLs to cache and how they should be updated.

Service Worker Configurations

By default, the ServiceWorker looks like this:

{
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": ["/favicon.ico", "/index.html", "/_.css", "/_.js"]
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": ["/assets/**"]
      }
    }
  ]
}

This will cache the following resources: index.html, favicon.ico, CSS and JavaScript build artefacts and your assets under assets directory. You can add any extra JS and CSS files you have to this list. You can find a detailed description of the service worker configuration file here.

App Manifest JSON

On the other hand, the web app manifest looks like this by default:

{
  "name": "appname",
  "short_name": "appname",
  "theme_color": "#1976d2",
  "background_color": "#fafafa",
  "display": "standalone",
  "scope": "/",
  "start_url": "/",
  "icons": [
    {
      "src": "assets/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

The first thing you would want to do is replace the icons under icons with your own. Then, change your app name to your full app name and short name to the shortest name possible a visitor is familiar with. And finally change the theme color and background color to your web apps colors. You can leave the rest as they are. For a more detailed description of the manifest file, please learn more here. A few key things to note here:

1. Angular will only add the service worker to your app when you build with the production flag.
2. Due to security reasons, you need an SSL/TLS certificate to use a ServiceWorker on your website. This setting is enforced by the browser and there is nothing much you can do about it. For testing purpose, you can test a ServiceWorker on localhost without an SSL Certificate. On the positive side of things – you can easily get a Let’s Encrypt certificate for free here that works with any hosting.