Service worker (Workbox) caching old index.html, but fails to serve app.[hash].js

Question

could someone help me figuring out what is going on with a buggy workbox Service worker config?

Every time I update my app, the SW serves the old html (containing references to an older app.[hash].js), but then the browser fails to load that older app.[hash].js because it does not exist in either the SW cache or my server.

My workbox config is the following:

  new GenerateSW({
    clientsClaim: true,
    skipWaiting: true,
    cleanupOutdatedCaches: true,
    navigateFallback: './index.html', // for handling internal URLs of single page app.
  })

Maybe the combination of those 3 options are causing some kind of backwards compatibility issue?

I am wondering if the index.html is loading BEFORE the SW is replaced, and then when the browser requests the app.[hash].js, the new SW is already in place and fails to serve the old file (and of course my server no longer has the older file either).

Does anyone know what could be going on?