彻底搞懂 HTML5 Application Cache 离线存储：用法、原理与实战

在移动网络不稳定、弱网环境频发的场景下，Web 应用的可用性会大打折扣。HTML5 推出的 Application Cache（应用缓存，简称 AppCache） 为 Web 应用提供了原生的离线存储能力，让网页可以在断网、弱网状态下正常加载和使用，是早期 PWA（渐进式 Web 应用）的核心技术之一。

本文将从零带你掌握 Application Cache 的核心概念、完整用法、实战配置、缓存机制，以及使用中的注意事项，帮你快速实现 Web 应用离线访问。

一、什么是 Application Cache？

Application Cache 是 HTML5 原生提供的离线缓存技术，它允许 Web 应用将静态资源（HTML、CSS、JS、图片、字体等）缓存到本地浏览器中。

核心优势：

离线访问：断网后用户依然能打开页面、使用基础功能；
提升加载速度：缓存资源直接从本地读取，无需请求服务器，大幅减少加载时间；
降低服务器压力：重复访问时无需重复下载静态资源，减少服务器请求和带宽消耗。

补充：Application Cache 已被 W3C 标记为废弃，推荐使用 Service Worker + Cache API 替代，但在大量老旧浏览器（如移动端旧浏览器、桌面端 IE11）中仍有兼容性，学习它能帮你理解离线存储的核心逻辑，也是面试和维护旧项目的必备知识。

二、核心概念：清单文件（manifest）

Application Cache 的核心是缓存清单文件，这是一个后缀为 .appcache / .manifest 的文本文件，作用是告诉浏览器需要缓存哪些文件、不缓存哪些文件、离线时用什么文件兜底。

清单文件分为 3 个核心区段，格式固定且严格区分大小写：

CACHE MANIFEST：文件开头必须写的标识，声明这是 AppCache 清单；
CACHE：需要缓存的资源列表（直接写路径，可省略区段名）；
NETWORK：必须联网才能访问的资源（不缓存）；
FALLBACK：离线访问失败时的兜底替代文件。

三、完整实战：三步实现离线存储

第一步：创建缓存清单文件

在项目根目录新建 cache.appcache 文件，写入以下标准配置（直接复制可用）：

manifest

# 必须写在第一行，标识缓存清单
CACHE MANIFEST

# 版本号：修改版本号可强制浏览器更新缓存
# 2026-03-29 v1.0.0

# CACHE 区段：需要缓存的静态资源
CACHE
index.html
css/style.css
js/main.js
images/logo.png
favicon.ico

# NETWORK 区段：必须联网访问的资源（* 代表所有未缓存文件）
NETWORK
*
/api/

# FALLBACK 区段：离线时的替代文件
FALLBACK
/ offline.html
images/ images/error.png

配置说明：

注释以 # 开头，版本号是强制更新缓存的关键；
CACHE 下的资源会被浏览器下载到本地；
NETWORK 中的 /api/ 表示接口请求必须联网，不缓存；
FALLBACK 表示根目录离线时跳转到 offline.html，图片加载失败时显示 error.png。

第二步：在 HTML 中引入清单文件

在需要开启离线缓存的页面 <html> 标签中添加 manifest 属性，指向清单文件路径：

html

预览

<!-- 核心：添加 manifest 属性 -->
<!DOCTYPE html>
<html manifest="cache.appcache">
<head>
    <meta charset="UTF-8">
    <title>AppCache 离线存储</title>
    <link rel="stylesheet" href="css/style.css" rel="external nofollow" >
</head>
<body>
    <h1>HTML5 离线存储演示</h1>
    <img src="images/logo.png" alt="logo">
    <script src="js/main.js"></script>
</body>
</html>

关键要求：

所有需要缓存的页面，都必须添加 manifest 属性；
清单文件的路径必须正确，支持相对路径和绝对路径。

第三步：配置服务器 MIME 类型

浏览器识别 AppCache 清单文件依赖服务器 MIME 类型，如果不配置，缓存会失效！

不同服务器配置方式：

Nginx：在 nginx.conf 中添加：

nginx

types {
    text/cache-manifest   appcache manifest;
}

Apache：在 .htaccess 中添加：

apache

AddType text/cache-manifest .appcache .manifest

本地测试：使用 VS Code Live Server 插件，无需手动配置。

配置完成后，启动服务器，第一次访问页面，浏览器会自动缓存清单中的资源。

四、Application Cache 缓存机制

浏览器对 AppCache 的处理分为三个阶段，理解机制能避免缓存不更新、资源异常的问题：

1. 首次加载

浏览器解析到 manifest 属性 → 请求清单文件；
下载清单中所有 CACHE 资源 → 存储到本地缓存；
加载完成后，页面正常显示。

2. 第二次加载（有缓存）

优先从本地缓存加载资源，不请求服务器；
后台悄悄检查清单文件是否发生变化；
清单无变化：继续使用本地缓存；
清单有变化：重新下载所有资源，更新缓存。

3. 缓存更新规则

只有清单文件本身发生修改，浏览器才会更新缓存！

只修改资源文件（如 CSS、JS），不修改清单 → 缓存不更新；
修改清单中的版本号（注释），即可触发缓存更新（最简单的方式）。

五、JavaScript 监听缓存状态

Application Cache 提供了 applicationCache 对象，可通过 JS 监听缓存事件，实现交互提示：

// 获取缓存对象
const appCache = window.applicationCache;

// 缓存开始更新
appCache.onchecking = function() {
    console.log("正在检查缓存更新...");
};

// 缓存下载中
appCache.ondownloading = function() {
    console.log("正在下载缓存资源...");
};

// 缓存更新完成
appCache.onupdateready = function() {
    console.log("缓存已更新，是否刷新页面？");
    // 自动刷新加载新资源
    if(confirm("缓存已更新，是否立即生效？")){
        window.location.reload();
    }
};

// 缓存出错
appCache.onerror = function() {
    console.error("离线缓存加载失败");
};

// 缓存空闲（无更新）
appCache.oncached = function() {
    console.log("缓存已就绪，支持离线访问");
};

常用方法：

applicationCache.update()：手动触发缓存检查；
applicationCache.swapCache()：切换到最新缓存（需刷新页面生效）。

六、浏览器兼容性

Application Cache 支持绝大多数现代浏览器和老旧浏览器：

支持：Chrome、Firefox、Safari、IE11、Edge、大部分移动端浏览器；
不支持：IE10 及以下版本。

可以用以下代码做兼容性判断：

if(window.applicationCache){
    console.log("当前浏览器支持 Application Cache");
}else{
    console.log("当前浏览器不支持离线缓存");
}

七、使用注意事项（避坑指南）

清单文件格式严格：不能有语法错误，路径必须正确，否则缓存完全失效；
缓存跨页面：一个清单文件可作用于多个页面，所有页面共用同一套缓存；
HTTPS 优先：生产环境建议使用 HTTPS，部分浏览器在 HTTP 下会限制 AppCache 功能；
缓存大小限制：浏览器一般限制单个域名缓存大小为 5MB，超出会报错；
不要缓存清单文件本身：服务器需设置清单文件不缓存，否则无法更新；
替代方案：新项目推荐使用 Service Worker + Cache API，这是官方推荐的标准替代技术。

八、总结

HTML5 Application Cache 是入门级离线存储技术，核心用法只需三步：编写清单文件 → HTML 引入 → 服务器配置，就能快速实现 Web 应用离线访问。

虽然它已被废弃，但它的离线存储思想是 Service Worker 的基础，掌握它能帮你快速理解 Web 离线应用的核心逻辑。如果你在维护旧项目，或者需要兼容老旧浏览器，AppCache 依然是实用的解决方案。

新项目建议直接学习 Service Worker，它的功能更强大、灵活性更高，是现代离线 Web 应用的标准方案。

关键点回顾

核心文件：.appcache 清单文件，分 CACHE/NETWORK/FALLBACK 三个区段；
使用步骤：创建清单 → HTML 加 manifest 属性 → 配置服务器 MIME 类型；
更新机制：修改清单文件（版本号）才能触发缓存更新；
适用场景：老旧项目兼容、简单离线页面、弱网环境优化。

一、什么是 Application Cache？

二、核心概念：清单文件（manifest）

三、完整实战：三步实现离线存储

第一步：创建缓存清单文件

第二步：在 HTML 中引入清单文件

第三步：配置服务器 MIME 类型

四、Application Cache 缓存机制

1. 首次加载

2. 第二次加载（有缓存）

3. 缓存更新规则

五、JavaScript 监听缓存状态

六、浏览器兼容性

七、使用注意事项（避坑指南）

八、总结

关键点回顾

相关文章