HTML5 的离线应用功能主要依赖于 Application Cache（简称 AppCache），它允许网页在没有网络连接的情况下依然可以加载和运行。虽然 AppCache 已被现代浏览器逐步弃用（推荐使用 Service Workers 替代），但在一些旧项目中仍可能遇到。以下是其基本配置方法。
Application Cache 是 HTML5 提供的一种机制，通过一个缓存清单文件（cache manifest），告诉浏览器哪些资源需要离线存储，从而实现离线访问网页的功能。
要构建基于 AppCache 的离线应用，需完成以下三个关键步骤：
1. 在 HTML 标签中引用 manifest 属性
立即学习“前端免费学习笔记（深入）”；
在需要支持离线的页面的 <html> 标签中添加 manifest 属性：
<html manifest="cache.manifest">
这个属性指向一个文本文件（通常命名为 cache.manifest），该文件定义了需要缓存的资源列表。
2. 创建缓存清单文件（.manifest）
缓存清单文件是一个纯文本文件，必须以正确的 MIME 类型 text/cache-manifest 被服务器提供。其内容结构如下：
CACHE MANIFEST<br>
# 版本号：v1.0<br><br>
CACHE:<br>
/index.html<br>
/style.css<br>
/script.js<br>
/images/logo.png<br><br>
NETWORK:<br>
/api/<br><br>
FALLBACK:<br>
/offline.html
说明：
3. 配置服务器 MIME 类型
确保 Web 服务器能正确识别 .manifest 文件并返回 text/cache-manifest 类型。例如：
.htaccess 中添加AddType text/cache-manifest .manifest
types { text/cache-manifest manifest; }
浏览器仅在 manifest 文件内容发生变化时才会更新缓存。即使资源本身已更新，只要清单文件未变，就不会重新下载。因此建议在文件中加入版本注释：
# version 1.1
修改版本号即可触发整个缓存的重新下载。
AppCache 存在多个问题，已被现代开发所淘汰：
目前更推荐使用 Service Worker + Cache API 实现离线功能，它提供了更精细的控制能力和更好的用户体验。
基本上就这些，如果你维护的是老项目，了解 AppCache 仍有价值；新项目请优先考虑现代方案。
以上就是HTML5代码如何构建离线应用 HTML5代码中Application Cache的配置的详细内容，更多请关注php中文网其它相关文章！
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
435
收藏
