html5使用manifest实现离线应用 html5使用缓存机制的详细配置-html教程-PHP中文网

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

星夢妙者

发布： 2025-10-23 10:18:02

原创

1255人浏览过

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>

登录后复制

说明：

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

查看详情

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

HTML 页面引用 manifest

在需要离线支持的 HTML 文件的 zuojiankuohaophpcnhtml> 标签中添加 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实现离线应用 html5使用缓存机制的详细配置的详细内容，更多请关注php中文网其它相关文章！