CODEWITHSUNDEEP
reactjsservice-worker
halleK7
halleK7

Reputation: 191

serviceWorker missing from ReactApp

Hi All I realized just recently when CRA(npx create-react-app myapp) , serviceWorker is missing from src folder and instead I noticed reportWebVitals().Is there some update from React that got ride of serviceWorker and replaced it with reportWebVitals ? Or there it is something I am not doing correctly? pls lmk. thank you

Upvotes: 19

Views: 11946

Answers (3)

Nithin Sai
Nithin Sai

Reputation: 1013

A bit late, but if you want to get the service worker opt-in, try

npx create-react-app my-app --template cra-template-pwa

With typescript,

npx create-react-app my-app --template cra-template-pwa-typescript

Source.

The production build has all the tools necessary to generate a first-class Progressive Web App, but the offline/cache-first behavior is opt-in only.

Starting with Create React App 4, you can add a src/service-worker.js file to your project to use the built-in support for Workbox's InjectManifest plugin, which will compile your service worker and inject into it a list of URLs to precache.

If you start a new project using one of the PWA custom templates, you'll get a src/service-worker.js file that serves as a good starting point for an offline-first service worker.

Upvotes: 7

VIshal Jain
VIshal Jain

Reputation: 622

Yes, this is an update after CRAv4 and React 17. Create-React-App’s (CRA) boilerplate now comes set up to record those measurements out of the box. If you want to see the values right now, checkout your index.js and pass console.log into the reportWebVitals function.

enter image description here

In an update, they switched from Service worker to the Workbox InjectManifest plugin and moved the PWA templates into their own repository. For more, you can refer to this release doc https://github.com/facebook/create-react-app/releases/tag/v4.0.0

Upvotes: 12

Adrián Guillen
Adrián Guillen

Reputation: 81

I have the same problem here! I don’t know if I did something wrong. But definitely seems like create-react-app has changed the way that manage service worker.

I found in the create-react-app GitHub this a workaround:

https://github.com/facebook/create-react-app/issues/10032

Upvotes: 8

Related Questions