[SOLVED] How to prevent Angular service worker to cache PDF file?

How to prevent Angular service worker to cache PDF file?

I have an Angular 7 application with service worker setup. But I just noticed that when I try to open a PDF link on my site they are not working.

But if I open the developer console > application and click on Bypass for network it works fine, also if I disable the service worker it works fine too.

Here is my ngsw-config.json file.

{
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app-shell",
      "installMode": "prefetch",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/index.html",
          "/manifest.json",
          "/ngsw-worker.js",
          "/scripts*.js",
          "/main*.js",
          "/polyfills*.js",
          "/runtime*.js",
          "/common*.js",
          "/*.css"
        ]
      }
    }, {
      "name": "assets-lazy",
      "installMode": "lazy",
      "updateMode": "lazy",
      "resources": {
        "files": [
          "/images/logo_red_white.svg",
          "/logo.png",
          "/assets/icons/**",
          "/*.js"
        ]
      }
    }
  ]
}

When I look at the network tab on the developer tool I can see that the PDF is being loaded from the service worker.

Any way I can tell the service worker to ignore PDF files?

Solution

Why dont you cache the PDF files. In that way service-worker will not mis-behave with public files and you can use PDF files on your page without any hassle. To cache PDF files use same technique as you store or caches the images.

For more you can refer to this google link.

https://developers.google.com/web/ilt/pwa/lab-caching-files-with-service-worker