HTML5离线应用实现攻略

HTML离线应用已全面告别废弃的Application Cache，Service Worker成为唯一标准化、全平台支持的现代解决方案；它要求HTTPS或localhost环境，需严谨处理注册失败、install阶段缓存原子性、fetch事件的资源类型分级响应（如HTML离线兜底、静态资源强缓存、API请求明确报错），并主动管理缓存版本清理以防存储膨胀——掌握这些关键实践，才能真正实现稳定可靠的离线体验。

Application Cache 已被现代浏览器废弃，Chrome 95+、Firefox 85+、Safari 16.4+ 均已移除支持。直接用 manifest 属性 + .appcache 文件的方式，在当前主流浏览器中完全失效，且无法降级兼容。

如果你的目标是“让用户在断网时仍能打开网页并看到内容”，请立刻转向 Service Worker —— 它是当前唯一被 W3C 标准化、全平台支持、可精细控制的离线方案。

Service Worker 注册失败的常见原因

• 页面不是通过 https 或 localhost 提供的：非安全上下文下 navigator.serviceWorker 为 undefined
• sw.js 路径错误或返回了非 200 状态码（比如 404 或 302 重定向）
• sw.js 文件响应头中包含 Cache-Control: no-cache 或 must-revalidate，导致注册被浏览器拒绝
• 同一域名下已有激活中的 Service Worker，新注册脚本未触发更新（需手动 unregister 或等待下次 fetch）

检查方法：

打开 DevTools → Application → Service Workers，看是否显示 “Waiting”、“Active” 或报错信息；若为空白且无提示，大概率是注册脚本根本没执行。

install 阶段缓存资源不生效

cache.addAll() 是原子操作：只要列表中任一资源 fetch 失败（如路径 404、跨域、MIME 类型不匹配），整个缓存就会中止，waitUntil 报错，Worker 卡在 installing 状态。

常见踩坑点：

• cache.addAll(['/', '/index.html']) 中 / 实际返回的是服务端渲染页面（含动态 HTML），但该响应头带 Cache-Control: no-store → 缓存失败
• 引用了相对路径资源（如 ./style.css），而 sw.js 在子目录（如 /js/sw.js）下注册 → 路径解析为 /js/./style.css，404
• 清单里写了 /images/logo.png，但实际文件名是 logo@2x.png 或大小写不符（Linux 服务器区分大小写）

建议做法：

• 所有预缓存路径统一用绝对路径（以 / 开头）
• 在 install 前加日志：console.log('installing with:', urlsToCache)
• 用 fetch(url).then(r => r.ok ? r : Promise.reject(r)) 手动校验每个 URL

fetch 事件里离线 fallback 写法容易出错

只写 caches.match(event.request).then(r => r || fetch(event.request)) 是典型“半离线”写法：它对 HTML 请求有效，但对 API 接口请求会暴露错误（比如返回空 JSON 或 504 页面）。

更稳妥的模式是分类型处理：

• HTML 页面请求 → 优先返回缓存，无则 fallback 到 /offline.html
• CSS/JS/图片等静态资源 → 必须命中缓存，否则报错（说明构建或部署漏文件）
• API 请求（如 /api/user）→ 直接返回 Response.error() 或自定义 JSON 错误体，避免前端解析异常

示例片段（简化版）：

self.addEventListener('fetch', event => {
  const { request } = event;
  const url = new URL(request.url);
<p>if (request.destination === 'document') {
event.respondWith(
caches.match(request).then(r => r || caches.match('/offline.html'))
);
} else if (url.pathname.startsWith('/api/')) {
event.respondWith(Response.error());
} else {
event.respondWith(
caches.match(request).then(r => r || fetch(request))
);
}
});</p>

Service Worker 的缓存不是“设好就完事”的黑盒，它依赖你对每个资源路径、响应头、网络状态和用户预期的明确判断。最容易被忽略的是：缓存版本升级后，旧缓存不会自动清理，长期运行可能占满用户设备存储，尤其在 PWA 场景下。上线前务必测试 caches.delete() 清理逻辑，并监控 caches.keys() 返回的缓存列表。

今天关于《HTML5离线应用实现攻略》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！