service worker 首次加载时无法接管页面，控制权仅在下一次加载（或满足激活条件后）生效；需通过 skipwaiting() 和 clients.claim() 加速更新，并依赖预缓存与导航预加载优化首次访问体验。
Service Worker 并不能在页面首次加载时立即接管控制权，这是它设计上的关键限制。控制权的获取有明确的时间窗口和前提条件，必须理解这个机制才能正确实现离线、秒开等效果。
控制权不是注册就生效的
当你调用 navigator.serviceWorker.register('/sw.js')，只是告诉浏览器“有个新 Service Worker 待安装”，并不意味着它马上能拦截当前页面的请求。
真正获得控制权发生在 下一次页面加载时（或满足特定条件后），前提是：
- 新 Service Worker 已完成安装（install）和激活（activate）
- 当前页面没有被旧版 Service Worker 控制
- 所有已打开的同源页面都已关闭（否则旧 SW 会继续运行）
也就是说：首次加载的页面，永远由网络直接服务，或由上一个版本的 SW 控制（如果已有）。新注册的 SW 只影响后续访问。
如何让新 SW 尽快获得控制权
✅ 强制跳过 waiting 状态
如果新 SW 卡在 waiting 阶段（因为旧 SW 还在控制页面），可以在页面中主动触发更新：
// 页面 JS 中监听 controllerchange
navigator.serviceWorker.addEventListener('controllerchange', () => {
window.location.reload();
});
// 或手动跳过 waiting，立即激活
navigator.serviceWorker.ready.then(reg => {
if (reg.waiting) {
reg.waiting.postMessage({ type: 'SKIP_WAITING' });
}
});
并在 sw.js 的 install 事件中监听：
self.addEventListener('message', event => {
if (event.data && event.data.type === 'SKIP_WAITING') {
self.skipWaiting();
}
});
这样可避免用户需关闭所有标签页才能更新。
首次加载也能“感觉”被控制？靠预加载 + 导航预加载
虽然首次加载无法被新 SW 拦截，但可通过以下方式模拟控制效果：
-
启用导航预加载（Navigation Preload）
让浏览器在 SW 启动的同时并行发起网络请求，缩短首屏等待时间：// 注册时启用 navigator.serviceWorker.register('/sw.js').then(reg => { if (reg.navigationPreload) { reg.navigationPreload.enable(); } }); // sw.js 中使用预加载响应 self.addEventListener('fetch', event => { if (event.request.mode === 'navigate') { event.respondWith( event.preloadResponse .then(res => res || fetch(event.request)) .catch(() => caches.match(event.request)) ); } }); 预缓存关键资源（如 AppShell）
在 install 阶段缓存 HTML、JS、CSS 等首屏必需文件，下次访问即可秒开。
关键结论
- 第一次访问某个域名时，Service Worker 不会拦截本次请求
- 控制权默认在第二次及以后的页面加载中生效
- 想让更新更快落地，需配合
skipWaiting()和clients.claim()（在 activate 中调用，使新 SW 立即控制当前客户端） - “首次加载优化”本质是为下一次访问做准备，而不是改变本次行为
不复杂但容易忽略。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
