用 Service Worker 提供离线页面

概述

良好的离线体验是以缓存策略支撑的设计决策。缓存外壳与兜底文档、对导航保持网络优先，绝不让过期 HTML 掩盖可用的网络。

关键步骤

1. 在 install 阶段预缓存离线文档与外壳资源。
2. 导航采用网络优先，失败时回退到缓存的离线页。
3. 仅对同源 GET 请求处理 fetch 事件。
4. 在 activate 阶段删除名称与当前版本不符的缓存。

验证

• 离线时导航显示兜底页。
• 在线导航始终返回新鲜 HTML。
• 非 GET 与跨域请求不受 worker 影响。
• 激活时清理旧缓存。

注意事项

• Service Worker 仅在安全上下文运行，某些内嵌场景不支持。
• 若误用缓存优先，激进的 HTML 缓存可能长期返回过期页面。

适用范围

本条目围绕「用 Service Worker 提供离线页面」给出可复制的步骤、验证方式与常见问题，适合需要按此流程落地的工程团队。执行时请结合自身上下文调整命令与阈值，并在变更前后留存证据，便于后续复核与回滚。

self.addEventListener('fetch', (event) => {
  if (event.request.mode === 'navigate') {
    event.respondWith(fetch(event.request).catch(() => caches.match('/offline.html')));
  }
});