HTML5离线缓存需确保首次联网下载资源、断网时准确加载本地副本；旧项目可用AppCache（需manifest声明、合法清单文件、正确MIME类型），新项目应使用Service Worker+Cache API（注册sw.js、install预缓存、fetch拦截响应、设置fallback页）；关键细节包括：全用绝对路径、必须缓存HTML本身、AppCache靠清单内容变更更新、SW需处理作用域与激活；验证须在DevTools Offline模式下刷新页面并检查Application面板。
HTML5 离线缓存机制要实现断网可用，核心是让浏览器在首次联网时下载并保存指定资源，并在后续无网时能准确加载这些本地副本。虽然 Application Cache（AppCache）已废弃，但若需兼容旧环境或维护遗留系统，仍需按规范配置；新项目则应转向 Service Worker + Cache API 方案。
使用 AppCache 实现基础断网可用
适用于老项目或内网低版本浏览器场景，必须严格满足三个条件：
-
HTML 标签声明 manifest 属性：在
<html>标签中添加manifest="cache.manifest"，路径需可访问且与页面同源 -
创建合法的 manifest 文件：文件首行必须为
CACHE MANIFEST，内容分区块（可选）：
•CACHE:列出所有需离线加载的资源（如/index.html、/style.css）
•NETWORK:标明必须联网的路径（如/api/或*）
•FALLBACK:指定失败时降级页（如/ /offline.html）
• 注释行（以#开头）用于触发更新，修改版本号即可刷新缓存 -
服务器返回正确 MIME 类型：.manifest 或 .appcache 文件必须响应
text/cache-manifest。例如：
Apache：在.htaccess中加AddType text/cache-manifest .manifest
Nginx：在types{}块中加text/cache-manifest manifest;
用 Service Worker 替代 AppCache（推荐方案）
现代浏览器已完全移除 AppCache 支持，Service Worker 是当前唯一标准、可控、可调试的离线方案：
-
注册 Service Worker 脚本：在页面 JS 中调用
navigator.serviceWorker.register('sw.js')，确保sw.js位于根目录或合理作用域下 -
install 阶段预缓存核心资源：在
sw.js中监听install事件，用caches.open('v1').then(cache => cache.addAll([...]))缓存 HTML、CSS、JS、图标等关键静态文件 -
fetch 阶段提供离线响应：监听
fetch事件，优先匹配缓存；未命中则发网络请求，并将有效响应克隆后存入缓存供下次离线使用 -
设置 fallback 页面：当所有缓存和网络都失败时，
fetch事件中可统一返回/offline.html，提升用户体验
关键细节不能忽略
无论采用哪种方式，以下操作直接影响断网是否真正可用：
立即学习“前端免费学习笔记（深入）”；
- 所有缓存资源路径必须**绝对路径**（以
/开头），避免相对路径导致匹配失败 - manifest 文件或 Service Worker 的缓存逻辑中，**必须包含 HTML 页面本身**（如
/index.html），否则断网时连主页面都打不开 - AppCache 更新只靠 manifest 文件内容变化触发——哪怕只是改一行注释，资源文件本身更新而清单不变，缓存不会更新
- Service Worker 需注意作用域和更新机制：新版本 sw.js 部署后，旧页面仍运行旧版 worker，需通过
skipWaiting()和clients.claim()主动激活
验证断网是否生效
完成配置后，不要仅依赖“看起来能打开”来判断：
- 在 Chrome DevTools 中关闭 Network → Offline，刷新页面，观察是否完整加载且无 404
- 检查 Application → Cache Storage（Service Worker）或 Application → Manifest（AppCache）面板，确认资源已写入
- 断开网络后直接输入 URL 访问，而非从历史记录或标签页恢复——后者可能走的是浏览器内存缓存，非持久离线缓存
