How to customize service worker in react?

Hello everyone i’m new to service workers but I can write my own service worker in vanilla js, but when I’m trying to create react app to be PWA the only guide I see that have to turn serviceworker.unregister() to register() but the question is 1/ how to customize this ? 2/ how and where i can write my backgroundSync or push notification logic that related to service worker? and another question 3/ How Can i do that without ejecting? and can i run locally in development?`

Also i heard that service worker doesn't work with XHR or any thing based on it like axios only works with fetch API, Is this true?

Could you please provide a detailed explanation for every question?

thanks in advance.

[j-lee8]

I’ve also experienced this same issue. Upon research, it seems CRA’s generation of the service-worker file is faciliated by Workbox (generateSw). If you look at their site they state that generateSw shouldn’t be used if you require a customisation to the service-worker or additional scripts.

We wanted to import an additional service-worker (push notifications) script into the generated one but it’s really not as straightforward as it probably should be.

As it stands, unless somebody has different information, you have a few options (we opted for option 2 as it’s the path of least resistance). It certainly feels a little “dirty” but it’s functional and will suffice until a better approach is supported by the CRA team. I believe service-worker customisation was supported in CRA1.x but was removed in 2.x. There’s probably a very good reason for it but it’s certainly been a pain point for us.

1. Create your own custom service worker (but you’ll bypass the Workbox plugins so you’ll need to handle stuff like network caching yourself if you want a PWA).

2. Append your custom code to the generated SW. Install cra-append-sw and inside your package.json you can use it like so; "start": "react-scripts start && cra-append-sw --mode dev ./custom-sw.js", "build": "react-scripts build && cra-append-sw ./custom-sw.js",

A piece of cake to set up. You may want to add the --skip-compile option otherwise it uses Webpack+Babel configuration which yielded many errors for us.

1. Use Workbox in custom service-worker file. This looked a little too fragile and error prone for us as it requires multiple configuration changes.

We had real issues with this so I hope it’s useful.

[BrentGrammer]

If you don’t want to eject or use a third party package like react-app-rewired, then you just remove the CRA boilerplate for registering their service worker and register your own worker (create it in the public folder). In CRA v4, you don’t even have to do that, just make your service worker file in the public folder and register it as you normally would in your source code. If you’re interested in a detailed walkthrough of how to do this with and without Workbox and without ejecting from CRA, I made a course on Udemy - just search custom service worker cra.