CODEWITHSUNDEEP
reactjsservice-workercreate-react-app
Adam
Adam

Reputation: 219

Create-react-app service worker not functioning

I am working on a React progressive web app built from create-react-app, and am attempting to register a service worker.

However, after following the documentation on create-react-app which merely says to change serviceWorker.unregister() to serviceWorker.register(), doesn't register anything.

Even from a fresh create-react-app project this still doesn't work.

The documentation seems very lean for this topic, is there anything else I need to do to register the default service worker generated by create-react-app?

Upvotes: 15

Views: 12822

Answers (4)

Arafat Ahmed
Arafat Ahmed

Reputation: 144

step 1 :

npm i workbox-cli

step 2 : create workbox-config.js file in your project folder

step 3 : add

module.exports = {
  globDirectory: './public/',
  globPatterns: ['\*\*/\*.{html,js}'],
  swDest: './public/sw.js',
  clientsClaim: true,
  skipWaiting: true
};

step 4: update your serviceWorker.js file with

const swUrl = `${process.env.PUBLIC_URL}/sw.js`

step 5: update your package.json file

"scripts": {
  // ...    
  "build": " workbox generateSW && react-scripts build",
  // ...
}

Then build and serve.

read more https://medium.com/@arafatahmedtanimcsedu57/progressive-web-apps-with-create-react-app-ca0c955ab798

Upvotes: 8

Nermin
Nermin

Reputation: 935

I had the same problem while I was tinkering with some service workers simultaneously, and even though I created a new create-react-app, changed unregister to register, it still didn't work. It was first when I restarted chrome, built my app, and served it with serve that it actually started working.

I also removed the if production condition to enable it everywhere.

Upvotes: 0

Josh
Josh

Reputation: 949

If you are not seeing your service worker active in the applications tab of dev tools then you can try the following:

  1. Ensure you are viewing the application on either a "localhost" or an HTTPS url, anything else will not work.
  2. Try running the build in production mode (instead of dev) by running this in your console:

npm run prod

Then if you want to run a dev server you can follow that with:

serve -s build

and access your website on the URL specified in the response (likely localhost:5000).

Upvotes: 3

Lanil Marasinghe
Lanil Marasinghe

Reputation: 2915

If you bootstrapped your app using create-react-app, then go index.js and change the line serviceWorker.unregister() to serviceWorker.register()

Then build the app using npm run build and run the app from build directory using an HTTP server like serve or http-server.

Open DevTools and got to Application tab, you'll see your service worker running.

Upvotes: 7

Related Questions