Angular Service Worker not caching dataGroups URLs correctly

Question

I'm hosting a number of site from domains, abc.example.com, xyz.example.com but each subdomain uses the same url for API access. in this case api.example.com

I've configured a service worker with @angular/pwa and it appears to be registered correctly in the browser and I'm trying to configure the "dataGroups" but no combination of urls and cacheConfigs works for me. eg

None of these variations cache the responses when API responses are received from either https://api.example.com/Product/ProductSearch?p=abc123 or https://api.example.com/Product/ProductAdditionalInformation?p=abc123

"dataGroups": [
{
  "name": "V1",
  "urls": [
    "https://api.example.com/Product/ProductSearch",
    "https://api.example.com/Product/ProductAdditionalInformation"
  ],
  "cacheConfig": {
    "maxSize": 50,
    "maxAge": "30m"
  }
},
{
  "name": "V2",
  "urls": [
    "**/Product/ProductSearch?",
    "**/Product/ProductAdditionalInformation?"
  ],
  "cacheConfig": {
    "maxSize": 50,
    "maxAge": "30m"
  }
},
{
  "name": "V3",
  "urls": ["**/Product/**"],
  "cacheConfig": {
    "maxSize": 50,
    "maxAge": "30m"
  }
},
{
  "name": "V4",
  "urls": ["/Product"],
  "cacheConfig": {
    "maxSize": 50,
    "maxAge": "30m"
  }
}

]

I've tested these variations in staging environments that have full https support

Is there something else I'm missing?

Answer 1

Can you make a stackblitz?

Sidenote: Add the "strategy" in your cacheConfig object