Angular Service Worker, caching api calls for offline app

Question

I'm trying to make the service worker in angular work with API requests. I'd like the app to work offline and I've the below config:

    {
        "name": "api",
        "urls": ["https://x.com/**"],
        "cacheConfig": {
            "strategy": "performance",
            "maxSize": 20,
            "maxAge": "365d",
            "timeout": "5s"
        }
    }

Here is what the xhr tab looks like when I'm offline:

and this is the content of the user request:

As you can see the API calls for user don't resolve.

This is what the response of user looks like when online:

Solution

Try this:

• Go to your application tab -> Clear Storage -> Clear Site Data.

• Change your DataGroups array from this:

  {
      "name": "api",
      "urls": ["https://x.com/**"],
      "cacheConfig": {
          "strategy": "performance",
          "maxSize": 20,
          "maxAge": "365d",
          "timeout": "5s"
      }
  }
  

To this:

"dataGroups": [
    {
      "name": "api-performance",
      "urls": [
        "/user" //<=========== I know you want all API calls to be cached, but try this first and see
      ],
      "cacheConfig": {
        "strategy": "performance",
        "maxSize": 100,
        "maxAge": "3d"
      }
    }
  ]

• save and build your app in PROD,
• visit the page the first time.
• disable network
• refresh your page