React TypeScript本地注册Service Worker遇MIME类型错误求助

问题根源 #

你碰到的错误核心是两个问题：

• 直接注册.ts文件：浏览器无法直接解析TypeScript代码，必须先编译成JavaScript文件才能被识别。
• 文件路径错误：服务器找不到你指定的./service-worker.ts，返回了404错误页面（MIME类型为text/html），导致Service Worker注册失败。

解决步骤 #

1. 处理Service Worker文件类型 #

• 将service-worker.ts编译为service-worker.js，确保编译后的文件输出到项目可被服务器访问的目录（通常是项目根目录）。
• 注册时指向编译后的.js文件，而非.ts源文件。

2. 修正注册路径 #

根据你的文件结构，调整注册路径为绝对路径（避免相对路径导致的寻址错误）：

export function register() {
  navigator.serviceWorker
    .register("/service-worker.js")
    .then(() => console.log("注册成功"))
    .catch((err) => alert(`注册失败：${err.message}`));
}

3. 确保服务器正确返回文件 #

• 如果你用Create React App开发，直接使用官方提供的PWA模板（cra-template-pwa）即可，它会自动处理Service Worker的注册与编译，无需手动写注册逻辑。
• 自定义服务器的话，要配置服务器返回service-worker.js时，设置正确的MIME类型为application/javascript，避免返回HTML页面。

额外注意 #

• Service Worker允许在localhost环境运行，但线上必须使用HTTPS。
• 注册路径优先用绝对路径（以/开头），减少路径寻址出错的概率。

内容的提问来源于stack exchange，提问作者Richardson