Pre-rendering with react-snapshot and service worker incorrect behavior

I’m using create react app with react-snapshot to pre-render static markup for my routes. i.e "/", "/signIn", "/signUp" generates index.html, signIn.html, signUp.html respectively.

However what I’m seeing is that if I go to any route my app serves index.html (the static markup for the root route "/") momentarily and then renders the actual static markup(from react-snapshot) for the route (see the gif). This behevior makes sense if I was serving the app entirely from a main.js bundle , but since I want to use the static pre-generated html files, how do I disable the the service worker from serving index.html on certain routes for which I have static html file already.

Update: If I remove service worker from the create react app, the app loads static file for the path fine. However, I want to keep the functionality of service worker for PWA features.

Update 2: On chrome browser the quick flicker of root route static markup happens only once for each route. After the 1st flicker it seems the chrome browser cache fixes it, additionally if I disable cache from chrome dev tools and try to go to new route the flicker of root route returns. On Firefox browser the problem exists no matter what, on every route change or refresh the momentary flick of root route static markup occurs.

posted this on stackoverflow as well: GiF shows me trying to access "/signIn" Route, and notice the word home (static markup for "/" route) come up for a moment before the actual form for signIn renders.

[jasan-s]

@jeffposnick successfully caching all the folders using the following config 👍

module.exports = {
  staticFileGlobs: [
    './build/**/**.html',
    './build/images/**.*',
    './build/static/**',
  ],
  dontCacheBustUrlsMatching: /\.\w{8}\./,
  swFilePath: './build/service-worker.js',
  navigateFallback: './200.html',
  navigateFallbackWhitelist: [/^(?!\/__).*/],
  staticFileGlobsIgnorePatterns: [/\.map$/, /asset-manifest\.json$/],
  stripPrefix: './build'
}

However, Now for some reason on Chrome browser the service worker never updates(requires me to manually update the SW from devtools) . The SW updates automatically with new content in Firefox browser on refresh or close tab and reopen tab. I believe its because the SW is being cached for some reason on chrome.

Update: I can confirm This is due to browser caching Locally I’m using serve -s build , deployed to firebase hosting with the following it works great:

    "source" : "service-worker.js",
          "headers" : [ {
              "key" : "Cache-Control",
              "value" : "max-age=0"
          }]

[jeffposnick]

The sw-precache CLI has a few parameters that don’t correspond to what’s used in the Webpack plugin.

For the output path, the CLI uses a parameter named swFilePath, and you’d presumably want to set that to build/service-worker.js so that it overwrites the file that’s created by the basic create-react-app build.

I think the idea is that if you chain sw-precache to the end of your custom build, then each time your build output changes, the generated service worker will change as well.

So you’d use

"build": "react-scripts build && react-snapshot && sw-precache --config=sw-precache-config.js"

where sw-precache-config.js contains your configuration, exported as a CommonJS module.