Angular 7 Service Worker not caching assets in production

Question

In a local environment my Ng7 app works perfectly when serviced by http-server. However, when deployed online with Netlify no files are cached using the following ngsw-config.json

{
  "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)"
        ]
      }
    }
  ]
}

I have found that is caches some of the js files but they all have a 0 content length, meaning they actually don't even have any content. Interestingly, it refuses to cache the main.HASH.js file which is actually the largest.

UPDATE

I have taken my lead from this question and removed index.html from the files I can get the .js file list to show in the cache store.

However as before, they all have a content length of zero!

Answer 1

First of all you have to set the installMode of the assets to "prefetch" - this ensures that the given ressources will be cached by ServiceWorker when your app starts. You set it to lazy - which means that only ressources will be cached when they are requested. See angular guide Sometimes (my experiences with it) updateMode causes problems - so give it a first try without the assets "updateMode". So the ngsw-config.json will look like this:

{
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/*.css",
          "/*.js"
        ]
      }
    }, {
      "name": "assets",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ]
}