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.0CACHE:/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 .appcacheNginx 配置：在 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实现离线应用 html5使用缓存机制的详细配置的详细内容，更多请关注php中文网其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1587716.html
微信扫一扫 
支付宝扫一扫 
