Angular: Configure service worker for images coming from an external URL

Viewed 53

I am using Angular 10 and I have page fetching .jpg files from an external URL. Can I rely on the service worker to improve the fetch time for these files ? (they aren't supposed to change, meaning an url will always relate to the same file).

After reading the doc, I came up with this:

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        ...
      }
    }, {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        ...
      }
    }
  ],
  "dataGroups": [
    {
      "name": "remote-assets",
      "urls": ["https://github.com/pages/Org/Project/images/**"],
      "cacheConfig": {
        "maxSize": 3000,
        "maxAge": "30d",
        "strategy": "performance"
      }
    }
  ]
}

I have use the dataGroups key to setup a performance strategy for files coming from this url. However, as mentioned this is an external URL and thus is not on the same server. Here is the result:

enter image description here

I am not sure it's the correct way to implement this though. Any thoughts ?

0 Answers
Related