How to configure ngsw-config.json? 🤔

You must be wondering what’s ngsw-config.json?
It’s a configuration file that is used by Angular’s service worker to configure the settings.

We will discuss it in a few but before that, to know more about the angular service worker, please go through my previous article where I have explained what is service worker, how it works, etc.

Service worker enabled Angular Application

Great! After going through the above article, I hope now you know the Service worker and its power! ⚡️

Basically, the service worker is just a javascript file, which runs parallelly (in a separate thread) with your application in the browser and helps us to improve the performance of our application and keep our website looks like as its online even when the internet isn’t working.

So, as I promised in the previous article, we will discuss morengsw-config.json here, let’s start!

Here is the basic file created by Angular CLI, let’s discuss everything one by one.

ngsw-config.json

1. $schema
   This property is referring to the schema.json file inside angular packages. it’s basically a definition file, which contains the schema for ngsw-config.json file — i.e. property, its type, description, default values and all.

2. index

This specifies the file that serves as the index page to satisfy navigation requests. Usually, this is ‘/index.html’.

3. assetGroups

It contains an array that is pointing to the resources which can be loaded from the page’s origin or third-party resources or CDN — which we want our service worker to cache.

Below is an example of how we can asset groups.

"assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/index.html",
          "/*.css",
          "/*.js"
        ]
      }
    }
]

Let’s go through it one by one

i. installMode
It determines how the resources are initially cached.
a) prefetch
- It tells the Angular service worker to fetch every single listed resource while it’s caching the current version of the app. This is bandwidth-intensive but ensures resources are available whenever they’re requested, even if the browser is currently offline.
b) lazy
It does not cache any of the resources upfront. Instead, the Angular service worker only caches resources for which it receives requests. This is an on-demand caching mode. Resources that are never requested will not be cached. This is useful for things like images at different resolutions, so the service worker only caches the correct assets for the particular screen and orientation.

ii. updateMode
For resources already in the cache, determines the caching behavior when a new version of the app is discovered. Any resources in the group that have changed since the previous version are updated in accordance with ‘updateMode’.

a) prefetch
tells the service worker to download and cache the changed resources immediately.

b) lazy
tells the service worker to not cache those resources. Instead, it treats them as unrequested and waits until they’re requested again before updating them. An ‘updateMode’ of lazy is only valid if the ‘installMode’ is also lazy. Defaults to the value `installMode` is set to.

iii. resources
It tells the service worker which resource to be cache. We can give path of the file or pattern matching also worked if we’re not sure about name of the file but we know the extension.
a) files
b) urls

4. dataGroups
Policies for caching data requests, such as API requests and other data dependencies. Unlike asset resources, data requests are not versioned along with the app.

"dataGroups": [
    {
      "name": "api-performance",
      "urls": [
        "https://dummy.restapiexample.com/api/v1/employees"
      ],
      "cacheConfig": {
        "strategy": "performance",
        "maxSize": 100,
        "maxAge": "3d2h"
      }
    }
  ]

i. name

ii. urls
Can give the URLs or pattern of URL in this array to cache the data.

iii. cacheConfig
a) strategy

• freshness
  optimizes for the currency of data, preferentially fetching requested data from the network. Only if the network times out, according to ‘timeout’, does the request fall back to the cache. It’s useful when data changes frequently
• performance
  optimizes for responses that are as fast as possible

b) maxSize
The maximum number of entries, or responses, in the cache. Open-ended caches can grow in unbounded ways and eventually exceed storage quotas, calling for eviction.

c) maxAge
This indicates how long responses are allowed to remain in the cache before being considered invalid and evicted.

d= days
h= hours
m= minutes
s= seconds
u= milliseconds

You can see here, even when the network is working fine — it’s getting data from the cache because we set "strategy":"performance"

5. navigationUrls
This enables you to specify the list of URLs or URL patterns that will be redirected to the ‘index’ file.

Please find the stackblitz demo here

References

Angular Official Documentation

Images Courtesy: Srashti Jain (I just tried to show off my photography skills 😅)

In the upcoming articles, we will be talking about service workers with Angular Universal (Server-side rendering) and also why it only works on a secured layer (HTTPS). These are interesting topics. Stay connected! 😉

Feel free to connect with me on Twitter and LinkedIn 💖