reactjs - 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