能，但需在页面首次加载前完成注册且SW脚本已缓存；否则首屏HTML请求发出时SW未激活，无法拦截。
Service Worker能拦截HTML首屏请求吗？
能，但有严格前提：必须在页面首次加载前就完成注册，且注册的SW脚本本身已被浏览器缓存或通过HTTP缓存策略保障可快速获取。否则，首屏HTML请求发出时SW尚未激活，自然无法拦截。
常见错误是把navigator.serviceWorker.register()放在DOMContentLoaded或window.onload之后执行——这时HTML早已被解析渲染完毕，拦截已失效。
- 注册必须放在主页面的
<script>中，越早越好（建议放在<head>末尾） - 确保SW脚本路径使用绝对URL（如
/sw.js），避免相对路径导致注册失败 - 开发阶段注意Chrome隐身窗口默认禁用SW，需手动开启“Bypass for network”或关闭隐身模式
如何在fetch事件中拦截并返回骨架屏HTML？
关键在于self.addEventListener('fetch', ...)中判断请求是否为导航请求（request.mode === 'navigate'），再动态生成或返回预置的骨架屏HTML字符串。
直接返回内联HTML字符串最简单可靠，避免额外请求开销；但要注意Content-Type响应头必须设为text/html; charset=utf-8，否则浏览器可能解析失败。
立即学习“前端免费学习笔记（深入）”；
- 骨架屏HTML应极简：仅含必要结构、内联CSS（无外部
<link>）、无JS逻辑 - 用
new Response(htmlString, { headers: { 'Content-Type': 'text/html; charset=utf-8' } })构造响应 - 不要在SW中调用
fetch()去拉取真实HTML再改写——这会引入网络延迟，违背秒开目标
骨架屏如何与真实页面无缝衔接？
核心是避免两次渲染：骨架屏由SW注入后，真实页面资源（JS/CSS/数据）仍需正常加载并接管DOM。常见做法是在骨架屏HTML中预留占位节点，并让主应用启动时复用这些节点。
例如骨架屏里写<div id="app"></div>，真实应用初始化时检查document.getElementById('app').children.length，若已有子节点（即骨架结构），就直接在其上挂载Vue/React实例，而非清空重绘。
- 真实JS入口需加判断：
if (document.getElementById('app').firstChild) { /* 复用现有结构 */ } - 骨架屏中的CSS类名要与真实组件完全一致，否则样式错乱
- 禁止在骨架屏里写
async或defer脚本——它们可能在骨架渲染前就执行，造成状态冲突
本地开发与HTTPS限制怎么绕过？
Service Worker要求HTTPS（或localhost），但本地开发常跑在http://127.0.0.1:3000之类地址。Chrome/Firefox对localhost和127.0.0.1视为安全上下文，可直接注册；但http://mydev.local这类自定义host默认不被信任。
真正容易被忽略的是：即使域名合法，若SW脚本返回了Cache-Control: no-cache或ETag校验失败，注册也会静默失败——此时registration.waiting始终为空，控制台也不报错。
- 开发时用
http://localhost:port，别用自定义hosts + http - 检查SW脚本响应头：
Content-Type必须是application/javascript，且不能含no-store - 每次修改SW后，需手动在DevTools Application → Service Workers中点击“Update on reload”或勾选“Skip waiting”
