React-Snap with Create-React-App and Service Workers

Question

So, my understanding is that react-snap as per its features "Works out-of-the-box with create-react-app - no code-changes required."

I read through the documentation and I see that it required some adjusting to work with Google Analytics which I implemented.

However, it also suggests changes to be made if one is going to use the default service worker that comes with CRA.

https://github.com/stereobooster/react-snap#service-workers

However, what is confusing is that it seems one has to perform a EJECT in order to make the necessary change.

navigateFallback: publicUrl + '/index.html',

You need to change this to an un-prerendered version of index.html - 200.html, otherwise you will see index.html flash on other pages (if you have any). See Configure sw-precache without ejecting for more information.

My question is - and note I am quite novice - does one have to eject? I kinda want to keep things simple. The only place I could find this line was in WebPack. navigateFallback

Also, if I don't see the negative side of the flashes on pages as per the documentation, is it okay to omit this step or will it have issues on other things?

Answer 1

Although this question is more than a year old, I'd like to take the opportunity as I've been able to implement service workers in react-snap (although with a varying degree of success).

Here's stereobooster's reference in GitHub: https://github.com/stereobooster/react-snap/blob/master/doc/recipes.md#configure-sw-precache-without-ejecting

You can configure it without ejecting. What you need to do is the following: Download and install sw-precache and ugfify-js:

  npm install sw-precache uglify-js --save-dev
  or
  yarn add sw-precache uglify-js -D

Then, in your package.json add the following entries: (Replace the build script with the following)

"scripts": {
    "generate-sw": "sw-precache --root=build --config scripts/sw-precache-config.js && uglifyjs build/service-worker.js -o build/service-worker.js",
    "build": "react-scripts build && react-snap && yarn run generate-sw"
}

Then, create a folder in the root level (next to your package.json) called scripts and add sw-precache-config.js file.

module.exports = {
  // a directory should be the same as "reactSnap.destination",
  // which default value is `build`
  staticFileGlobs: [
    "build/static/css/*.css",
    "build/static/js/*.js",
    "build/shell.html",
    "build/index.html"
  ],
  stripPrefix: "build",
  publicPath: ".",
  // there is "reactSnap.include": ["/shell.html"] in package.json
  navigateFallback: "/shell.html",
  // Ignores URLs starting from /__ (useful for Firebase):
  // https://github.com/facebookincubator/create-react-app/issues/2237#issuecomment-302693219
  navigateFallbackWhitelist: [/^(?!\/__).*/],
  // By default, a cache-busting query parameter is appended to requests
  // used to populate the caches, to ensure the responses are fresh.
  // If a URL is already hashed by Webpack, then there is no concern
  // about it being stale, and the cache-busting can be skipped.
  dontCacheBustUrlsMatching: /\.\w{8}\./,
  // configuration specific to this experiment
  runtimeCaching: [
    {
      urlPattern: /api/,
      handler: "fastest"
    }
  ]
};

Note, if you're not using an app-shell but you're loading the whole page (Meaning there's no dyanmic content), replace where it says navigateFallback: "/shell.html" with navigateFallback: "/200.html"

This basically allows you to cache the entire page

You can look for more information here: https://github.com/stereobooster/an-almost-static-stack

One thing that I'd recommend to check (I'm close to start that process as well) is the workbox-sw.

What to do if React-Snap fails

error at / TypeError: Cannot read property 'ok' of null

Or

ERROR: The process with PID 38776 (child process of PID 26920) could not be terminated. \node_modules\minimalcss\src\run.js:13:35) Reason: There is no running instance of the task.

You may get these infamous errors. I don't know exactly what causes them, but I know they're mentioned here, and here. In this case, delete the build folder, open a new terminal window, and try again.

If the problem still persists, then break down the script:

Do:

"scripts": {
  "build":  "react-scripts build"
  "postbuild": "react-snap",
  "generate-sw": "sw-precache --root=build --config scripts/sw-precache-config.js && uglifyjs build/service-worker.js -o build/service-worker.js",
}

And try running them independently.