注册 ServiceWorker 失败：脚本具有不受支持的 MIME 类型 ('text/html')
Posted
技术标签:
【中文标题】注册 ServiceWorker 失败：脚本具有不受支持的 MIME 类型 (\'text/html\')【英文标题】：Failed to register a ServiceWorker: The script has an unsupported MIME type ('text/html')注册 ServiceWorker 失败：脚本具有不受支持的 MIME 类型 ('text/html') 【发布时间】：2019-02-15 12:51:03 【问题描述】：脚本具有不受支持的 MIME 类型 ('text/html')。加载资源失败：net::ERR_INSECURE_RESPONSE (index):1 Uncaught (in promise) DOMException: Failed to register a ServiceWorker: 该脚本具有不受支持的 MIME 类型（'text/html'）。
template.js 根文件的代码
export default ( markup, css ) =>
return `<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MERN Marketplace</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
a
text-decoration: none
</style>
<link rel="manifest" href="./manifest.json">
</head>
<body style="margin:0">
<div id="root">$markup</div>
<style id="jss-server-side">$css</style>
<script id="stripe-js" src="https://js.stripe.com/v3/" async></script>
<script type="text/javascript" src="/dist/bundle.js"></script>
<script>
if ('serviceWorker' in navigator)
navigator.serviceWorker.register('/sw.js').then(function()
console.log("Service Worker Registered");
);
</script>
</body>
</html>`;
;
【问题讨论】：
Service Worker 不能在 HTTP 站点上工作，即使是在本地，你必须使用 ngrok.com 之类的东西才能在 https 站点上进行本地测试 感谢您的评论，但我知道 HTTPS 要求有一个例外以促进本地开发：如果您通过localhost[:port] 或通过127.x.y.z[:port] 访问您的页面和服务工作者脚本，那么应该启用服务工作者，而无需任何进一步的操作。 这里有一个可能是问题的烦恼。如果返回 404，您仍然会收到 MIME 类型 ('text/html') 错误。刚刚花了一个小时来处理这个问题 :( 确保工作人员的路径相对于来源你编译的 js 的 html 文档进行解析。 【参考方案1】：根据我的个人经验，我只是确保 sw.js 文件与 index.html 位于同一文件夹中。
【讨论】：
以上是关于注册 ServiceWorker 失败：脚本具有不受支持的 MIME 类型 ('text/html')的主要内容，如果未能解决你的问题，请参考以下文章
Flutter 无法使用脚本为范围注册 ServiceWorker，该脚本具有不受支持的 MIME 类型
“未捕获（承诺）的DOMException：无法为范围注册ServiceWorker”-脚本资源位于重定向后面，不允许使用
将 Firebase FCM 添加到 reactjs 应用程序