Real World App - Part 21: Service Workers (PWA) with Angular

Akshay Nihalaney

Follow

Published in

Real World Full Stack

5 min readJul 16, 2018

--

Service workers in Progressive Web Apps (PWA) with Angular

This is Part 21 of our Real World App series. For other parts, see links at the bottom of this post or go to https://blog.realworldfullstack.io/. The app is currently under development and can be viewed at https://bitwiser.io and the github repo can be found here.

Recap

In Part 20 of the series, we upgraded our app to Angular 6. In this part we’ll implement service workers to make our app a Progressive Web App. Final code for this part here.

What are Progressive Web Apps?

Progressive Web Apps (PWA) are apps built using a series of web technologies, patterns and APIs that allow a web application to appear like a native mobile app. For more details see - https://developer.mozilla.org/en-US/Apps/Progressive/Introduction

Service Workers

Service workers are an essential element of a PWA.

A service worker is type of a web worker (executes script in a background thread separate from the main execution thread of a web application) that intercepts network requests, and can cache or retrieve resources from the cache. Service workers also allow delivering push notifications to the browser.

Manifest file

The web app manifest provides information about an application (such as its name, author, icon, and description) in a JSON text file. The manifest informs details for websites installed on the homescreen of a device, providing users with quicker access and a richer experience. In addition, Chrome on Android will proactively suggest that the user install the web app, via a web app install banner.

For benefits of PWA and details of service worker architecture check the links in the references section.

Service Workers in Angular

Angular ships with service worker implementation since version 5. The cli makes adding service worker to your project really easy -

ng add  @angular/pwa --project trivia

The above command does the following:

Adds the @angular/service-worker package to your project.
Enables service worker build support in the CLI.
Imports and registers the service worker in the app module.
Updates the index.html file:

Includes a link to add the manifest.json file.
Adds meta tags for theme-color.

5. Installs icon files to support the installed Progressive Web App (PWA).

6. Creates the service worker configuration file called ngsw-config.json, which specifies the caching behaviors and other settings.

You can see the changes in github.

manifest.json file

A manifest.json file is created with name, icons and other settings. We can change this file as create new icons for our app as needed.

Service worker configuration

The ngsw-config.json provides the configuration for service worker. It specifies the caching behavior of various assets used in the application with wild cards. When the app is built by the cli with prod flag, it will use this config and use this to generate ngsw.json file with names of each file it finds matching these wild cards. This json file is used as the run time configuration by the ngsw-worker.js

Debugging with Chrome dev tools

Once deployed with prod flag enabled, you can test the service worker in using Application tab in the Chrome dev tools.

You can see how the static assets are cached in Cache Storage. You can also try to take your app Offline and reload to see how the app behaves when the assets are cached.

You can also look at the manifest in Chrome dev tools -

Testing with Chrome on Android

When you test the app on Android using a Chrome browser, you‘ll see that Chrome prompts you to “Add to Home Screen”

Summary

Angular provides an easy way to add service worker and PWA to our application. In addition to the option of adding to home screen on mobile, service workers provide several benefits such as caching for performance and offline support, push notifications, etc. We’ll also look at lighthouse plugin as a tool for testing our PWA.

In later parts we will revisit service workers and see how we can add push notifications and measure performance improvements and smoothen out the offline support. Complete code for this part, which also includes bug fixes and other minor enhancements here.

Next Up

In Part 9, we introduced unit testing, but I haven’t been able to keep the tests up to date. In the next part, I’ll start adding these back and also start with some end-to-end test cases.

If you enjoyed this article please recommend and share and feel free to provide your feedback on the comments section.

Real World App Series (quick links) :

Series summary and index: Part X