Angular PWA - caching remote image(s)

Question

I am trying to cache images using an Angular 7 PWA app (created via ng add @angular/pwa). Everything works perfectly except for the images. This is how the ngsw-config.json file looks like (at least the appropriate section):

{
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**"
        ],
        "urls": [
          "https://fonts.googleapis.com/**",
          "https://fonts.gstatic.com/**",
          "https://res.cloudinary.com/**"
        ]
      }
    }

What's strange is that when I take a look at the cache using DevTools I see the images in there (along with the fonts). But when I take the application offline, it's only the images that do not work - they basically come back with a 504 error:

Error: Response not Ok (fetchAndCacheOnce): request for https://res.cloudinary.com/[removed]/image/upload/[removed].png returned response 504 Gateway Timeout (I have removed parts of the URL)

The fonts, however return an HTTP 200 (from the Service Worker).

I'm quite baffled over this, why wouldn't the images be served in offline mode? Am I missing something here?

Answer 1

I figured this out - it turns out that when using Cloudinary images, with the f_auto flag, Cloudinary returns a Vary HTTP header, which causes some issues. At the moment I haven't found a way to set the ingoreVary option for Cache API via ngsw. More info here: https://github.com/angular/angular/issues/28443#issuecomment-490765336