Make an Angular app available in offline — Getting started with Service Workers in Angular

Photo by rawpixel.com from Pexels

Before going into Service workers, we should be familiar with the concept of Progressive Web App (PWA). Following is what MDN says a PWA is,

Progressive web apps use modern web APIs along with traditional progressive enhancement strategy to create cross-platform web applications. These apps work everywhere and provide several features that give them the same user experience advantages as native apps. This set of docs tells you all you need to know about them. (https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps)

In simpler terms, PWA is a web app that gives users an experience similar to mobile or desktop app.

So, One of the main characteristics of a mobile or desktop app is that it gives something for users even it’s offline or having a poor network connection. In this article, We’re giving that characteristic to our angular app so that it can give something to users event it’s offline.

To do that, we’re using Service Workers. It’s not something comes from Angular but JavaScript.

A Service worker is a JavaScript API which behaves like a client-side proxy which caches website contents and gives more control to the website developers to change its behavior

You can implement service workers to a native JavaScript app. But from Angular 5.0.0 version, they ship an implementation of service worker with Angular.

To demonstrate this, I created a simple web site with Angular 7 (I just changed the Angular starting template a bit). And served it with ng serve. Then used Chrome dev tools to demonstrate how it works when the browser has no internet connection. This can be done by using the offline checkbox in the Network tab of Chrome dev tools (it has options to simulate slow network connections also).

As you can see, it gives the ‘No internet’ screen ( the dinosaur game screen 🎮).

Using service workers, we can change this behavior.

Adding service workers to an existing Angular app is simple as running a single command,

ng add @angular/pwa

Executing above command would add required dependencies and do some configurations to your code.

One thing needs to keep in mind is that the service workers won’t work with ng serve command. They would only work in the production build. To do a production build run following command,

ng build --prod

It would build the Angular code and make a directory called dist/{project-name} in the project root and add index.html and other resource files to that directory. To host those files, we need to use an HTTP server. I’m using http-server (https://www.npmjs.com/package/http-server) which is an easy to use lightweight HTTP server. You can use any other HTTP server if you want.

To install http-server use following command,

npm install http-server -g

Then go to your project root directory and run following command (replace {project-name} with the actual project name),

http-server ./dist/{project-name} -c-1 -o

This would open a web browser with the Angular app (you may have to append /index.html at the end of the URL to get the website)

Then try checking the offline checkbox in dev tools and reload the webpage. It would load as normal even it’s offline. Surprise 🌟

You might wonder how this happens. Service worker cache content of the website for the first time it loads in the browser. Then if the site goes offline, service workers would serve the cached content.

When internet connection restored and if the user refreshes the website, Service workers would download any changes from the back-end and serve those changes on the next browser refresh.

This is just the first step of making a real PWA. Angular service workers have a lot more functionalities and configurations than this. In another article, I’ll explain more features in Angular service workers and methods of implementing a PWA. Till then, you can read more about Angular service workers in Angular official website (https://angular.io/guide/service-worker-intro)