HTML5网页如何实现页面缓存 HTML5网页应用缓存的配置方法-html教程-PHP中文网

HTML5网页如何实现页面缓存 HTML5网页应用缓存的配置方法

看不見的法師

发布： 2025-11-01 21:19:09

原创

175人浏览过

HTML5应用缓存通过manifest文件实现离线访问，需在html标签添加manifest属性并创建CACHE、NETWORK、FALLBACK规则的清单文件，服务器需配置text/cache-manifest MIME类型，缓存仅在manifest内容变化时更新，可通过JavaScript监听状态并调用swapCache更新，但该技术已被现代浏览器弃用，存在更新不及时、调试困难等问题，推荐使用Service Worker和Cache API替代。

html5网页如何实现页面缓存 html5网页应用缓存的配置方法

HTML5 提供了“应用缓存”（Application Cache）功能，可以让网页在离线状态下仍然可用。虽然这项技术已经被现代浏览器逐步弃用（推荐使用 Service Workers 和 Cache API），但了解其基本配置方法仍有助于理解离线缓存原理。

1. 启用应用缓存（AppCache）

要启用 HTML5 应用缓存，需在页面的 <html> 标签中添加 manifest 属性：

zuojiankuohaophpcnhtml manifest="cache.manifest">

该属性指向一个文本文件（通常命名为 cache.manifest），用于定义哪些资源需要被缓存。

2. 创建缓存清单文件（manifest 文件）

缓存清单文件是一个纯文本文件，包含需要缓存的资源列表。它必须以正确的 MIME 类型 text/cache-manifest 返回，通常需要在服务器上进行配置。

立即学习“前端免费学习笔记（深入）”；

示例：cache.manifest

CACHE MANIFEST
# 版本号：v1.0

CACHE:
/index.html
/style.css
/script.js
/image.png

NETWORK:
/login.php

FALLBACK:
/ /offline.html

说明：

CACHE: 明确列出需要缓存的资源（默认所有条目都在此组）
NETWORK: 表示这些资源不缓存，仅在线时可访问
FALLBACK: 定义备用资源，当请求失败时使用（如网络断开）

3. 配置服务器 MIME 类型

服务器必须支持 .manifest 文件的正确 MIME 类型。否则缓存将无法工作。

常见服务器配置方法：

存了个图

视频图片解析/字幕/剪辑，视频高清保存/图片源图提取

查看详情

Apache： 在 .htaccess 或配置文件中添加：
AddType text/cache-manifest .manifest
Nginx： 在配置文件中添加：
types { text/cache-manifest manifest; }
IIS： 在 web.config 中添加 MIME 映射：
<mimeMap fileExtension=".manifest" mimeType="text/cache-manifest" />

4. 缓存更新机制

只有当 manifest 文件内容发生变化时，浏览器才会更新缓存。即使资源本身已修改，只要 manifest 未变，缓存就不会更新。

建议在 manifest 中添加注释作为版本标记，例如：

# 版本 1.1

修改此行即可触发缓存更新。

JavaScript 可监听缓存状态：

var appCache = window.applicationCache;
appCache.update(); // 尝试更新缓存

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