I am new about react and I am following different tutorials trying to understand fundamentals. I'm using the v17 of react.

In those tutorials, I saw a file in the folder structure named serviceWorker.js that is used for making a progressive web app.

I generated my project with npx but in my folder structure, I can't find this file. Is it a bug? or is it something deprecated? or do I have to add it manually?

I am new about react and I am following different tutorials trying to understand fundamentals. I'm using the v17 of react.

In those tutorials, I saw a file in the folder structure named serviceWorker.js that is used for making a progressive web app.

I generated my project with npx but in my folder structure, I can't find this file. Is it a bug? or is it something deprecated? or do I have to add it manually?

• javascript
• reactjs

• If you've used npx create-react-app, it should be present in the src/ folder. Can you maybe add a screenshot of your directory structure? – CerebralFart Commented Nov 26, 2020 at 13:25
• 4 @CerebralFart the file is no longer generated since version 4. it is now called reportWebVitals – azium Commented Nov 26, 2020 at 13:26
• @azium, I didn't know that, thanks for the correction! – CerebralFart Commented Nov 26, 2020 at 13:27
• 1 also you can create new project from cra template npx create-react-app my-app --template cra-template-pwa, you'll get this file – Igor Alemasow Commented Nov 26, 2020 at 15:16
• Thank you for the answers!! – LucaT Commented Nov 26, 2020 at 16:37

3 Answers 3

I ran into the same issue, I expected to find this in my index.js:

import * as serviceWorker from './serviceWorker';
serviceWorker.unregister();

I looked again at my index.js to see what create-react-app had configured and found:

import reportWebVitals from './reportWebVitals';
reportWebVitals();

This has replace serviceWorker in version 4 of CRA October 2020.

From CRA 4 you can either opt in by using cra-template-pwa or by creating your own src/service-worker.js file.

But seems you only need to do so if you want to opt-in for the offline/cache-first behavior. The rest of PWA of tools are included in CRA.

It is all explained in https://create-react-app.dev/docs/making-a-progressive-web-app

The way I solved it was by creating the project like this:

$npx create-react-app name-pwa --template cra-template-pwa

and in the file structure you will find the file service-worker.js and serviceWorkerRegistration.js

and now in your index.js just change unregister by register:

serviceWorkerRegistration.register();