什么是应用程序缓存？
应用程序缓存(Application Cache)是HTML5提供的一种机制，允许Web应用在用户离线时仍可访问。
应用程序缓存(又称AppCache)为 Web 应用带来三大优势：
- 离线浏览 - 用户可在无网络连接时使用应用
- 提升速度 - 已缓存资源加载的更快
- 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源
浏览器支持
表格中的数字指示了完全支持应用程序缓存的首个浏览器版本。
| 浏览器 |  |
 |
 |
 |
 |
| 支持 Application Cache 的初始版本 | 4.0 | 10.0 | 3.5 | 4.0 | 11.5 |
使用方法
1. 创建缓存清单文件
首先需要创建一个缓存清单文件(通常以.appcache为后缀)，例如example.appcache:
CACHE MANIFEST
# v1 2025-01-01
# 这是注释，修改注释可触发缓存更新
CACHE:
# 需要缓存的资源列表
/style.css
/logo.png
/main.js
NETWORK:
# 需要在线访问的资源
/api/
FALLBACK:
# 离线时的备用页面
/offline.html2. 关联清单文件
在HTML文件中关联清单文件:
<html manifest="example.appcache">
...
</html>3. 清单文件详解
缓存清单文件包含三个主要部分:
- CACHE部分：列出需要缓存的资源文件（首次下载后将被缓存）
- NETWORK部分：列出必须通过网络访问的资源（不会被缓存）
- FALLBACK部分：指定当资源无法访问时的备用页面
更新缓存
缓存会在以下情况下更新:
- 用户清空浏览器缓存
- 清单文件被修改（即使注释改变也会触发更新）
- 程序调用window.applicationCache.update()
JavaScript API
可以通过JavaScript控制缓存：
var appCache = window.applicationCache;
appCache.update(); // 尝试更新缓存
appCache.addEventListener('updateready', function(e) {
if (appCache.status == appCache.UPDATEREADY) {
appCache.swapCache(); // 交换到新缓存
if (confirm('新版本可用，是否重新加载?')) {
window.location.reload();
}
}
}, false);缓存状态
可通过appCache.status获取当前缓存状态：
- UNCACHED(0)：未缓存
- IDLE(1)：空闲(缓存是最新的)
- CHECKING(2)：正在检查更新
- DOWNLOADING(3)：正在下载更新
- UPDATEREADY(4)：更新就绪
- OBSOLETE(5)：缓存已过期
关于应用程序缓存的注意事项
- 清单文件必须使用正确的 MIME 类型(text/cache-manifest)
- 清单文件列出的所有资源必须同源
- 每个需要缓存的应用页面都必须包含 manifest 属性
- 缓存有大小限制(通常 5MB)
- 现代 Web 开发中，Service Worker 正逐渐取代 AppCache
评论区 0
发表评论
教程介绍
HTML5 是 HTML 的修订标准，2014年由万维网联盟（W3C）完成标准制定。
60
章节
103
阅读
0
评论