Create-react-app: Pre-rendering with react-snapshot and service worker incorrect behavior

[jasan-s]

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.htmlrespectively.

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 any suggestions to resolve this? asking since I believe this is related to SW

[jeffposnick]

Are you storing your rendered HTML snapshots in public/? If so, then https://github.com/facebookincubator/create-react-app/pull/3024 is relevant, and will hopefully be merged into the project in the future.

I'm assuming that you've already ejected in order to integrate with react-snapshot, in which case you can just make the change outlined in that PR yourself to your local config.

[jasan-s]

@jeffposnick the pre-rendered HTML snapshots by react-snapshot are automatically saved to the build/ folder outside of static/ folder when running the following command "build": "react-scripts build && react-snapshot" at runtime.

And I have not ejected from create-react-app, since react-snapshot does not require it to be ejected. Can you shed a light on why the app is behaving this way with service worker active? I noticed using chrome devtools that my cache storage using sw-precache only cached the contents of static/ folder and index.html the remaining contents of build/ is not included.

[jeffposnick]

Hello @jasan-s—The service worker that's generated during the create-react-app build process only knows to precache URLs for resources that are included as part of the Webpack build. (Assuming #3024 goes into effect, it will also know to precache URLs that correspond to .html files in public/.)

Any navigation request for a URL that isn't precached will result in the cached contents of index.html being used, following the App Shell model that works well with single page apps. By pre-rendering your site, you're effectively opting-out of the SPA model.

Since you're already effectively customizing the build process, your best bet might actually be to run sw-precache with an appropriate configuration following your react-snapshot, and overwrite the service-worker.js file that's generated by create-react-app. Something like: "build": "react-scripts build && react-snapshot && sw-precache --config=sw-precache-config.js", where sw-precache-config.js contains much of the same configuration as what create-react-app uses, with the swFilePath option set to overwrite the previously generated service-worker.js.

[jasan-s]

Thanks @jeffposnick I will try that. In create react app the SWPrecacheWebpackPlugin is used however I would be using sw-precache through Cli directly, how do i set the FilePath option to overwrite existing service-worker.js? Lastly, similar to #3024 , if I do cache thereact-snapshot generated .html files , how can I keep them them fresh through each build while serving them correctly to each path. wouldn't SW serve stale .html files after I add code to cache them.

[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.

[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"
          }]

[jasan-s]

@jeffposnick with the CRA 2.0 can you provide an update to how to acheive the same custom config using workbox-cli. or is it ok to conitue to use sw-precache cli

[jeffposnick]

See https://github.com/facebook/create-react-app/issues/5359 regarding custom Workbox configs in c-r-a 2.0.

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[stale[bot]]

This issue has been automatically closed because it has not had any recent activity. If you have a question or comment, please open a new issue.