Force Angular Service Worker to Ignore External Images

Question

I am currently in the final phases of creating a PWA using Angular's Service Worker package. The web site I am building currently has a home page with 50, dynamic-template images from an external API (eg: http://blah.com/v2/{{id}}/icon.png). The current service worker set up caches these images and uses up the browsers storage. Every day these images change and so it does not pay to cache them plus, there are 50 so it takes up A LOT of space in the browser. Is there a way to prevent images from the external source from being cached?

The following is the current set up of my ngsw-config.json file:

{
    "$schema": "./node_modules/@angular/service-worker/config/schema.json",
    "index": "/index.html",
    "dataGroups": [
        {
            "name": "api",
            "urls": ["/api", "/v2"],
            "cacheConfig": {
                "maxAge": "0u",
                "maxSize": 0,
                "strategy": "freshness"
            }
        }
    ],
    "assetGroups": [
        {
            "name": "app",
            "installMode": "prefetch",
            "resources": {
                "files": [
                    "/favicon.ico",
                    "/index.html",
                    "/manifest.webmanifest",
                    "/*.css",
                    "/*.js"
                ]
            }
        },
        {
            "name": "assets",
            "installMode": "lazy",
            "updateMode": "prefetch",
            "resources": {
                "files": [
                    "/assets/**",
                    "/*.(eot|svg|cur|webp|gif|otf|ttf|woff|woff2|ani)"
                ],
                "urls": [
                    "https://fonts.googleapis.com/**",
                    "https://fonts.gstatic.com/**"
                ]
            }
        }
    ]
}

The random /v2/ in the dataGroups section was my last of many failed attempts to fix this problem.

I even removed all image file endings from the assetGroups section, but that did not work either.

Answer 1

dataGroups are requests that we dont want to cache (versioned) while assetGroups are the ones that we want to cahce (versioned).

Use Below config :-

"dataGroups": [
        {
            "name": "api",
            "urls": ["/api"],
            "cacheConfig": {
                "maxAge": "0u",
                "maxSize": 0,
                "strategy": "freshness"
            }
        },
        {
                "name": "mycrapyimages",
                "urls": ["http://blah.com/v2"],
                "cacheConfig": {
                    "maxAge": "1u",
                    "maxSize": 1,
                    "strategy": "freshness"
                }
         }
        ],

Removing all image file endings from the assetGroups section is definitely not the solution. We might exclude them from testing purpose but let them their for production build.

Note:- I am keeping maxAge and maxSize intentionally to 1 , you may set to 0 while testing.