Create-react-app: How to customize service worker in react?

[MohammedSaberMohammed]

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.

[JavaJamie]

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.

[MohammedSaberMohammed]

@JavaJamie Thank you very much, about solution number 3 if I want to use workbox I have to eject to edit webpack configuration ( remove old plugin and add mine ) right?

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[stale[bot]]

This issue has been automatically closed because it has not had any recent activity. If you have a question or comment, please open a new issue.

[wellcoj]

I'm still waiting for a solution! o/

[garyng2000]

@wellcoj, the good old 'npm run eject' :-)

I am in the process of migrating my CRA 1.x(which was using sw-precache) to CRA 3.x. I had to eject back then for various reason. Started out with non-ejected CRA 3.x but get stuck on workbox. don't want google cdn and need to add custom script. Just eject it and change modify the webpack configure and it is done.

Yes there are those 'don't eject' just use 'patch'(rewired or whatever approach) but I found it easier to just simple eject. and event after eject the migration of my old project(which was 1.x like a few years back) to the new base framework of 3.x only takes a day or two. Easier than follow all those patching packages.