Create-react-app service worker not functioning

Question

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?

Did you read/follow all in here: facebook.github.io/create-react-app/docs/… — Akrion
@akrion Yes I followed the steps on that page, its just changing unregister() to register() unless I'm missing something? — Adam
@AkshayMulgavkar my register service work file is the exact same that CRA spits out. I have not touched it at all — Adam
I faced the same problem on newly created-react-app. But not sure what happened, I closed and reopened the chrome instance and serviceWorker got registered — rehman_00001

Arafat Ahmed Arafat Ahmed · Accepted Answer · 2020-04-12T22:15:10

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

Create-react-app service worker not functioning

4 Answers