CODEWITHSUNDEEP
javascriptreactjsservice-worker
Sumit
Sumit

Reputation: 686

Not getting service worker with create-react-app

lately, I have create two react application and in both of them the service worker is not present instead a new file is generated i.e 'reportWebVitals.js'. Here is my folder structure of src after creating new app. File Structure

Also, if we check on running the app, the browser says that 'No matching service worker detected'

Upvotes: 28

Views: 25797

Answers (6)

Kamen Kanchev
Kamen Kanchev

Reputation: 49

When migrating for a full-stack app make sure you do all the steps from "bukso" plus:

  • Add your serviceWorkerRegistration.js file to the root of src, just like the service-worker.js
  • Build your full-stack app, install your static server with "npm install --global serve"
  • Go to the client-side directory and run your server on the statically created build folder with "serve -s build"

Upvotes: -1

DarkCoder
DarkCoder

Reputation: 113

Another workaround if you have an already exiting react project without the template:

Go to your index.html file in public folder and add a <script> tag there and you can register the service worker from your <script> tag in index.html using:

if ("serviceWorker" in navigator) {
    navigator.serviceWorker.register("/serviceworker.js")
        .then(e => console.log("Service worker registered", e))
        .catch(e => console.log("service worker failed", e));
}

this way you can cache your public icon files and images.

Upvotes: 2

Aakash Tiwari
Aakash Tiwari

Reputation: 81

you need to run this command

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

instead of

npx create-react-app your-app-name

Upvotes: 1

Aman Gupta
Aman Gupta

Reputation: 45

run this command "npx create-react-app your-app-name --template cra-template-pwa" instead of "npx create-react-app your-app-name"

Upvotes: 1

bukso
bukso

Reputation: 1366

If you have already existing project and you want to migrate to the new versions of CRA, you can follow this steps:

1 Create somewhere on your computer a new CRA with the service worker template:

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

2 Copy the service-worker.js from the new created app into your src directory

3 Copy the "workbox-*" dependencies from the package.json into your package.json dependencies

4 (Optional) If you want web-vitals, copy the web-vitals dependency from package.json into your package.json

and don't forget to run again 'yarn install' or 'npm install'

Thats it

Upvotes: 26

Sumit
Sumit

Reputation: 686

Thanks @jonrsharpe So, CRA does not give support for service worker directly with default installation command as developer may not be making the application as PWA. So, they decided to keep it optional. Like me, if you anyone else want to install service worker while creating a new app, Prefer:

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

instead of default npx create-react-app my-app. enter image description here Hence, for more yo can refer to https://create-react-app.dev/docs/making-a-progressive-web-app/

Upvotes: 32

Related Questions