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. But I need some more functionality like cache some API responses n all. I don't know how to modify the script which includes my own code in auto generated service-worker. I have found some help lines for my case but these are not enough to get a whole understanding of it.

By default, the generated service worker file will not intercept or cache any cross-origin traffic, like HTTP API requests, images, or embeds loaded from a different domain. If you would like to use a runtime caching strategy for those requests, you can eject and then configure the runtimeCaching option in the SWPrecacheWebpackPlugin section of webpack.config.prod.js.

Above paragraph is from official doc

Thanks in advance!

Answer 1

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

Answer 2

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.