rel="service-worker"是无效html属性，浏览器会忽略；service worker必须通过javascript调用navigator.serviceworker.register()注册，且需https环境、同源、顶层路径脚本。
rel="service-worker" 是无效的 HTML 属性值
rel="service-worker" 在标准 HTML 中不被识别，浏览器会忽略该 link 标签。Service Worker 的注册必须通过 JavaScript 显式调用 navigator.serviceWorker.register()，不能靠 link 标签“引入”或“预加载”。
- 浏览器不会因
<link rel="service-worker" href="sw.js">自动注册或安装 Service Worker - 这个写法常见于对 PWA 机制的误解，实际没有任何规范支持它（HTML Living Standard、W3C、WHATWG 均无此定义）
- 部分旧文档或博客可能误传该用法，但现代 Chrome/Firefox/Safari 均不响应
正确注册 Service Worker 的最小可行代码
注册必须发生在 HTTPS 环境（或 localhost），且脚本需与页面同源。典型写法如下：
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js')
.then(reg => console.log('SW registered:', reg.scope))
.catch(err => console.error('SW registration failed:', err));
});
}
-
sw.js必须是顶层路径（如/sw.js），否则 scope 受限；若放子目录（如/js/sw.js），scope 默认为/js/，无法控制根路径资源 - 注册时机建议放在
window.load或DOMContentLoaded后，避免阻塞首屏渲染 - 不要重复注册：多次调用
register()不会报错，但会触发更新检查，可能造成意外重装
为什么有人误用 rel="service-worker"
这个错误常源于混淆了两种不同机制：
-
rel="manifest"是合法的，用于关联 Web App Manifest：<link rel="manifest" href="/manifest.webmanifest"> -
rel="prefetch"、rel="preload"等是真实存在的资源提示，但它们不适用于 Service Worker 脚本 - Service Worker 不是“资源”，而是运行在独立线程的脚本控制器，必须由 JS 主动激活，无法被声明式引入
离线缓存真正起效的关键点
Service Worker 生效 ≠ 页面自动离线可用。以下环节缺一不可：
- 注册成功后，页面需重新加载一次（或等待当前 tab 关闭再打开），才能让 SW 控制该页面
-
sw.js中必须监听fetch事件并主动event.respondWith()返回缓存响应 - 缓存策略需显式实现（如用
caches.open()+cache.addAll()预缓存，或 fetch 时动态缓存） - 若
sw.js文件本身返回 404 或 MIME 类型错误（如服务器返回text/plain），注册会静默失败
Service Worker 的调试依赖 DevTools 的 Application → Service Workers 面板，而不是看 network 是否加载了 sw.js 文件——即使文件 200，注册失败也不会显示任何提示，必须查控制台错误或面板状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
