exclude index.html from service worker cache in create-react-app

After trying multiple options, the one that worked best was not I was really willing to implement but could not find anything better.

From the service-worker.js file remove below lines

workbox.routing.registerNavigationRoute("/index.html", {

  blacklist: [/^\/_/,/\/[^\/]+\.[^\/]+$/],
});

This will not cache index.html and try to pull it every time from the server, though this does not sound best but does the trick.

If you have ejected from create-react-app you can go into /config/webpack.config.js and change the default arguments for GenerateSW() to the following:

new WorkboxWebpackPlugin.GenerateSW({
          clientsClaim: true,
          exclude: [/\.map$/, /asset-manifest\.json$/, /index.html/],
          importWorkboxFrom: "cdn",
          navigateFallbackBlacklist: [
            // Exclude URLs starting with /_, as they're likely an API call
            new RegExp("^/_"),
            // Exclude URLs containing a dot, as they're likely a resource in
            // public/ and not a SPA route
            new RegExp("/[^/]+\\.[^/]+$")
          ]

This way you don't have to manually change your serviceworker.js after every building.