服务人员注册错误：不支持的MIME类型（'text / html'）

Question

我正在将Express服务器与create-react-app一起使用。

create-react-app有一个预先配置的ServiceWorker，用于缓存本地资产（https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#making-a-progressive-web -app）。

尝试在服务器上发布时遇到的问题是service-worker.js文件可用，但是尝试注册该文件时浏览器控制台出现错误。

在Firefox上，出现以下错误：

服务人员注册期间发生错误：

类型错误：在ServiceWorker脚本https://my-domain.com/service-worker.js的范围https://my-domain.com/安装过程中遇到错误。

在Chrome上，我得到了更具描述性的错误：

注册Service Worker时出错：DOMException：无法注册ServiceWorker：脚本具有不受支持的MIME类型（'text / html'）。

果然，如果我在开发人员工具的“网络”选项卡中查找并搜索该service-worker.js文件，则可以看到该文件在HTTP标头中具有错误的MIME类型。

但是，我不明白为什么它的MIME类型错误？

Answer 1

更换：

'/service-worker.js'

和：

'./service-worker.js'  // Add a dot before slash.

解决了我的类似问题。

_{(在navigator.serviceWorker.register('/service-worker.js'))}

Answer 2

我认为 service worker 文件不存在，http://localhost:3000/service-worker.js所以服务器返回 index.html 代替。然后注册函数不知道如何处理 index.html 文件并告诉您 MIME 类型不正确。

一个快速的解决方法是将 service-worker.js 文件复制到public文件夹中，这样当你点击时你就http://localhost:3000/service-worker.js可以在浏览器中看到该文件。

请记住转到 ChromeDev > Applications > ServiceWorkers 并点击取消订阅。为了删除错误的。记住还要禁用缓存

Answer 3

在我的Express服务器应用程序中，我有一个通配符（星号/ *）路由，它重定向到index.html：

// Load React App
// Serve HTML file for production
if (env.name === "production") {
  app.get("*", function response(req, res) {
    res.sendFile(path.join(__dirname, "public", "index.html"));
  });
}

这是一种非常常见的设计模式。但是，这意味着对未知文本文件的任何请求最初都会重定向到index.html，因此以MIME类型返回"text/html"，即使它实际上是JavaScript或SVG或其他某种纯文本文件。

我发现的解决方案是在通配符路由service-worker.js 之前添加特定的路由：

app.get("/service-worker.js", (req, res) => {
  res.sendFile(path.resolve(__dirname, "public", "service-worker.js"));
});
app.get("*", function response(req, res) {
  res.sendFile(path.join(__dirname, "public", "index.html"));
});

现在，当浏览器查找时service-worker.js，Express将以正确的MIME类型返回它。

（请注意，如果您尝试service-worker.js在通配符后添加路由，则将无法使用，因为通配符路由将被覆盖。）

Answer 4

ServiceWorker 支持的 MIME 类型是“text/javascript”、application/javascript 和 application/x-javascript。转到您的服务器文件并设置

    response.writeHead(201, {
        'Content-Type': 'application/javascript'
    });

Answer 5

如果您正在使用 NodeJS，serviceWorker 文件应放置在 public 文件夹中。如果您使用 Webpack 将 serviceWorker 导出到公共，则需要使用“copy-webpack-plugin”。