How to cache Api Response via Angular Service Worker when api is on different domain

Question

I am not able to cache my master data api via angular service worker most of the examples show the url in dataGroup to be on same domain and hence only "/catalog" works but my api is hosted on another domain

lets say its available at http://x.com/api/catalog

following is ngsw-config.json

{
  "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/**"
      ],
      "urls": [
        "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
      ]
    }
  }],
  "dataGroups": [{
    "name": "xyz",
    "urls": ["http://x.com/api/catalog"],
    "cacheConfig": {
      "strategy": "freshness",
      "maxSize": 15,
      "maxAge": "1h",
      "timeout": "5s"
    }
  }]
}

Here is a step by step tutorial, with a external api data source (random.org): medium.com/bratislava-angular/…. You may have to do further configuration for CORS request. — GeoAstronaute

Ankit Raonka Ankit Raonka · Accepted Answer · 2018-07-16T10:24:12

The above code in dataGroups works

the only thing is after loading the app either refresh or open a new tab for the service worker to cache

THe reason for this is given in the following link

https://blog.angular-university.io/service-workers/

in Why isn't the Service Worker immediately active? section

How to cache Api Response via Angular Service Worker when api is on different domain

1 Answers