DEV Community

Cover image for The easiest way to extend or customize Create React App service worker without ejecting

The easiest way to extend or customize Create React App service worker without ejecting

Michał Gacka on September 06, 2020

Create React App (version before 4.0.0) by default includes a hidden Service Worker that will do some background magic for you in order for your ap...
Collapse
 
sjbuysse profile image
sjbuysse

Hi Michal, thanks for this!
Quick question: Why do you still register the firebase-messaging-sw.js ?
shouldn't you use the CRA serviceworker.register() function to register the CRA sw, which is now appended with the firebase sw?

Collapse
 
m3h0w profile image
Michał Gacka • Edited

Hi! That's a great question that. I should explain that better.

It's because cra-append-sw on npm start is ran in a dev mode meaning that as per their documentation:

dev creates public/<file> instead of appending the code to build/service-worker.js
Enter fullscreen mode Exit fullscreen mode

So if you want it running in development you need to register it. I actually modified the if statement later on and didn't update it in the post. Now it looks like this:

if ('serviceWorker' in navigator && process.env.NODE_ENV !== 'production')
Enter fullscreen mode Exit fullscreen mode
Collapse
 
sjbuysse profile image
sjbuysse

awesome! thanks for this clarification

Thread Thread
 
m3h0w profile image
Michał Gacka

@sjbuysse apparently we missed that there is a simpler way now for. CRA 4.0.0 has the service worker file available for extension: dev.to/m3h0w/don-t-struggle-with-e...

Collapse
 
sjbuysse profile image
sjbuysse

Thanks for the last answer, one more comment that I needed to make it work for me in production as well.
Firebase is expecting a firebase-messaging-sw.js file to function as a service worker, but you are actually appending your firebase sw to the CRA serviceworker.js in your production build.
So you will have to let firebase messaging know that the serviceworker was registered else where by passing your serviceworker registration to the getToken() method when you call it.

messaging.getToken({serviceWorkerRegistration})
Enter fullscreen mode Exit fullscreen mode
Collapse
 
m3h0w profile image
Michał Gacka

Interesting. I wonder how I had it working then without passing that in (some kind of version discrepancy maybe?). Thanks for pointing it out! I'll include it in the post.

Collapse
 
avatar19710 profile image
Daniel Dopiriak

Wow, thanks a lot. I spent countless hours finding the right solution, and this one actually worked perfectly. :)

Collapse
 
m3h0w profile image
Michał Gacka

Hey @daniel Dopiriak there's a better solution I found today. CRA 4.0.0 has the service worker file available in the src folder: dev.to/m3h0w/don-t-struggle-with-e...

Collapse
 
avatar19710 profile image
Daniel Dopiriak

Thanks, Michal. We do use some libraries which might not be supported by the new version of react. I will have to look at it more closely. But I really appreciate your comment.

Thread Thread
 
m3h0w profile image
Michał Gacka

Based on this discussion I think there is a minor version upgrade in React 16 that is compatible with CRA 4 so maybe you don't have to upgrade to React 17 if that's what you meant :)

Collapse
 
m3h0w profile image
Michał Gacka

Me too! ☀️

Collapse
 
ericyoung profile image
Eric Young • Edited

for those of us newer to service workers, it would be cool to show an example of your "firebase-messaging-sw.js" file.
Also, how you're handling requesting the user permissions would be nice to see.

Collapse
 
m3h0w profile image
Michał Gacka

Sure. I don't remember where I got the code from to glue it together unfortunately but I appended it to the post so you can take a look if you'd like.

The gist.

Collapse
 
m3h0w profile image
Michał Gacka

Happy to help! ☀️