注意：
HTML5 Application Cache（应用缓存）已被 W3C 废弃，现代浏览器逐步移除了对其支持（如 Chrome 85+、Firefox 80+）。其设计存在严重缺陷，现推荐使用 Service Worker 实现更安全可控的离线缓存。以下内容仅作历史技术参考。
1. 核心概念与原理
- 目标：允许 Web 应用离线运行，通过缓存静态资源（HTML/CSS/JS/图片等）提升加载速度。
- 工作原理：通过一个 manifest 文件（如 app.manifest）定义需要缓存的资源列表。浏览器首次访问页面时下载并缓存所有指定资源。后续访问优先从缓存加载资源，同时在后台检查 manifest 文件更新。
- 基本流程：text复制下载1. 页面声明使用 manifest 文件 2. 浏览器下载并解析 manifest 3. 缓存所有列出的资源 4. 离线时使用缓存资源 5. 在线时检查 manifest 更新
2. 使用方式（仅作参考）
- 声明 manifest 文件：在 HTML 页面中通过 <html> 标签的 manifest 属性引入：
<!DOCTYPE html>
<html manifest="app.manifest">
<!-- 页面内容 -->
</html>- manifest 文件结构：
CACHE MANIFEST
# 版本号（修改此注释触发更新）
# 2024-01-01 v1.0
CACHE:
# 需要缓存的资源
/styles/main.css
/scripts/app.js
/images/logo.png
NETWORK:
# 必须在线访问的资源（如 API）
/api/
FALLBACK:
# 离线时的备用资源
/offline.html服务器配置：需确保 manifest 文件以 text/cache-manifest MIME 类型返回：
# Nginx 配置示例
location ~ \.manifest$ {
add_header Cache-Control "no-cache";
types { }
default_type text/cache-manifest;
}3. Application Cache 的问题与缺陷
| 问题 | 详细描述 |
|---|---|
| 更新机制不可靠 | 必须修改 manifest 文件（如注释）才能触发更新，且更新过程易出错（如部分失败）。 |
| 白名单机制僵化 | NETWORK 和 FALLBACK 规则难以动态调整，导致部分资源无法按需加载。 |
| 缓存污染风险 | 一旦缓存错误资源，用户可能长期无法获取新版本。 |
| 调试困难 | 缺乏清晰的错误日志和开发者工具支持。 |
| 多页面管理复杂 | 每个页面需独立声明 manifest，难以统一管理。 |
4. 替代方案：Service Worker
为何选择 Service Worker？
- 精细控制缓存：可编程拦截网络请求，动态决定缓存策略。
- 可靠更新机制：通过版本管理和生命周期事件实现可控更新。
- 支持后台同步：允许离线操作后自动同步数据到服务器。
- 现代浏览器支持：Chrome、Firefox、Edge 等主流浏览器全面支持。
Service Worker 基础示例：
// 注册 Service Worker
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js')
.then(registration => console.log('SW 注册成功'))
.catch(error => console.error('SW 注册失败:', error));
}
// sw.js 文件内容
const CACHE_NAME = 'my-cache-v1';
const ASSETS = ['/', '/styles.css', '/app.js'];
self.addEventListener('install', (event) => {
event.waitUntil(
caches.open(CACHE_NAME)
.then(cache => cache.addAll(ASSETS))
);
});
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request)
.then(response => response || fetch(event.request))
);
});5. 迁移旧项目建议
- 移除 Application Cache：删除 HTML 中的 manifest 属性。移除服务器端的 manifest 文件配置。
- 引入 Service Worker：使用 Workbox 等工具简化缓存策略配置。逐步替换原有缓存逻辑。
- 处理兼容性：检测浏览器是否支持 Service Worker，必要时回退到普通缓存（如 localStorage）。
- Application Cache 是早期离线技术，已过时且存在严重缺陷，切勿在新项目中使用。
- Service Worker 是现代化替代方案，提供了更灵活、可靠的离线支持。
- 若需维护遗留代码，建议逐步迁移至 Service Worker 架构。
现代离线应用最佳实践：
- 使用 Service Worker + Cache API 实现动态缓存。
- 结合 IndexedDB 存储结构化离线数据。
- 通过 Web App Manifest 实现添加到主屏幕（PWA）功能。