Cache images received from Firebase Storage in PWA application

Yes, it's possible, I tried and works for me, I have a pwa with ionic and angular 7, in my 'ngsw-config.json' I used this config:

{  "index": "/index.html",  "assetGroups": [{    "name": "app",    "installMode": "prefetch",    "resources": {      "files": [        "/favicon.ico",        "/index.html",        "/*.css",        "/*.js"      ]    }  }, {    "name": "assets",    "installMode": "lazy",    "updateMode": "prefetch",    "resources": {      "files": [        "/assets/**",        "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"      ]    }  }],  "dataGroups": [{    "name": "api-freshness",    "urls": [      "https://firebasestorage.googleapis.com/v0/b/mysuperrpwapp.appspot.com/"    ],    "cacheConfig": {      "maxSize": 100,      "maxAge": "180d",      "timeout": "10s",      "strategy": "freshness"    }  }]}

In this article is well explained how works and what strategies you can use.

https://medium.com/progressive-web-apps/a-new-angular-service-worker-creating-automatic-progressive-web-apps-part-1-theory-37d7d7647cc7

It was very important in testing to have a valid https connection for the 'service_worker' starts. Once get offline, you can see that the file comes from "service_worker"

Test img _ from service_worker

just do

storage.ref("pics/yourimage.jpg").updateMetatdata({ 'cacheControl': 'private, max-age=15552000' }).subscribe(e=>{ });

and in your ngsw-config.json

"assetGroups": [{    "name": "app",    "installMode": "prefetch",    "resources": {      "files": [        "/favicon.ico",        "/index.html",        "/*.css",        "/*.js"      ],      "url":[        "https://firebasestorage.googleapis.com/v0/b/*"      ]    }  }