注册时出现ServiceWorker MIME类型错误('text/html')(反应) [英] ServiceWorker MIME Type Error ('text/html') on register (React)
问题描述
当前行为:
由于以下错误，服务工作者未注册
预期的行为:
服务人员注册
详细信息
发布为github问题:
复制步骤:
在React中注册服务工作者(从注销到注册的更改，或者将SW代码直接放置在index.html中，或者使用更简单的SW.在dev或build react应用中运行时，所有这些都会导致相同的错误.)
SW示例:
导出功能寄存器(){if(导航器中的"serviceWorker"){navigator.serviceWorker.register("./sw.js").then(function(registration){//成功注册console.log(万岁.注册成功，范围是:"，登记范围);}).catch(function(error){//注册失败，将不会安装服务人员console.log(糟糕.服务人员注册失败，错误:"，错误);});}} 此外，当使用来自以下版本的默认软件时， 使用上面的代码示例将在以下情况下返回index.html(默认404，
有没有一种方法可以将标头(从 text/html 更改为 application/javascript )专门用于 sw.js ，React中的浏览器?
我尝试遵循一些有关在React中注册自定义serviceWorkers的中篇文章，但无济于事...
在运行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/文件夹中，它将按预期提供.
The current behavior:
Service worker does not register due to the below error
The expected behavior:
Service worker registers
Details
Posted as a github issue: https://github.com/facebook/create-react-app/issues/8593
Service worker is giving the following error when attempting to register:
Error during service worker registration:
DOMException: Failed to register a ServiceWorker for scope ('http://localhost:3000/') with script ('http://localhost:3000/sw.js'):
The script has an unsupported MIME type ('text/html'). console. @ index.js:1
sw.js is showing in the sources tab of the Chrome dev tools, but not registering.
React version: 16.12.0
Error Message:
Error during service worker registration: DOMException:
Failed to register a ServiceWorker for scope ('http://localhost:3000/') with script ('http://localhost:3000/sw.js'):
The script has an unsupported MIME type ('text/html').
Failed ServiceWorker in Chrome's Inspect Tab:
Steps To Reproduce:
Register a Service Worker in React (change from unregister to register, or place SW code directly in index.html, or use a simpler SW. All cause the same error when running, in either dev or a build react app.)
SW Example:
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
);
});
}
}
Also, `http://localhost:3000/sw.js when using the default SW from React returns this HTML:
Using the code sample above returns index.html (default 404, http://localhost:3000/) when trying to access http://localhost:3000/sw.js
Suggested fixes:
Move sw.js to public folder, gives this error:
Is there a way to change the header (from text/html to application/javascript) for specifically sw.js when served to the browser in React?
I tried following some Medium articles on registering custom serviceWorkers in React, to no avail...
When running webpack dev server, it renders default index.html for missing resource.
If you use your browser to load http://localhost:3000/sw.js, you will actually see a rendered react app (started by the index.html). That's why the mime type is html, not javascript.
This fallback to index.html is designed to support SPA with front-end routes. For example /product/123/reviews has no such html file in backend, the JS SPA app takes care of it in front-end.
Why your file is missing? I guess you created that file in the root folder of your project.
Webpack dev server doesn't serve from that root folder.
Move your sw.js into public/ folder of your project, it will be served up as expected.
这篇关于注册时出现ServiceWorker MIME类型错误('text/html')(反应)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
