What is PWA?

What are Service Workers?

A service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don’t need a web page or user interaction. It includes features like push notifications and background sync. In the future, service workers might support things like periodic sync or geofencing. The core feature is the ability to intercept and handle network requests, including programmatically managing a cache of responses.
-Matt Gunt, Developers.google.com

Choose Device & audits type and click Run audit button. It’s will show the audit detail result as shown in the below image.

The audit result will be displayed that there is no PWA at present. So, now I am going to implement the Progressive Web App to work. Navigate to install your application, install path and add the below command.

ng add @angular/pwa

Once executed the above command, you will get the manifest link in index.html file and automatically added ngsw-config.json file in the root directory.

Next, To enable the service worker & ngswConfigPath in angular.json file in under configurations Objects. Below config added automatically. If not you have to add it manually.

 "serviceWorker": true,
       "ngswConfigPath": "ngsw-config.json"

To add the service worker module in app.module files as below.

import { BrowserModule } from '@angular/platform-browser';
      import { NgModule } from '@angular/core';
      import { AppRoutingModule } from './app-routing.module';
      import { AppComponent } from './app.component';
      import { ServiceWorkerModule } from '@angular/service-worker';
      import { environment } from '../environments/environment';
      @NgModule({
        declarations: [
          AppComponent
        ],
        imports: [
          BrowserModule,
          AppRoutingModule,
          ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })
        ],
        providers: [],
        bootstrap: [AppComponent]
      })
      export class AppModule { }

{
        "$schema": "./node_modules/@angular/service-worker/config/schema.json",
        "index": "/index.html",
        "assetGroups": [
          {
            "name": "app",
            "installMode": "prefetch",
            "resources": {
              "files": [
                "/favicon.ico",
                "/index.html",
                "/manifest.webmanifest",
                "/*.css",
                "/*.js"
              ]
            }
          }, {
            "name": "assets",
            "installMode": "lazy",
            "updateMode": "prefetch",
            "resources": {
              "files": [
                "/assets/**",
                "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
              ]
            }
          }
        ]
      }

Now, it is ready to check with PWA enabled application. The PWA has to work in the production build. This following comment used to create a production build.

ng build --prod

Once you create the production build, you will see the ngsw-worker.js file in the build.

sudo npm install -g http-server

http-server -p 8080 <buid file directory>

How to catch the external URL using service workers?

In this case, I am using google font. The URL is added to the index.html file.

<link rel="manifest" href="manifest.webmanifest">
          <link
        href="https://fonts.googleapis.com/css?family=Supermercado+One&display=swap" rel="stylesheet">

Step 1: Firstly, check if the font file is cached in PWA.
Disconnect the internet and check if the font is loading in your application. You can see the network tab in the inspect window in Chrome.

Step 2:Add the following code to an ngsw-config.json file in under assetGroups.

"urls": [
                  "https://fonts.googleapis.com/css?family=Supermercado+One&display=swap"
                ]

Once you add the above code, run the production build and verify the application working in both online & offline. Now the file is catched from the service worker.

dataGroups : {
            name: string,
              urls: string[],
              version?: number;
              cacheConfig: {
                maxSize: number,
                maxAge: string,
                timeout?: string,
                strategy?: 'freshness' | 'performance';
              };
            }

maxSize: number,
            maxAge: string,
            timeout?: string,
            strategy?: 'freshness' | 'performance';

"dataGroups": [
                {
                  "name": "todos",
                  "urls": [
                    "https://jsonplaceholder.typicode.com/todos"
                  ],
                  "cacheConfig": {
                    "maxSize": 5,
                    "maxAge": "6h",
                    "timeout": "10s",
                    "strategy": "freshness"
                  }
                }
              ]

Over to You