adding a custom service worker to create-react-app

user_3749047 0
Viewed 3960

Per default there is a service worker script in a freshcreate-react-app project included. I dont need that default registerServiceWorker.js and the default service-worker.js (hidden and available in build) because I want to add my own Service Worker. I would like to create my own service worker code with es6 syntax also, so just adding a 'sw.js' into the public folder and register it in my index.html is not the best option for me. How can I build some custom sw-code with ES6 create-react-app ?

service-worker create-react-app webpack reactjs ecmascript-6
2 Answers

Ditch all the other ideas and go for the cra-append-sw. It will save you a lot of time and pain.

It's as simple as installing the package, creating the service worker file in your main folder, and modifying your start and build commands in package.json file like this:

"start": "cra-append-sw --mode dev --env ./.env ./custom-sw.js && react-scripts start",
"build": "cra-append-sw --env ./.env ./custom-sw.js && react-scripts build",

And then you make sure to register the separate service worker in dev mode:

if ('serviceWorker' in navigator) {
  console.log('Trying to register custom sw');
  navigator.serviceWorker
    .register('./firebase-messaging-sw.js')
    .then(function (registration) {
      console.log('Registration successful, scope is:', registration.scope);
    })
    .catch(function (err) {
      console.log('Service worker registration failed, error:', err);
    });
}

If like me you need access to environment variables in the service worker to initialize the firebase messaging module, this is the only simple option that doesn't require ejecting CRA.

I decided to post this answer because I myself overlooked the comments on the other answer and lost time unnecessarily looking for this solution.

user_63319980
Related