Service Worker注册失败主因是环境或配置问题：必须HTTPS或localhost、sw.js路径404或MIME类型错误、注册时机过早或未捕获Promise拒绝、scope未正确设置、install中caches.addAll()原子性失败或使用不支持API。
Service Worker 注册失败，通常不是代码写错了，而是环境或配置没到位。浏览器对注册条件非常严格，稍有偏差就会静默失败或直接报错。排查重点不在逻辑，而在“能不能注册”这个前提。
检查运行环境是否合规
浏览器只允许在安全上下文中注册 Service Worker：必须是 HTTPS 协议，或本地开发时使用 localhost（http://localhost 或 http://127.0.0.1 都可以）。file:// 协议、普通 http://域名（比如 http://example.com）一律拒绝。
- 打开 DevTools 控制台，看是否有类似
The URL protocol of the current page is not supported的报错 - 确认当前地址栏显示的是
https://开头，或明确是localhost - 如果用 Nginx/Apache，检查是否启用了 HTTPS，且证书有效（自签名证书在部分浏览器中可能被拦截）
验证脚本路径与响应头
sw.js 文件必须和页面同源，且服务器返回的 MIME 类型必须是 text/javascript 或 application/javascript。常见静默失败就出在这里。
- 在 DevTools 的 Network 面板中单独请求
sw.js，确认状态码是200，不是404或403 - 查看 Response Headers，确认
Content-Type值为application/javascript（Nginx 默认可能返回text/plain，需手动配置） - 确保路径不跨目录向上跳转，例如页面在
/app/下，不能注册../sw.js；推荐统一放在根目录，如/sw.js
确认注册时机与调用方式
注册必须发生在页面上下文有效期内，且要处理 Promise 拒绝情况。过早（DOM 未就绪）、过晚（页面已卸载）或忽略错误捕获，都会导致失败无感知。
立即学习“前端免费学习笔记（深入）”；
- 把
navigator.serviceWorker.register()放在DOMContentLoaded或window.addEventListener('load', ...)中执行 - 务必加上
.catch()，例如：
navigator.serviceWorker.register('/sw.js').catch(err => console.error('SW registration failed:', err)); - 注册前先判断支持性：
if ('serviceWorker' in navigator)，避免在 IE 或旧版 Safari 中报错 - 显式设置
scope参数，如{ scope: '/' }，确保作用域覆盖整个站点（特别是当 sw.js 不在根目录时）
排查 sw.js 文件自身问题
注册成功 ≠ 安装成功。控制台看到 Installing 卡住、立刻变 Redundant，或者没有触发 install 事件，基本是脚本内部出错。
- 检查
self.addEventListener('install', ...)中是否正确调用了event.waitUntil()，所有异步操作（如caches.open()、fetch()）都必须包裹进去 - 确认
caches.addAll([...])里列出的资源路径全部可访问，任一 404 都会导致整个 install 失败 - 禁止在 sw.js 中使用
alert、localStorage、document等主线程 API，会直接终止执行 - 用 Chrome 的
chrome://serviceworker-internals页面查看真实状态，配合 Application → Service Workers 面板启用 Update on reload 和 Offline 模式调试
