angular: Angular PWA not load all files from cache

Hello,

I’am working on a Angular 8.1.0 PWA and when I test it offline on a device the .svg and font files got not loaded from the cache – png files work fine! If i check it with Chrome inspect the files are listed in “Application -> Cache Storage” but the service worker can not load it.

Here the error from the console.log

ngsw-worker.js:596 Uncaught (in promise) Error: Response not Ok (fetchAndCacheOnce): request for https://xxx.com/assets/pfeil-full-rechts.svg returned response 504 Gateway Timeout

Here a screenshot from the Chrome Inspect Tool

screen_shot_1

And here the 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"
        ]
      }
    }, {
      "name": "assets",
      "installMode": "prefetch",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ]
}

The interesting thing is that also the preview from the cache works, f.e. if i select in the Dev Tool the ‘/assets/pfeil-links.svg’ from the Cache Storage the preview works (look at the screenshot)

The version of Chrome on my device is 75.0.3770

Thanks for your help!

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Comments: 16 (6 by maintainers)

Most upvoted comments

Just to finish this issue. I did’t figured out where the problem is – also on a different server / device the same problem pops up - it works randomly. So finally I replaced all the svg’s to png’s or use the svg in a html template.

Thanks for your help and time!