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
3 Answers
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.
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
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:
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
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.
Related