Menu
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
488
A service worker is generated by default when we use the create-react-app to create a new React project. We will find the serviceWorker. js file in the src folder of the project.
A service worker is a script that the client (your browser) runs in the background separate from the web page. Operating in the background separate from the web page enables you to use features that don't actually require a web page or user interaction to trigger — like a push notification or background sync.
In React, service workers are automatically added when you create your application through the create-react-app command, through SWPrecacheWebpackPlugin. Service workers ensure that the network is not a bottleneck to serve new requests.
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: Show activity on this post. 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.
The file is missing. This causes a problem with apps which are upgrading from prior CRA versions, as they continue to reference the cached service worker (so the web app continues to cache old assets). Just run the commands above.
At this stage, your service worker is not registered, so you will have to first register it before utilizing it in your application. To register the service worker, navigate to the src/index.js file, and look for the following line: Change it to the following line.
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
109
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
34
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.
37
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
