HTML5缓存配置及manifest使用教程

各位小伙伴们，大家好呀！看看今天我又给各位带来了什么文章？本文标题是《HTML5缓存配置详解与manifest使用指南》，很明显是关于文章的文章哈哈哈，其中内容主要会涉及到等等，如果能帮到你，觉得很不错的话，欢迎各位多多点评和分享！

AppCache 通过 manifest 文件实现离线访问，定义缓存、网络和备用资源，需在 HTML 中引用并正确配置 MIME 类型，其行为依赖文件内容变更触发更新，存在跨域限制与安全风险，现已逐步被 Service Worker 取代。

HTML5 的离线应用功能通过 Application Cache（简称 AppCache）实现，使用 manifest 文件 来定义哪些资源需要被浏览器缓存。虽然 AppCache 已被现代浏览器逐步弃用（推荐使用 Service Worker 和 PWA），但在一些老项目或特定场景中仍可能遇到。以下是其详细配置和使用方法。

manifest 文件的作用

manifest 是一个文本文件，列出网页所需的所有离线资源，如 HTML、CSS、JS、图片等。浏览器根据该文件缓存资源，使用户在无网络时仍可访问页面。

AppCache 有三种资源分类：

• CACHE：明确要缓存的资源
• NETWORK：无需缓存，必须联网才能访问
• FALLBACK：指定备用资源，当请求失败时使用

如何配置 manifest 文件

创建一个以 .appcache 或 .manifest 为扩展名的文件，例如：cache.appcache

文件内容示例如下：

CACHE MANIFEST
# 版本号：v1.0.0
CACHE:
/index.html
/style.css
/app.js
/images/logo.png
NETWORK:
/api/data.json
/login.php
FALLBACK:
/offline.html

说明：

• CACHE: 下列资源会被缓存，首次加载后即使断网也可访问
• NETWORK: 这些资源不缓存，必须联网访问，否则报错
• FALLBACK: 如果某个资源无法加载（如 404），则显示指定的备用页（如 offline.html）
• # 开头为注释，常用于版本控制。修改任意行会触发浏览器重新下载缓存

HTML 页面引用 manifest

在需要离线支持的 HTML 文件的 标签中添加 manifest 属性：

服务器需正确配置 MIME 类型，确保 .appcache 文件以正确类型返回：

• Apache 配置：在 .htaccess 中添加
  AddType text/cache-manifest .appcache
• Nginx 配置：在 mime.types 中加入
  text/cache-manifest appcache appcache?

若 MIME 类型不正确，manifest 将无法被识别，导致缓存失败。

AppCache 的行为特点

理解其运行机制对调试很重要：

• 首次访问页面时，浏览器解析 manifest 并缓存所列资源
• 之后每次访问，浏览器都会检查 manifest 文件是否有变化（基于内容，非时间戳）
• 只有 manifest 文件内容改变（比如版本号更新），才会重新下载所有资源
• 即使只改了一个小文件，整个缓存也会被刷新
• 如果 manifest 文件本身无法访问，缓存被视为失效，离线功能将停止工作

常见问题与注意事项

• manifest 文件必须与主页面同域，不能跨域引用
• HTTPS 环境下建议避免使用 AppCache，因其存在安全风险
• 调试时可通过 JavaScript 监听 applicationCache 事件：

window.applicationCache.addEventListener('updateready', function() {
  if (window.applicationCache.status === window.applicationCache.UPDATEREADY) {
    window.applicationCache.swapCache(); // 应用新缓存
  }
});

• 清除缓存只能通过删除浏览器缓存或修改 manifest 内容强制更新
• Chrome DevTools 的 Application → Manifest 可查看缓存状态

基本上就这些。尽管 AppCache 曾是离线 Web 应用的重要一步，但因其设计缺陷（如更新机制复杂、缓存难管理），已被现代标准淘汰。当前更推荐使用 Service Worker + Cache API 实现更灵活可靠的离线功能。但对于维护旧系统，了解 manifest 缓存机制仍然必要。

到这里，我们也就讲完了《HTML5缓存配置及manifest使用教程》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于HTML5的知识点！