Network first caching of index.html using workbox.js

Question

I've integrated a service worker into our Single Page App built with ReactJS, using the workbox-build package by Google.

I'm having some troubles on the pre-caching of the index.html, specifically the service worker is serving an outdated index.html everytime we release a new build. Since it served an outdated index.html, the main JavaScript file is not found since it is versioned based on the build.

</div><script type="text/javascript" src="/static/js/main.fa34a3ce.js"></script>

I have also tried to remove the index.html from pre-cache, and have it in the runtime cache with a network first setting. But it doesn't seem to be cached by the service worker.

runtimeCaching: [
  {
    urlPattern: /\/$/,
    handler: 'networkFirst',
    options: {
      cacheName: 'my-cache-index'
    }
  }
]

Answer 1

You are most likely running into a common double caching situation, refer to this Cache Control and upcoming changes in Chrome Fresher Service Workers.