Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

I have ngsw-config.json (taken from the docs):

    {       "index": "/index.html",       "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/**"           ]         }       }]     } 

On my site there is a link to the RSS feed /api/rss, which should open in a new browser tab without loading Angular app. How can I exclude it from a list of resources whose request is redirected to index.html?

UPD: I tried but not working the following config (see !/api/rss):

    {       "index": "/index.html",       "assetGroups": [{         "name": "app",         "installMode": "prefetch",         "patterns": ["!/api/rss"],         "resources": {           "files": [             "/favicon.ico",             "/index.html",             "!/api/rss"           ],           "versionedFiles": [             "/*.bundle.css",             "/*.bundle.js",             "/*.chunk.js"           ]         }       }, {         "name": "assets",         "installMode": "lazy",         "updateMode": "prefetch",         "resources": {           "files": [             "/assets/**"           ]         }       }]     } 
like image 375
ktretyak Avatar asked Dec 07 '17 10:12

ktretyak


People also ask

How do I bypass the service worker for a particular request?

To bypass the service worker, 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.

What is NGSW-config JSON?

The ngsw-config.json configuration file specifies which files and data URLs the Angular service worker should cache and how it should update the cached files and data. The Angular CLI processes the configuration file during ng build .

What is NGSW worker JS?

This is the runtime configuration file, that the Angular Service worker will use. This file is built based on the ngsw-config. json file, and contains all the information needed by the Angular Service Worker to know at runtime about which files it needs to cache, and when.

What is the use of service worker in Angular?

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.


1 Answers

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/**"         ]       }     }   ] } 
like image 183
ktretyak Avatar answered Sep 22 '22 02:09

ktretyak