HTML5离线存储怎么实现_HTML5离线应用缓存Manifest文件的使用方法-html教程-PHP中文网

HTML5离线存储怎么实现_HTML5离线应用缓存Manifest文件的使用方法

蓮花仙者

发布： 2025-11-20 20:27:06

原创

780人浏览过

HTML5离线存储通过manifest文件实现，列出需缓存的资源，配合HTML的manifest属性和服务器MIME配置，使页面在无网时仍可访问，尽管现已被Service Worker取代。

html5离线存储怎么实现_html5离线应用缓存manifest文件的使用方法

HTML5 离线存储通过 Application Cache（简称 AppCache）机制实现，使用一个名为 manifest 文件 的特殊文本文件来指定哪些资源需要被浏览器缓存，以便在用户无网络连接时仍能正常访问页面。虽然 AppCache 已被现代浏览器逐步弃用（推荐使用 Service Worker 和 Cache API），但在一些老项目或特定场景中仍有应用。

manifest 文件的作用

manifest 文件是一个纯文本文件，列出网页所需的所有离线资源，包括 HTML、CSS、JavaScript、图片等。浏览器根据该文件缓存资源，使用户在断网状态下也能访问已缓存的页面。

如何启用离线缓存

要启用 HTML5 离线存储，需完成以下三步：

在 HTML 标签中添加 manifest 属性：指向 manifest 文件路径。
创建 .appcache 或 .manifest 文件：定义需要缓存的资源。
配置服务器支持 MIME 类型：确保服务器能正确识别 manifest 文件类型。

示例：HTML 页面引用 manifest 文件

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

在 html 标签中加入 manifest 属性：

<html manifest="cache.manifest">

这表示当前页面及其关联资源将根据 cache.manifest 文件进行缓存管理。

manifest 文件的编写规则

manifest 文件通常以 CACHE MANIFEST 开头，分为三个可选区块：

CACHE: 明确列出需要缓存的资源（默认行为）。
NETWORK: 列出无需缓存、必须联网才能访问的资源。
FALLBACK: 指定当资源无法加载时的备用页面。

示例：cache.manifest 文件内容

Text Mark

处理文本内容的AI助手

查看详情

CACHE MANIFEST
# v1.0 - 2025-04-05

CACHE:
/index.html
/style.css
/script.js
/images/logo.png

NETWORK:
/api/

FALLBACK:
/offline.html

说明：

# 开头为注释，常用于版本控制，修改注释可触发浏览器重新缓存。
CACHE 下的资源会被自动缓存。
NETWORK 中的路径不会被缓存，必须联网访问。
FALLBACK 表示如果请求失败，返回 offline.html。

服务器 MIME 类型配置

服务器必须将 .manifest 或 .appcache 文件识别为正确的 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" />