讲一下html5的新属性manifest属性的用法

2026-02-26 11:04:13 网络作者：本站点击：

HTML5 的 manifest 属性用于启用应用程序缓存（Application Cache），使网页应用能够在没有网络连接的情况下运行。这个属性是 HTML5 引入的一个重要特性，允许开发者指定一个缓存清单文件，从而实现离线浏览功能。

基本用法

1. 在 HTML 文档中添加 manifest 属性

<!DOCTYPE html>
<html manifest="cache.manifest">
<head>
    <title>示例页面</title>
</head>
<body>
    <h1>我的网页</h1>
    <p>这是网页内容</p>
</body>
</html>

2. 创建缓存清单文件

缓存清单文件（通常以 .manifest 或 .appcache 为扩展名）定义了需要缓存的资源。文件必须以 CACHE MANIFEST 开头。

CACHE MANIFEST
# 版本 1.0
CACHE:
/index.html
/style.css
/script.js
/images/logo.png
NETWORK:
*
FALLBACK:
/offline.html

manifest 文件结构详解

1. CACHE 部分

定义需要缓存的资源：

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

2. NETWORK 部分

定义需要联网访问的资源：

NETWORK:
/login.php
/api/*

3. FALLBACK 部分

定义当资源无法访问时的备用资源：

manifestCopy CodeFALLBACK:
NETWORK:
/login.php
/api/*

工作原理

浏览器检查 HTML 文档中的 manifest 属性
如果是首次访问，浏览器下载并缓存 manifest 文件中列出的所有资源
后续访问时，浏览器会检查 manifest 文件是否有更新
如果更新，浏览器会重新下载所有资源并更新缓存

实际应用示例

<!DOCTYPE html>
<html manifest="app.manifest">
<head>
    <meta charset="UTF-8">
    <title>离线应用示例</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>我的离线应用</h1>
    <p>即使没有网络连接，这个页面也能正常显示</p>
    <script src="script.js"></script>
</body>
</html>

对应的 app.manifest 文件：

CACHE MANIFEST
# 版本 2025-04-05
CACHE:
/index.html
/style.css
/script.js
/images/logo.png
NETWORK:
/api/*
FALLBACK:
/offline.html

注意事项

‌浏览器支持‌：虽然大部分现代浏览器都支持 manifest 属性，但需要注意的是，HTML5 应用程序缓存技术已被标准废弃，推荐使用 Service Workers 和 PWA 技术。
‌MIME 类型‌：服务器必须正确配置 manifest 文件的 MIME 类型：

Apache: AddType text/cache-manifest .appcache
Nginx: text/cache-manifest appcache appcache?

‌更新机制‌：只有当 manifest 文件内容发生变化时，浏览器才会更新缓存。
‌跨域限制‌：manifest 文件必须与主页面同域。

重要提醒

虽然 manifest 属性在 HTML5 中是一个有效的特性，但需要注意的是，应用程序缓存技术已被 Web 标准废弃，不再推荐使用此功能。现代 Web 开发推荐使用 Service Workers 和 Progressive Web App (PWA) 技术来实现离线功能。

标签：