HTML5 教程 / 应用缓存

HTML5 应用程序缓存 (AppCache)

HTML5 应用程序缓存允许Web应用在用户设备上缓存资源，实现离线访问能力。

简介

应用程序缓存（AppCache）是HTML5引入的重要特性，它允许开发者指定一组文件（HTML、CSS、JavaScript、图片等）在用户首次访问时被缓存到本地。此后，即使用户断开网络连接，这些缓存的资源仍然可以正常加载和使用。

这项技术为创建离线Web应用（PWA前身）提供了基础，使得Web应用能够像原生应用一样在离线环境下运行。

重要提示

AppCache 已被废弃，现代Web开发建议使用 Service Workers 作为替代方案。Service Workers 提供了更强大、更灵活的离线缓存能力。

manifest 文件

应用程序缓存通过 manifest 文件进行配置。该文件定义了哪些资源需要缓存、哪些资源需要从网络加载、以及如何处理缓存未命中。

manifest 文件结构 
CACHE MANIFEST
# 版本注释 - 修改版本号可强制更新缓存
# 2026-01-15 v1.0.0

CACHE:
/index.html
/style.css
/app.js
/images/logo.png
/images/icon.png

NETWORK:
/api/
/login.html

FALLBACK:
/offline.html
/api/ /api-offline.json

manifest 文件包含三个主要部分：

  • CACHE: - 指定需要缓存的文件列表，这些文件首次访问后会被下载并保存在本地
  • NETWORK: - 指定需要从网络加载的资源（永远不缓存）
  • FALLBACK: - 指定后备资源，当请求失败时使用

启用应用缓存

在HTML文档中添加 manifest 属性即可启用应用缓存：

启用 AppCache 
<!DOCTYPE html>
<html manifest="app.appcache">
<head>
    <meta charset="UTF-8">
    <title>我的离线应用</title>
</head>
<body>
    <script src="app.js"></script>
</body>
</html>

缓存事件

应用缓存提供多个事件用于监控缓存状态：

缓存事件示例 
var appCache = window.applicationCache;

// 缓存检查开始
appCache.addEventListener('checking', function() {
    console.log("检查缓存中...");
});

// 缓存已更新
appCache.addEventListener('updateready', function() {
    console.log("新版本已准备好");
    appCache.swapCache(); // 切换到新缓存
});

// 缓存错误
appCache.addEventListener('error', function() {
    console.log("缓存出错");
});

注意事项

开发提示
  • manifest 文件的 MIME 类型必须是 text/cache-manifest
  • manifest 文件本身也会被缓存
  • 修改 manifest 文件中的任何内容都会触发缓存更新
  • 建议在版本号后添加注释，修改版本号即可强制更新
  • 跨域资源同样可以被缓存