service worker注册失败主因是浏览器不支持或未启用https；本地开发仅localhost安全，ip或file://协议会静默失败；注册须在页面load事件中执行。
Service Worker注册失败的常见原因
浏览器不支持或页面未启用 HTTPS 是最常卡住的两个点。Chrome、Edge、Firefox 桌面版均支持，但 Safari 直到 15.4 才完整支持 cache.addAll() 和 navigationPreload；所有现代移动浏览器中，iOS Safari 仍不支持 skipWaiting() 的自动触发。
本地开发时，http://localhost 被视为安全上下文，可直接测试；但一旦换成本机 IP（如 http://192.168.1.100）或用 file:// 协议打开，注册会静默失败——控制台只显示 Failed to register a ServiceWorker，无进一步错误。
注册代码必须放在主页面的 JS 中，且不能延迟执行：
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));
});
}
缓存静态资源：用 cache.addAll() 还是 cache.put()
cache.addAll() 简洁但脆弱：只要列表中任一请求返回非 2xx 状态（比如 404、500 或跨域 CORS 失败），整个缓存操作就会被拒绝，不写入任何文件。适合构建期已知绝对稳定的资源路径（如打包后的 /static/js/main.a1b2c3.js）。
cache.put() 更可控，适合逐个处理、跳过失败项或动态生成响应：
- 对 HTML 页面，建议用
Response构造器返回 fallback 页面，避免白屏 - 对字体、图片等非关键资源，可捕获 fetch 错误后跳过缓存
- 需注意：传给
cache.put()的Request必须与后续fetch()的 URL 完全一致（含查询参数、大小写）
示例：缓存核心 CSS/JS，忽略 404 的图片
self.addEventListener('install', e => {
e.waitUntil(
caches.open('v1').then(cache =>
cache.addAll([
'/index.html',
'/style.css',
'/app.js'
]).catch(() => {}) // 不中断 install
)
);
});
拦截页面请求并返回缓存：为什么 fetch 事件里要检查 request.destination
不是所有 fetch 请求都该走缓存。比如 fetch('/api/user') 是 JSON 接口，若也返回缓存，用户就看不到最新数据；而 fetch('/logo.png') 是图片，应优先缓存。
request.destination 是区分用途的关键字段：
-
'document'→ 页面 HTML（主框架加载，必须处理，否则离线打不开） -
'script','style','image','font'→ 静态资源，可缓存 -
'json','empty'→ API 请求，通常绕过缓存或单独策略
漏判 destination 会导致：API 响应被缓存数小时、字体反复重载、甚至缓存了 POST 请求的响应（浏览器不允许）。
典型判断逻辑：
self.addEventListener('fetch', e => {
const { request } = e;
if (request.destination === 'document') {
e.respondWith(
fetch(request).catch(() => caches.match('/offline.html'))
);
} else if (['script', 'style', 'image', 'font'].includes(request.destination)) {
e.respondWith(
caches.match(request).then(res => res || fetch(request))
);
}
});
更新缓存版本：不调用 skipWaiting() 就永远用不上新 SW
Service Worker 更新机制是“静默安装 + 等待旧版关闭”。即使你改了 sw.js 并重新注册，旧 SW 仍控制着所有已打开的页面，新 SW 会卡在 waiting 状态——除非手动刷新两次，或主动调用 skipWaiting()。
在新 SW 的 install 事件里加这句即可立即激活：
self.addEventListener('install', () => {
self.skipWaiting();
});
但要注意副作用：
- 如果新 SW 缓存逻辑有变更（比如删了某个 CSS 文件），而老页面还在用旧缓存名，可能样式错乱
- 更稳妥的做法是在
activate事件里清理旧缓存：caches.delete('v0') - 生产环境建议配合版本号硬编码（如
'v2-20240520'），避免因 HTTP 缓存导致 SW 文件未更新
离线能力真正生效的临界点，往往不在注册或安装，而在是否成功 skipWaiting() 并完成 activate。这点容易被忽略，尤其在灰度发布时。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
