注册时的 ServiceWorker MIME 类型错误 ('text/html') (React)

Question

目前的行为：

由于以下错误，Service Worker 未注册

预期行为：

服务工作者注册

---

细节

作为 github 问题发布：https : //github.com/facebook/create-react-app/issues/8593

Service Worker 在尝试注册时出现以下错误：

Service Worker 注册期间出错：
DOMException：无法使用脚本 (' http://localhost:3000/sw.js ')为范围 (' http://localhost:3000/ ')注册 ServiceWorker ： 该脚本具有不受支持的MIME 类型 ('text/html')。安慰。@ index.js:1

sw.js 显示在 Chrome 开发工具的源选项卡中，但未注册。

反应版本：16.12.0

错误信息：

Service Worker 注册期间出错：DOMException：
无法使用脚本 (' http://localhost:3000/sw.js ')为范围 (' http://localhost:3000/ ')注册 ServiceWorker ： 该脚本具有不受支持的MIME 类型 ('text/html')。

Chrome 的检查选项卡中的 ServiceWorker 失败：

---

重现步骤：

在 React 中注册 Service Worker（从取消注册更改为注册，或者将 SW 代码直接放在 index.html 中，或者使用更简单的 SW。在运行时都会导致相同的错误，无论是在开发还是构建 react 应用程序中。）

软件示例：

export function register() {
  if ("serviceWorker" in navigator) {
    navigator.serviceWorker
      .register("./sw.js")
      .then(function(registration) {
        // Successful registration
        console.log(
          "Hooray. Registration successful, scope is:",
          registration.scope
        );
      })
      .catch(function(error) {
        // Failed registration, service worker won’t be installed
        console.log(
          "Whoops. Service worker registration failed, error:",
          error
        );
      });
  }
}

---

此外，` http://localhost:3000/sw.js在使用 React 的默认 SW 时返回此 HTML：

使用上面的代码示例在尝试访问http://localhost:3000/sw.js时返回 index.html（默认 404, http://localhost:3000/）

---

建议修复：

移至sw.js公用文件夹，出现此错误：

---

有没有办法在 React 中专门为浏览器提供标题（从text/html到application/javascript）sw.js？

我尝试了一些关于在 React 中注册自定义 serviceWorkers 的 Medium 文章，但无济于事......

Answer 1

当运行 webpack 开发服务器时，它会为缺少的资源呈现默认的 index.html。

如果您使用浏览器加载http://localhost:3000/sw.js，您实际上会看到一个渲染的 React 应用程序（由 index.html 启动）。这就是为什么 mime 类型是 html，而不是 javascript。

此后备到index.html旨在支持具有前端路由的SPA。例如，/product/123/reviews后端没有这样的 html 文件，JS SPA 应用程序会在前端处理它。

为什么你的文件丢失了？我猜您在项目的根文件夹中创建了该文件。

Webpack 开发服务器不从该根文件夹提供服务。

将您的文件sw.js移至public/项目的文件夹中，它将按预期提供。