Add more service-worker functionality with create-react-app
As you've observed, create-react-app
's config is locked down, and the service worker logic is entirely defined in the config.
If you'd rather not eject
but you want some customization, another option is to modify the create-react-app
build process to explicitly call the sw-precache
CLI after the normal build has completed, overwriting the service-worker.js
that create-react-app
generates by default. Because this involves modifying your local package.json
, it doesn't require eject
ing first.
There's some info on this approach here, and the general idea is modifying your npm
scripts to look something like:
"build": "react-scripts build && sw-precache --config=sw-precache-config.js"
With sw-precache-config.js
configured based on your needs, but including
swFilePath: './build/service-worker.js'
to ensure that the built-in service-worker.js
is overwritten.
I had the same problem and without doing eject
, I could replace the default service-worker
with workbox
-generated one to add runtime caching webfonts, api calls, etc.
- install
workbox-build
- prepare
src/sw-template.js
to add yourregisterRoute
calls - prepare
/build-sw.js
to copy workbox file to 'build' folder andinjectManifest
- modify
package.json
scripts to run abovebuild-sw.js
- modify
src/registerServiceWorker.js
to replace the default one
You can find detailed file changes here.