CODEWITHSUNDEEP
reactjswebpackecmascript-6service-workercreate-react-app
Dude
Dude

Reputation: 1045

adding a custom service worker to create-react-app

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 ?

Upvotes: 5

Views: 4261

Answers (2)

Michał Gacka
Michał Gacka

Reputation: 3073

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.

Upvotes: 0

Moris
Moris

Reputation: 3073

If you would prefer disable the built in service-worker prior to your initial production deployment, then remove the call to serviceWorkerRegistration.register() from src/index.js and add your own service worker.

If your site/app has already been in production then swap it out for serviceWorkerRegistration.unregister(). After the user visits your page that has serviceWorkerRegistration.unregister(), the service worker will be uninstalled and it might take up to 24 hours for the cache to be invalidated (depending on how the service worker is served)

The other option would be to eject and configure their built in solution.

Upvotes: 2

Related Questions