How to modify auto generated service-worker in Create-React-App

Question

I have created a sample app from Create-React-App library. When I ran the build command then it generates a service-worker on its own using cache-first strategy

Answer 1

You would can run npm run eject and get access to the underlying Webpack configuration.

Once you do that, the webpack.config.prod.js file can be modified to adjust your generated service worker. Look for the section that configures SWPrecacheWebpackPlugin.

You can add in an additional runtimeCaching configuration option to that section to accommodate your runtime caching needs.

Answer 2

We had a similar problem while working on a project recently and we didn't want to "eject". We created a little tool that allows you to append custom service worker code to the one generated by CRA.

Have a look here: https://github.com/bbhlondon/cra-append-sw