Angular CLI PWA - ngsw-config only caching images referenced in CSS

Question

So this is a bit of a strange issue that I can't seem to find reference to anywhere online. Was hoping someone here could shed some light on the following, as well as a potential fix -

I have and Angular CLI application which is compliant with Google's PWA requirements. Everything works just as expected, however some of the images are not being cached by the service worker.

Here is my ngsw-config.json -

    {
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/*.css",
          "/*.js",
          "../assets/signalR/appHub.js",
          "../admin/images/**",
          "../manifest/manifest.json"
        ],
        "urls": [
          "/api/WhoAmI",
          "/api/GetApps"
        ]
      }
    }, {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)",
          "../admin/images/**"
        ]
      }
    }
  ]
}

Inside the admin/images folder, there are some background images, logos, spinners, icon etc. However, when I run 'ng-build --prod', the only images that get cached are those which are references in CSS (background-image). Any which are placed onto the page itself are ignored.

This results in an offline page with no logos or icons.

Looking at the generated 'dist' folder, the 'working' image files are copied and given a random suffix.

Inside the generated ngsw.json file, these are the only images referenced, no mention of the missing logos etc.

{
  "configVersion": 1,
  "timestamp": 1568879436433,
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "updateMode": "prefetch",
      "urls": [
        "/favicon.ico",
        "/index.html",
        "/main-es2015.b125878abf05e7d82b63.js",
        "/main-es5.6e9e620d3fbd96496f98.js",
        "/polyfills-es2015.4d31cca2afc45cfd85b5.js",
        "/polyfills-es5.2219c87348e60efc0076.js",
        "/runtime-es2015.703a23e48ad83c851e49.js",
        "/runtime-es5.465c2333d355155ec5f3.js",
        "/scripts.f616c8c0191ed4649bce.js",
        "/styles.a4be089a70c69f63e366.css"
      ],
      "patterns": [
        "\\/api\\/WhoAmI",
        "\\/api\\/GetApps"
      ]
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "urls": [
        "/assets/signalR/appHub.js",
        "/bgrounds-geometric-black.8d983f6875c006eda992.png",
        "/bgrounds-geometric-red.1484266e3058319624bd.png",
        "/block-spinner-dark.20f05a2ddef506c61f4d.gif",
        ...
    }
    ...
}

Is anyone able to demystify this at all?

Apologies for the long question, but if you've got this far, thank you :)

Any help is appreciated!

score 0 · Answer 1 · answered Sep 19 '19 at 09:38

Through messing around with a few different things, I found a workaround for this - doesn't explain why it was not working initially though.

It seems that renaming my folder from admin/images to assets/images and updating the relevant resource > files paths got it working.

If anyone stumbled upon some more insight into the cause of this, please let me know.

Thanks, Rob

score -1 · Answer 2 · edited Mar 13 '21 at 02:54

I added below line to ngsw-config.json

"/runtime*",
"/main*",
"/style*",
"/polyfill*"

It looks like this afterwards

{
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/runtime*",
          "/main*",
          "/style*",
          "/polyfill*",
          "/favicon.ico",
          "/index.html",
          "/css",
          "/js"
        ]
      }
    }, {

Then it worked.

Angular CLI PWA - ngsw-config only caching images referenced in CSS

2 Answers2