Search⌘ K
AI Features
Home
Courses
Optimize your web projects with Progressive Web Apps

Service Worker Config File

Explore how to configure the Angular service worker file to manage caching strategies for app assets and data requests. Understand the differences between performance and freshness caching modes, asset groups, and data groups. Learn to build and test a production-ready Angular PWA that serves cached content even offline, improving load speed and reliability.

We'll cover the following...

Service worker configuration file

This is one of the essential files added by the @angular/pwa schematic because the service worker configuration file (ngsw-config.json) allows specifying the different caching strategies for the assets and network responses.

YAML
{

  "$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)"

        ]

      }

    }

  ]

}

The snippet above is exactly the file that the add schematics created for us as a starting point.

Let’s analyze the file in all its parts:

First, the ＄schema property addresses the configuration schema in the node_module folder. It assists developers by providing validation and hints while editing the file. If you try to add an invalid attribute, the IDE should display a warning:

widget

The index property holds the path to the index page, usually index.html.


AssetGroups

assetGroups array has two cache configuration objects:

name: app

This group targets static files that constitute the core of our application (“app shell”) and that we want to fetch proactively. The property "installMode": "prefetch" retrieves the files while the service worker is installing and makes them available in the cache. The installation step is ...