Angular 5 and Service Worker: How to exclude a particular path from ngsw-config.json Angular 5 and Service Worker: How to exclude a particular path from ngsw-config.json angular angular

Angular 5 and Service Worker: How to exclude a particular path from ngsw-config.json


Thanks to the Pedro Arantes advice, I reached the next working config (see dataGroups and "maxAge": "0u"):

{  "index": "/index.html",  "dataGroups":  [    {      "name": "api",      "urls": ["/api"],      "cacheConfig": {        "maxSize": 0,        "maxAge": "0u",        "strategy": "freshness"      }    }  ],  "assetGroups":  [    {      "name": "app",      "installMode": "prefetch",      "resources": {        "files": [          "/favicon.ico",          "/index.html"        ],        "versionedFiles": [          "/*.bundle.css",          "/*.bundle.js",          "/*.chunk.js"        ]      }    },    {      "name": "assets",      "installMode": "lazy",      "updateMode": "prefetch",      "resources": {        "files": [          "/assets/**"        ]      }    }  ]}


Have you already tried to create data groups? dataGroups are used to data request such as assetGroups to assets (which are files).

Data Groups

Unlike asset resources, data requests are not versioned along with the app. They're cached according to manually-configured policies that are more useful for situations such as API requests and other data dependencies.

Data Group interface:

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

You might create a data group that excludes /api/rss (if "!/api/rss" does not work, you can add all others APIs in urls": ["/api/user", "/api/admin"]:

{  "index": "/index.html",  "assetGroups": [{    "name": "assetGroup1",    ...  }, {    "name": "assetGroup1",    ...  }],  "dataGroups": [{    "name": "dataGroup1";    "urls": ["!/api/rss"];    cacheConfig: {      maxSize: 50;      maxAge: "3d12h";    }  }, {    "name": "dataGroup2";    "urls": ["/api/user"];    cacheConfig: {      maxSize: 40;      maxAge: "3d12h";    }  }]}


This has been made easier now, you can bypass URLs from angular service workers by using ngsw-bypass. From the docs:

To bypass the service worker you can set ngsw-bypass as a request header, or as a query parameter. (The value of the header or query parameter is ignored and can be empty or omitted.)

I am using the query string to bypass a certain url from service worker like this:

https://mydomain.report-uri.com/r/d/csp/enforce?ngsw-bypass=true