Get started with making your Angular web app offline-capable

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.

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:

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:

{
  "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:

npm install http-server --save

• Build the project for production using this command:

ng build --prod

• On your package.json file, write a script command to start the application. Add the following script command to this:

{
  ...
  "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:

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:

While offline, this is what is displayed:

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:

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.