Angular PWA Service Worker not calling localhost server on offline mode

Question

I'm working on a project using Angular and PWA, running on this server:

http://localhost:8080/heroes

And I have a mongodb api on another server:

http://localhost:3000/heroes

As you can see, the URL is the same, but different ports and this is working fine when online. But when I switch to offline, I would expect it to keep working since the server api mongo is localhost, but it is giving me this error:

{
  "headers": {
    "normalizedNames": {},
    "lazyUpdate": null,
    "headers": {}
  },
  "status": 504,
  "statusText": "Gateway Timeout",
  "url": "http://localhost:3000/heroes",
  "ok": false,
  "name": "HttpErrorResponse",
  "message": "Http failure response for http://localhost:3000/heroes: 504 Gateway Timeout",
  "error": null
}

Maybe run mongodb in another route will work, I don't know honestly, thanks everybody.

---

I added my project angular pwa to a free server for test "heroes1234.000webhostapp.com", in section home you can test jsons api gets, it works to my localhost:3000/heroes, fine in online, but not working in offline mode. thanks

Answer 1

How do you define the URLs to be cached in the ngsw.config.json file? If you want to cache data requests (using performance or freshness strategy), you should define the taget URLs within the "dataGroups" array, like in the example below:

"dataGroups": [
{
  "name": "jokes-cache",
  "urls": [
    "/icanhazdadjoke.com"
  ],
  "cacheConfig": {
    "strategy": "performance",
    "maxSize": 5,
    "maxAge": "15m"
  }
}

I wrote an article on how to create a PWA with angular , caching static assets and network calls, in case you want to deepen the topic.