Angular Performance (2), Caching - Service Worker

This series of articles will discuss Angular Performance issues.

• Angular Performance (1), Tuning
• Angular Performance (2), Caching --- Service Worker --- this article
• Angular Performance (3), Change Detection

This article will demonstrate the Caching issue --- Service Worker.

A - Introduction

For Angular Caching issue, a service worker is a script that runs in the web browser and manages caching for an application.

• A - Introduction
• B - Caching --- Service Worker
• C - Before Installing Service Worker
• D - Install Service Worker
• E - Install HTTP Server
• F - Run App with Service Worker
• G - Verify if a service worker is registered
• H - Summary

B - Caching --- Service Worker

The following introduction is from Angular - Angular service worker introduction.

Service workers augment the traditional web deployment model and empower applications to deliver a user experience with reliability and performance on par with code that is written to run on your operating system and hardware. Adding a service worker to an Angular application is one of the steps for turning an application into a Progressive Web App (also known as a PWA).

At its simplest, a service worker is a script that runs in the web browser and manages caching for an application.

Service workers function as a network proxy. They intercept all outgoing HTTP requests made by the application and can choose how to respond to them. For example, they can query a local cache and deliver a cached response if one is available. Proxying isn't limited to requests made through programmatic APIs, such as fetch; it also includes resources referenced in HTML and even the initial request to index.html. Service worker-based caching is thus completely programmable and doesn't rely on server-specified caching headers.

Unlike the other scripts that make up an application, such as the Angular application bundle, the service worker is preserved after the user closes the tab. The next time that browser loads the application, the service worker loads first, and can intercept every request for resources to load the application. If the service worker is designed to do so, it can completely satisfy the loading of the application, without the need for the network.

Even across a fast reliable network, round-trip delays can introduce significant latency when loading the application. Using a service worker to reduce dependency on the network can significantly improve the user experience.

C - Before Installing Service Worker

Note:

Below, until Run the App with Service Worker, the procedure we follow are mainly from 

• Angular - Getting started with service workers.

Simulating a network issue

To simulate a network issue, disable network interaction for your application.

In Chrome:

1. Select Tools > Developer Tools (from the Chrome menu located in the top right corner).
2. Go to the Network tab.
3. Select Offline in the Throttling dropdown menu.

Now the application has no access to network interaction.

For applications that do not use the Angular service worker, refreshing now would display Chrome's Internet disconnected page that says "There is no Internet connection".

D - Install Service Worker

We install the Service Worker by the command:

ng add @angular/pwa

The files are installed or changed are

• Changed:
  • app.module.ts
  • index.html
  • angular.json
  • package.json
  • package-lock.json
• New Created:
  • manifest.webmanifest
  • ngsw-config.json
  • assets\icons folder

The preceding command completes the following actions:

• Update app.module.ts file:
  1. Adds the @angular/service-worker package to your project.
  2. Enables service worker build support in the CLI.
  3. Imports and registers the service worker in the application module.

• Updates the index.html file:

  1. Includes a link to add the manifest.webmanifest file
  2. Adds a meta tag for theme-color

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

• Creates installed icons registered file, called: manifest.webmanifest

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

• Updates the angular.json file, under "build"

  1. Register file: manifest.webmanifest
  2. Register file:  ngsw-config.json
  3. Register Servuce Worker as true

• Updates the j.json file: the @angular/service-worker, 14.2.0 is added in dependencies

E - Install HTTP Server [http-server - npm (npmjs.com)]

http-server: a simple static HTTP server

http-server is a simple, zero-configuration command-line static HTTP server. It is powerful enough for production usage, but it's simple and hackable enough to be used for testing, local development and learning.

Globally Installation via npm:

npm install --global http-server

F - Run the App with Service Worker

Note:

As we noticed the Service Worker installed is only registered to Build environment, not for Dev environment. So, to use Service Worker, we have to build the app.

ng build

Open the server at post 8080 for the project service-workers2:

• by command: http-server -p 8080 -c-1 dist/<project-name>

http-server -p 8080 -c-1 dist/Service-workers2

Run the app at port 8080 with Service Worker:

Select Offline in the Throttling dropdown menu.

With the addition of an Angular service worker, the application behavior changes. On a refresh, the page loads normally. Look at the Network tab to verify that the service worker is active.

NOTE:
Under the "Size" column, the requests state is (ServiceWorker). This means that the resources are not being loaded from the network. Instead, they are being loaded from the service worker's cache.

G - Verify if a service worker is registered #

To verify if a service worker is registered, use developer tools in your favorite browser.

In Firefox and Chromium-based browsers (Microsoft Edge, Google Chrome, or Samsung Internet):

1. Open developer tools, then click the Application tab.
2. In the left pane, select Service Workers.
3. Check that the service worker's script URL appears with the status "Activated". (You'll learn what this status means in the lifecycle section in this chapter). On Firefox the status can be "Running" or "Stopped".

H - Summary

We demonstrated how to install Service Worker for solving Angular Caching issue.

References

• Angular - Getting started with service workers ---  Service Worker installation
  • Angular - Angular service worker introduction
  • Angular - @angular/service-worker
  • Create a Progressive Web App with the Angular CLI
  • Angular Service Worker - Step-By-Step Guide (angular-university.io)
• http-server - npm (npmjs.com) --- HTTP Server
  • http-party/http-server: a simple zero-configuration command-line http server (github.com)
  • johnpapa/lite-server: Lightweight node server (github.com)
• Service workers (web.dev)
• Getting Started with Service Workers | DigitalOcean
• Service Worker API - Web APIs | MDN (mozilla.org)
• Improve your Angular app performance by using this simple Observable cache decorator 🎉 | by Angel Nikolov | ITNEXT
• Using Service Workers - Web APIs | MDN (mozilla.org)
• Service Worker API - Web APIs | MDN (mozilla.org)
• How to Generate Service Workers Automatically | by Viduni Wickramarachchi | Bits and Pieces (bitsrc.io)
• What is Workbox? - Chrome Developers