HTML5离线骨架屏核心是Service Worker拦截navigate请求并返回预缓存的轻量offline-shell.html；需在install阶段用cache.addAll缓存该文件，fetch中匹配document请求并fallback，配合navigator.onLine提示与重载实现语义化离线体验。
HTML5 中实现离线访问并返回预设的离线骨架屏，核心是用 Service Worker 拦截网络请求，在无网络时主动返回缓存的骨架屏 HTML 文件（而非空白页或报错）。关键不在“骨架屏本身多复杂”，而在于 Service Worker 能精准识别页面主入口请求，并用 respondWith() 返回预先缓存好的离线 HTML。
提前缓存骨架屏 HTML 文件
在 Service Worker 的 install 阶段，把离线骨架屏（如 offline-shell.html）作为静态资源显式加入缓存。它应是一个轻量、无外部依赖的 HTML：内联基础 CSS、无 JS 或仅含最小 fallback 逻辑、不引用未缓存的图片/字体。
- 建议将骨架屏放在项目根目录或
/static/下，路径固定便于匹配 - 使用
cache.addAll(['offline-shell.html'])确保安装即就绪 - 避免骨架屏中包含相对路径引用的未缓存资源（如
./css/app.css），否则离线时仍会失败
拦截导航请求并返回骨架屏
在 fetch 事件中，需专门处理 request.mode === 'navigate' 的请求——这类请求代表用户打开新页面或刷新当前页，正是你希望兜底的场景。不能笼统拦截所有 GET 请求，否则会干扰 API、图片等资源加载。
- 用
event.request.destination === 'document'进一步确认是 HTML 文档请求 - 检查网络状态可选，但更可靠的做法是尝试
fetch(event.request)并捕获TypeError（网络断开时抛出），再 fallback 到骨架屏 - 直接
cache.match('offline-shell.html')获取响应并event.respondWith()返回
区分线上页与离线页的语义标识
单纯返回骨架屏 HTML 不够，用户需要感知当前处于离线状态。可在骨架屏中加入明确提示（如顶部横幅“⚠️ 当前网络不可用”），并用 JS 尝试检测连接后自动重载：
立即学习“前端免费学习笔记（深入）”；
- 在骨架屏 HTML 的内联 script 中监听
navigator.onLine变化 - 当恢复在线时，调用
window.location.reload()重新发起真实请求 - 也可在 Service Worker 中监听
online事件，主动 skipWaiting + 控制 reload，但前端 JS 方案更简单可控
避免缓存污染和更新失效
Service Worker 缓存一旦写入，不会自动更新。骨架屏 HTML 若后续修改，必须同时更新 SW 文件内容（触发重新 install）或采用带版本号的缓存名（如 offline-shell-v2.html）。
- 开发阶段可启用 Chrome 的 “Update on reload” 选项强制跳过等待态
- 上线后推荐在 SW 安装时清理旧缓存（
caches.delete(oldCacheName)） - 骨架屏文件本身建议不参与常规静态资源哈希命名策略，保持路径稳定
