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, Commented May 14, 2019 at 4:19
@akrion Yes I followed the steps on that page, its just changing unregister() to register() unless I'm missing something? — Adam
– Adam, Commented May 14, 2019 at 15:57
@AkshayMulgavkar my register service work file is the exact same that CRA spits out. I have not touched it at all — Adam
– Adam, Commented May 14, 2019 at 15:58
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
– rehman_00001, Commented Dec 13, 2019 at 14:20

Arafat Ahmed · Accepted Answer · 2020-12-07 11:52:31Z

8

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

edited Dec 7, 2020 at 11:52

answered Apr 12, 2020 at 22:15

Arafat Ahmed

1443 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

SherylHohman Over a year ago

NP. Question: is the code in step 4 missing a closing backtick?

Arafat Ahmed Over a year ago

i think the first backtick was misleading then I remove it

Mikey Over a year ago

Why would I add workbox manually? I thought it's built into CRA

Jacob David C. Cunningham Over a year ago

Oh man thanks so much for this, I used to expect create-react-app to just have PWA by default... was surprised when my "PWA" wasn't actually working. In my case I was partially copying an old project I had that was a PWA so I already added in the serviceWorker.js file/import/registered it to index.js then applied steps above.

Arafat Ahmed Over a year ago

@JacobDavidC.Cunningham read more <medium.com/@arafatahmedtanimcsedu57/…>

|

Lanil Marasinghe · Accepted Answer · 2019-12-15 14:55:50Z

7

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.

answered Dec 15, 2019 at 14:55

Lanil Marasinghe

2,9152 gold badges27 silver badges25 bronze badges

5 Comments

Nermin Over a year ago

How come I need to build the app and run it in production mode for the service worker to work? Shouldn't it also work with react-scripts start?

Lanil Marasinghe Over a year ago

react-scripts start won't start Service Worker. The service Worker requires an HTTPS connection to work. First, build the application after doing the above changes using npm run build. Then deploy / host to a HTTPS origin. You can see SW working.

Jeremy Rajan Over a year ago

thats correct, its needs https. So deploy it somewhere first :)

singpolyma Over a year ago

service worker should work from localhost fine, but for some reason the react dev server doesn't serve the file at all

Verain_the_great Over a year ago

Can we use it in dev environment? Instead of building production build

Josh · Accepted Answer · 2020-02-06 21:12:31Z

3

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

Ensure you are viewing the application on either a "localhost" or an HTTPS url, anything else will not work.
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).

answered Feb 6, 2020 at 21:12

Josh

96910 silver badges19 bronze badges

1 Comment

Yor Over a year ago

This actually works for me. I am using the ip address instead of the localhost thats why its not working.

Nermin · Accepted Answer · 2020-08-11 09:33:31Z

0

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.

answered Aug 11, 2020 at 9:33

Nermin

1,14011 silver badges30 bronze badges

Collectives™ on Stack Overflow

Create-react-app service worker not functioning

4 Answers 4

6 Comments

5 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

5 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related