Get started with making your Angular web app offline-capable
Tags: angular, frontend, pwa
Published: 2020-02-07 04:45:20

---
title: Get started with making your Angular web app offline-capable
published: true
description: Integrate service worker in your Angular project
tags: #angular #frontend #pwa
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/hcdg3cjjlm93vzm3zpw4.jpg
---

## Introduction

With the advancement of web technologies, there is a need for web applications to take advantage of new modern features that have been added in the browser in order to enhance the user experience. This concept is particularly known as progressive enhancement.

One of those requirements is the ability to enable web applications to work reliably across various network connections. This means that a web application is able to display some data even when there's no network access.

In this tutorial, we are going to through the minimum requirements to make an Angular web application offline capable. To enable this feature, we are going to make use of a **service worker**. A _service worker_ is a __*script that acts as a network proxy by intercepting HTTP requests and usually runs in the background*__. A service worker can be used to cache static and dynamic files. It can also be used to provide fallback content when a network request fails.

### Project Setup

To get started, we are going to use an already created Angular application. The web application displays a countries' information and enables one to filter a country by its region. You can view the live site from this URL: https://countries-info.netlify.com/.

Head to this URL, https://github.com/khwilo/countries-info and fork the repository. Once you have forked the repository switch to the branch offline-support-start. 

```bash
git checkout offline-support-start
```

### Set up Angular Service Worker

To enable the use of a service worker, install the angular service worker package. On your terminal execute the following command:

```bash
ng add @angular/pwa
```

This command performs the following operations:

1. Installs **@angular/pwa** and **@angular/service-worker** packages
2. Generates the application icons to be used when you decide to add the application to the home screen.
3. Creates a manifest file that is used for making the application installable. The generated file is named as **manifest.webmanifest**.
4. Creates the service worker configuration file. The file is named as **ngsw-config.json** This file defines resources to be stored in the cache.
5. On the _index.html_ file, a reference to the manifest file and the application theme color is added.
6. The manifest file is added to the assets array in the **angular.json** file.
7. The **ServiceWorkerModule** is imported in the _app.module.ts_ file. You'll notice that a service worker is registered but the reference to the file cannot be found yet. The file can be found in the dist folder when you build the application for production as __ngsw-worker.js__.

In the web application manifest file (_manifest.webmanifest_) file change the application name and short name to your desired values. In this case, I used the following values:

```json
{
  "name": "Display info about a country",
  "short_name": "CountryInfo",
  ...
}
```

### Test the application

To test the application if the service worker works, we are going to use a separate HTTP server to serve the application. Using _ng serve_ with service workers does not work. For this reason, use another server. In this context, we are going to use __http-server__. 

- To install http-server, execute the following command on your terminal window:

```bash
npm install http-server --save
```

- Build the project for production using this command:

```bash
ng build --prod
```

- On your _package.json_ file, write a script command to start the application. Add the following script command to this:

```json
{
  ...
  "scripts": {
    ...
    "startPWA": "http-server -p 8080 -c-1 dist/countries-info"
    ...
  }
}
```

The above command configures the port number to 8080, disables caching and serves the files from the dist folder.

To start the application, run this command on your terminal window:

```bash
npm run startPWA
```

Now, you can visit the URL http://localhost:8080 on your Google Chrome browser. To check if the service worker has been installed, open the developer tools on the browser by using the command `CTRL` + `SHIFT` + `I` on your PC, and open the _Application_ tab. Select the _Service Workers_ tab from the sidebar to see if the service worker has been installed. You can simulate offline mode by clicking on the offline checkbox and reload the page.

When the application is online it appears as follows:


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wki17h3wteit1rieogz9.png)

While offline, this is what is displayed:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6fr3fby2ago23gj6bq20.png)

You'll notice that while the network is not available (when offline), the application still displays a minimal UI instead of the custom error display page from the browser. The reason for this is that some files are set to be cached by default in the service worker configuration file. When you view the __ngsw-config.json__ file, you can see that the following types of files are set to be cached:

1. _/favicon.ico_ - Favicon image
2. _/index.html_ - index.html file
3. _/manifest.webmanifest_ - the application web manifest
4. _/*.css_ - CSS files
5. _/*.js_ - JavaScript files
6. _/assets/**_ - Files under assets directory
7. Static images and fonts

One thing to keep in mind is that only static files are being cached. Dynamic files such as fonts and data from the network are not being cached yet. You can inspect this behavior from the network tab of your chrome developer tools:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7352k9e9l93pxntyxmn8.png)

On the size column, you can view the files which are being intercepted by the service worker and being loaded from the cache.

Now the application can still display some data when offline. In a separate article, I am going to demonstrate how to create a custom service worker file and add dynamic caching.

### Conclusion

Thank you for your time. For any queries, do not hesitate to ask.