首页 > 文章 > 前端

HTML5缓存配置及manifest使用教程

时间：2026-01-02 16:37:59 212浏览收藏

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

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

html5使用manifest实现离线应用 html5使用缓存机制的详细配置

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
<p>CACHE:
/index.html
/style.css
/app.js
/images/logo.png</p><p>NETWORK:
/api/data.json
/login.php</p><p>FALLBACK:
/offline.html</p>

说明：

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

HTML 页面引用 manifest

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

<html manifest="cache.appcache">

服务器需正确配置 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的知识点！

前往漫画官网入口并下载 ➜

HTML5