npm run build in react 后没有 service-worker.js 文件答案

【问题标题】：no service-worker.js file after npm run build in reactnpm run build in react 后没有 service-worker.js 文件
【发布时间】：2021-03-04 12:46:28
【问题描述】：

运行npm run dev 后构建文件夹中没有 service-worker.js 文件。

我也在 index.js 中更改了 serviceWorker.register()
我也在这个项目中使用 firebase。

这是 package.json 文件

{
  "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"
  }
}

在 firebase 中部署后，出现此错误。

serviceWorker.js:97 Service Worker 注册期间出错：DOMException: 无法使用脚本 ('https://) 为范围 ('https://.web.app/') 注册 ServiceWorker *.web.app/service-worker.js'）：该脚本具有不受支持的 MIME 类型（'text/html'）。

【问题讨论】：

这里有同样的问题。我尝试了npm run build，所有生产文件都在构建文件夹中创建。但是没有服务人员的迹象......
在您的问题中，我在项目结构中找不到服务工作者，但错误实际上在 service-worker.js 中。你是如何获得这个文件的？是自己制作的还是由构建过程提供的？它在哪里？。感谢您的 cmets
似乎我使用了一个过时的 npm 命令或其他东西。使用create-react-app react-pwa，服务工作丢失，无法完成。使用npx create-react-app my-app --template pwa-typescript 并遵循here 的说明，一切正常。

标签： reactjs firebase create-react-app progressive-web-apps

【解决方案1】：

我遇到了同样的问题，按照 GitHub 问题中的这些步骤解决了：

create-react-app 升级到版本 4.x 后发生。

“修复”是创建一个虚拟应用程序：

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

并复制相关代码：

reportWebVitals.ts

service-worker.ts

serviceWorkerRegistration.ts

并且不要忘记 index.tsx 中的初始化代码。

【讨论】：

感谢您的回答。能否请您提供 GitHub 问题链接。
@himansaeshan 是的，这里是：github.com/facebook/create-react-app/issues/…

【解决方案2】：

Create React App 提供的 serviceWorker.js 只是用来注册一个 service worker 文件（比如 sw.js ）。请尝试以下步骤，看看是否有效：

在“public”文件夹中创建一个 sw.js 文件（该文件将保存您的 service worker 的逻辑）。
打开Create React App提供的serviceWorker.js，进入函数寄存器的定义。
按照代码，转到注册服务工作者的行。可能是这样的

if ("serviceWorker" in navigator) { navigator.serviceWorker.register('/path/to/sw.js').then() }
这里将/path/to/sw.js 更改为您在“公共”目录中创建的文件/sw.js。这对应于hostname.com/sw.js

这样做，服务工作者可能会被注册。事情从这里开始变得更加复杂。

GlHf

【讨论】：