CODEWITHSUNDEEP
reactjsfirebasecreate-react-appprogressive-web-apps
Himansa Eshan
Himansa Eshan

Reputation: 335

no service-worker.js file after npm run build in react

After running npm run dev no service-worker.js file in build folder.

I'm also changed serviceWorker.register() in index.js
I'm also using firebase in this project.

Here is package.json file

{
  "name": "movie",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "axios": "^0.20.0",
    "email-verifier": "^0.4.1",
    "firebase": "^7.24.0",
    "history": "^5.0.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-lottie": "^1.2.3",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^4.0.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@types/react-router-dom": "^5.1.6"
  }
}

After deploy in firebase ,I got this error.

serviceWorker.js:97 Error during service worker registration: DOMException: Failed to register a ServiceWorker for scope ('https://.web.app/') with script ('https://*.web.app/service-worker.js'): The script has an unsupported MIME type ('text/html').

enter image description here

Upvotes: 6

Views: 4955

Answers (2)

Subhrajyoti Modak
Subhrajyoti Modak

Reputation: 11

The serviceWorker.js provided by Create React App is only there to register a service worker file ( say sw.js ). Try the following steps and see if it works:

  1. Create a sw.js file (this file will hold the logic for your service worker) inside the 'public' folder.

  2. Open the serviceWorker.js provided by Create React App and go the definition of the function register.

  3. Follow the code, and go to the line where it registers the service worker. It might be along the lines of

    if ("serviceWorker" in navigator) { navigator.serviceWorker.register('/path/to/sw.js').then() }

  4. Here change the /path/to/sw.js to the file you created in the 'public' directory as /sw.js. This corresponds to hostname.com/sw.js

Do this and the service worker might get registered. Things become more complicated from here.

GlHf

Upvotes: 1

Jonatas Nardi
Jonatas Nardi

Reputation: 66

I had the same problem, and solved following these steps in GitHub issue:

It happened after create-react-app upgraded to version 4.x.

The "fix" was to create a dummy app:

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

And copy over the relevant code:

reportWebVitals.ts

service-worker.ts

serviceWorkerRegistration.ts

And don't forget the initialization code in index.tsx.

Upvotes: 4

Related Questions