注册时的 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（从 unregister 改为 register，或者将 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移动到 public 文件夹，出现此错误：

---

当在 React 中提供给浏览器时，有没有办法更改专门用于sw.js的标题（从text/html到application/javascript ）？

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

Answer 1

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

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

这种对 index.html 的回退旨在通过前端路由支持 SPA。 例如/product/123/reviews在后端没有这样的 html 文件，JS SPA 应用程序在前端处理它。

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

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

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

Answer 2

这可能是这个的副本61776698

主要认为您需要知道：在公共文件夹中创建 servieWorker 以便将其视为 .js 文件而不是 text/html 文件。

然后在您的 index.js 中注册该服务

第一步，创建public/sw.js

self.addEventListener('message', async (event) => {
  console.log('Got message in the service worker', event);
});

第二步，创建src/sw-register.js

export default function LocalServiceWorkerRegister() {
  const swPath = `${process.env.PUBLIC_URL}/sw-build.js`;
  if ('serviceWorker' in navigator && process.env.NODE_ENV !== 'production') {
    window.addEventListener('load', function () {
      navigator.serviceWorker.register(swPath).then(registration => {
        console.log('Service worker registered');
      });
    });
  }
}

第三步，在src/index.js 中，添加这两行

import LocalServiceWorkerRegister from './sw-register';
...
LocalServiceWorkerRegister();

您可以根据需要更改一些内容，但是通过这些更改，您应该能够在 create-react-app 应用程序中使用自定义服务工作者

Answer 3

您可以在服务器端编写代码来处理 sw.js 文件。 下面是拦截 sw.js 文件请求并从文件夹中读取并发送回浏览器的 nodejs 代码。

app.get('/sw.js', (req, res) => {
  if (__DEVELOPMENT__) {
    http.get('http://localhost:4001/static/build/sw.js', (r) => {
      res.set({
        'Content-Type': 'text/javascript',
        'Cache-Control': 'max-age=0, no-cache, no-store, must-revalidate'
      });
      r.setEncoding('utf8');
      r.pipe(res);
    }).on('error', (e) => {
      console.error(`Error in sending sw.js in dev mode : ${e.message}`);
    });
  } else {
    res.setHeader('Cache-Control', 'max-age=0, no-cache, no-store, must-revalidate');
    res.sendFile('sw.js', { root: path.join(__ROOT_DIRECTORY__, 'assets', 'build') }); // eslint-disable-line no-undef
  }
});