42

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/**"
          ]
        }
      }]
    }
2
  • So If I am not wrong you want to use the route /api/rss which points to some other place not any URL or pageview from your angular app and service worker should not load anything from that URL
    – Panna Das
    Dec 13, 2017 at 12:55
  • @PannaDas, Angular application should not serve this URL.
    – ktretyak
    Dec 14, 2017 at 13:52

7 Answers 7

45

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/**"
        ]
      }
    }
  ]
}
4
  • 2
    Everything I put in Datagroups seems ignored. I don't have the datagroup in the ngsw.json file generated in dist (with ng build --prod). Do you have it with this configuration or is it working an other way ?
    – switch
    Dec 29, 2017 at 18:56
  • 1
    This works only to GET requests. We are having a problem when a file progress bar doesn't work because of SW. We did the solution that is suggested here: github.com/angular/angular/issues/21191#issuecomment-360051276 until Angular will add a native support for that
    – doron
    Jan 25, 2018 at 8:38
  • 4
    Does it works for the external urls as well(i.e for cdn files)? I am trying but doesn't work for me Mar 12, 2019 at 14:32
  • This way is not working from my side; just the way bypassing URLs from angular service workers by using ngsw-bypass from stackoverflow.com/a/58520498/1979190 is working. Aug 21 at 2:26
22
+50

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";
    }
  }]
}
2
21

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

2
  • 2
    This is definitely a better answer than the accepted one. This because now you don't have to edit the ngsw-config.json-file, which I assume is best to leave alone (if possible) for easier future updates. Nov 30, 2020 at 9:28
  • this is not working for me, it gets fully ignored the ngsw-bypass param and the ngsw-bypass header as well Feb 24, 2022 at 2:33
14

The correct way of doing this is to omit the endpoints from the index redirect. So your ngsw-config.json should look like this with added navigationUrls and negation of the url part you wish to omit. This way the URL will just be redirected and circumvent the ngSW entirely.

    {
      "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/**"
          ]
        }
      }],
      "navigationUrls": [
        "!/api/rss"
      ]
    }

Note that !/api/rss is specific. If you want to omit the entire api folder use !/api/** instead.

Documentation here https://angular.io/guide/service-worker-config#navigationurls

Please note that negating (!) does NOT work under "resources": "urls": according to the docs.

7
  • 2
    I think your solution is the best! But you also need to include the default navigationUrls from the doc: "navigationUrls": [ "/**", "!/**/*.*", "!/**/*__*", "!/**/*__*/**", "!/api/rss"]
    – illnr
    Dec 14, 2020 at 16:52
  • I did try this, and it's not working. One of my navigationUrls is "!/web/v3/Account/connect/**/**", and the url /web/v3/Account/connect/web/microsoft is still opening in the PWA when using window.open()
    – Pieterjan
    Jul 25, 2021 at 11:07
  • @Pieterjan did you find solution for this? Feb 24, 2022 at 2:34
  • Yes, by opening the new window using a subdomain. Next you'll need to alter the cookie domain to include this external.example.com so that ExternalLoginSigninAsync signs you in for the base domain (too)
    – Pieterjan
    Feb 24, 2022 at 7:07
  • In case a subdomain isn't an option for you, here's the bugtracker issue
    – Pieterjan
    Feb 24, 2022 at 7:10
4

The ngsw-configuration.json file uses glob format for pattern matching paths.

Patterns use a limited glob format:

** matches 0 or more path segments.
* matches exactly one path segment or filename segment.
The ! prefix marks the pattern as being negative, meaning that only files that don't match the pattern will be included.

What is important here is the ! prefix, which can be used to exclude a path. For example, a glob pattern of !/api/rss should exclude this path.

To exclude a path from your nags-configuration.json file, simply prepend the ! character to this path pattern.

6
  • 1
    This is the first thing I tried to do (like this), but it does not work.
    – ktretyak
    Dec 16, 2017 at 6:51
  • Have you tried additional variants, such as !api/rss or !/api/rss/**?
    – Trent
    Dec 16, 2017 at 7:39
  • 6
    Be aware that negative glob patters are not supported for the urls array in dataGroups or in the files array in AssetGroups/resources.
    – obaylis
    Nov 1, 2018 at 10:33
  • Well then where are they supported @obaylis Feb 8, 2020 at 22:55
  • @ÁkosVandra - you can find the detail on what is / isn't supported here - angular.io/guide/service-worker-config
    – obaylis
    Feb 10, 2020 at 12:43
0

In the ngsw-config.json file

{
  "index": "/index.html",
  "dataGroups":
  [
    {
      "name": "api",
      "urls": ["!/**/*profileimageupload*"],
      "cacheConfig": {
        "maxSize": 0,
        "maxAge": "0u",
        "strategy": "freshness"
      }
    }
  ]  
}

eg. If your API is like https://api.example.com/profileimageupload/ then add last segment from the Service/API

I add profileimageupload which I want to Exclude(remove) calling from service worker that's why I added !/**/yourService/Api last name,

1
0

you can disable service worker for specific request, via headers or query string.

More Detail;

Go github issue please

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.