关键在于预缓存离线页及依赖资源并在fetch中主动返回：install阶段用caches.open和addAll预存/offline.html等文件，navigate请求直接match缓存或离线页，确保结构完整无外链依赖，并注意HTTPS、WebView兼容性及首次刷新生效。
移动端网页断网时，用 Cache API 加载自定义离线页的关键，是把离线页 HTML 文件提前缓存进 Service Worker，并在 fetch 拦截中优先返回它——而不是等网络失败后才兜底。这能避免白屏、闪烁或报错页，实现“秒开离线页”。
预缓存离线页文件
在 Service Worker 的 install 阶段，把离线页（如 /offline.html）和它的依赖资源（CSS、图标等）一并加入缓存：
- 使用
caches.open('v1')创建命名缓存空间 - 调用
cache.addAll(['/offline.html', '/styles/offline.css', '/images/offline-icon.png']) - 必须包裹在
event.waitUntil()中，确保缓存完成才进入激活阶段
拦截导航请求，主动返回离线页
对页面级请求（request.destination === 'document'），不等网络超时，直接匹配缓存或返回离线页：
- 在 fetch 事件中判断：
if (request.mode === 'navigate') - 先尝试
caches.match(request)，命中则直接返回 - 未命中时，不调用
fetch(request)（因为已断网），而是用caches.match('/offline.html')获取预存的离线页响应 - 确保离线页本身也带完整结构（含内联样式、无外部 JS 依赖），避免二次请求失败
处理资源加载失败的兜底逻辑
除导航外，其他资源（如图片、API）断网时也应避免报错影响体验：
- 对
img、script、style等请求，可单独设置缓存策略（如 Cache First） - 若资源未预缓存且断网，
cache.match()返回undefined，此时可返回一个占位响应（如 204 空响应或 base64 图片） - 避免在 fetch 中抛出异常或未处理 Promise 拒绝，否则可能中断整个请求链
注意移动端特殊限制
真机环境下容易忽略但影响实际效果的点：
- Service Worker 只在 HTTPS 或
localhost下生效，测试务必用本地服务器（如python -m http.server）而非 file:// 协议 - 部分安卓 WebView（尤其旧版本）默认禁用 Service Worker，需确认
navigator.serviceWorker存在且启用 - 离线页中的相对路径资源（如
./logo.png）要确保也在预缓存列表中，或改用绝对路径 - 首次安装 SW 后需刷新一次页面才能生效，可提示用户“已启用离线支持，请刷新”
