registerNavigationRoute: precached index.html is not updated NetworkFirst

Question

Context

I have a SPA that use webpack, vueJS and Workbox. In the service-worker, I have the following lines ():

workbox.precaching.precache([
  '/index.html'
])

workbox.routing.registerNavigationRoute('/index.html', {
  blacklist: [
    /.*\.css/,
    /.*\.(?:png|jpg|jpeg|svg|gif)/,
    /.*\.(?:js|woff|woff2|otf|ttf)(?:$|\?)/
  ]
})

Problem

When the app is built for the first time, the app.js file is now named app.xxxxxxxx.js (for example). So, when the client use the service worker, it precache the index.html file with the following line inside:

<script type=text/javascript src=/js/app.xxxxxxxx.js></script>

when I update the app and rebuild it, the app.js file will be named app.yyyyyyyy.js and will BUT the client still have the index.html file cached using the old app.xxxxxxxx.js file so the app won't work (obviously...)

Expected behavior

The service worker seems to get the precached file index.html using a CacheFirst strategy. I guess it will work if it use a NetworkFirst strategy.

Is it possible to do it ?

- EDIT -

I forgot to precise: each .js file is cached using a NetworkFirst strategy:

workbox.routing.registerRoute(
  /.*\.(?:js|woff|woff2|otf|ttf)(?:$|\?)/,
  workbox.strategies.networkFirst({
    cacheName: 'assets-cache',
    plugins: [
      new workbox.expiration.Plugin({})
    ],
  })
)

Answer 1

You should use the workbox-webpack-plugin to automatically take a "snapshot" of your local webpack assets, and have it generate a the "precache manifest" of all the files that ends up passed in to workbox.precaching.precache([]) .

This ensures that whenever your index.html is redeployed, Workbox will update the previously cached entry. I'd recommend reading this material about how precaching behaves.

(When you access your site via a http://localhost URL, there should be an error message logged in the JS console in your browser warning about this when you have entries in your precache manifest that appear to be entered "by hand". This is easy to miss, though.)