Angular PWA not caching Api Urls

I have an angular application that is not is working correctly in Offline mode. The API urls are not being cached. That static assets are being though.

The app works fine in connected mode. It is the Offline mode that is not working.

I have run of ideas trying to figure out why. Technically it should work.

Here are the relevant ngsw-config file:

{
"$schema": "./node_modules/@angular/service-worker/config/schema.json",
"index": "/index.html",
"assetGroups": [
{
"name": "app",
"installMode": "prefetch",
"resources": {
"files": [
"/favicon.ico",
"/index.html",
"/manifest.webmanifest",
"/*.css",
"/*.js"
]
}
},
{
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"resources": {
"files": [
"/assets/**",
"/*.(svg|cur|jpg|jpeg|png|apng|webp|avif|gif|otf|ttf|woff|woff2)"
]
}
}
],
"dataGroups": [
{
"name": "api-all",
"urls": ["/api/v1/*"],
"cacheConfig": {
"strategy": "freshness",
"maxSize": 10,
"maxAge": "5d",
"timeout": "5s"
}
},
{
"name": "api-third-party",
"urls": ["https://fonts.googleapis.com", "https://fonts.googleapis.com/css2" , "https://fonts.gstatic.com"],
"cacheConfig": {
"strategy": "freshness",
"maxSize": 10,
"maxAge": "5d" ,
"timeout": "5s"
}
}
]
}


I see the following error in the console:

message: "Http failure response for http://localhost:xxxx/api/v1/Data/SearchBarModel/1: 0 Unknown Error" name: "HttpErrorResponse" ok: false status: 0 statusText: "Unknown Error" url:"http://localhost:xxxx/api/v1/Data/SearchBarModel/1"

Thanks for any insight.

Continue reading...