Service Worker注册错误：不支持的MIME类型（'text/html'）

Question

我正在使用带有express服务器的create react应用程序。

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上，我遇到了以下错误：

服务人员注册期间出错：

TypeError： ServiceWorker脚本在https://my-domain.com/service-worker.js的作用域https://my-domain.com/在安装过程中遇到错误。

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

服务工作者注册期间出错：DomeException:注册服务工作者失败：脚本具有不受支持的MIME类型（“text/html”）。

当然，如果我查看开发人员工具的网络选项卡并搜索服务人员。js文件，我可以看到它在HTTP头中有错误的MIME类型。

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

Answer 1

我认为服务人员文件在http://localhost:3000/service-工人。js因此服务器正在返回索引。而不是html。然后，注册函数不知道如何处理索引。html文件，并告诉您MIME类型不正确。

一个快速解决方法是复制服务人员。将js文件保存到公共文件夹中，以便在点击http://localhost:3000/service-工人。js您可以在浏览器中看到该文件。

记得去ChromeDev

Answer 2

替换：

'/service-worker.js'

与：

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

解决了我类似的问题。

_{（innavigator.serviceWorker.register（'/service-worker.js'））}

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，因此以"text/html"的MIME类型返回，即使它实际上是JavaScript或SVG或其他类型的的明文文件。

我找到的解决方案是为服务人员添加特定的路由。通配符路由之前的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"));
});

现在，当浏览器查找服务人员时。js，Express将返回正确的MIME类型。

（请注意，如果您尝试在通配符之后添加service-worker.js路由，它将不起作用，因为通配符路由将被覆盖。）