HTML5 应用程序缓存
在本教程中，您将学习如何使用 HTML5 缓存功能创建离线应用程序。
什么是应用缓存？
通常，大多数基于 Web 的应用程序只有在您在线时才能运行。 但是 HTML5 引入了一种应用缓存机制，允许浏览器自动保存 HTML 文件和所有其他需要在本地机器上正常显示的资源，这样浏览器仍然可以在没有互联网连接的情况下访问网页及其资源 .
以下是使用 HTML5 应用程序缓存功能的一些优点:
- 离线浏览 — 用户即使在离线或网络连接出现意外中断时也可以使用该应用程序。
- 提高性能 — 缓存资源直接从用户的机器而不是远程服务器加载，因此网页加载速度更快，性能更好。
- 减少 HTTP 请求和服务器负载 — 浏览器只需从远程服务器下载更新/更改的资源，从而最大限度地减少 HTTP 请求并节省宝贵的带宽并减少 Web 服务器上的负载。
提示： HTML5 的应用程序缓存功能在所有主要的现代网络浏览器（如 Firefox、Chrome、Opera、Safari 和 Internet Explorer 10 及更高版本）中均受支持。
使用清单缓存文件
要缓存文件以供离线使用，您需要完成以下步骤：
第 1 步：创建缓存清单文件
清单是一个特殊的文本文件，它告诉浏览器存储哪些文件，不存储哪些文件，以及用其他文件替换哪些文件。 清单文件始终以单词 CACHE MANIFEST（大写）开头。 这是一个简单清单文件的示例:
示例
DownloadCACHE MANIFEST
# v1.0 : 10-08-2014
CACHE:
# pages
index.html
# styles & scripts
css/theme.css
js/jquery.min.js
js/default.js
# images
/favicon.ico
images/logo.png
NETWORK:
login.asp
FALLBACK:
/ /offline.html代码说明
你可能会想那段代码是关于什么的。好的，让我们直接进入它。一个清单文件可以包含三个不同的部分：CACHE、NETWORK 和 FALLBACK。
- 在
CACHE: 部分标题下（或紧跟在CACHE MANIFEST行之后）列出的文件在首次下载后会被显式缓存。 NETWORK:部分标题下列出的文件是列入白名单的资源，它们从不缓存并且不能脱机使用。这意味着用户只有在线时才能访问login.asp页面。FALLBACK:部分指定浏览器在无法建立与服务器的连接时应使用的备用页面。本节中的每个条目都列出了两个 URI —第一个是主要资源，第二个是后备资源。例如，在我们的例子中，如果用户离线，将显示offline.html页面。此外，两个 URI 必须与清单文件来自同一来源。- 以井号 (
#) 开头的行是注释行。
注意：如果存在应用程序缓存，浏览器会直接从缓存中加载文档及其相关资源，而无需访问网络。 在该浏览器检查清单文件是否已在服务器上更新后，如果已更新，则浏览器会下载清单的新版本以及其中列出的资源。
警告：不要在缓存清单文件中指定清单文件本身，否则几乎不可能通知浏览器有新的清单可用。
第 2 步：使用您的缓存清单文件
创建后，将您的缓存清单文件上传到 Web 服务器上 — 确保 Web 服务器配置为使用 MIME 类型 text/cache-manifest 提供清单文件。
现在要使缓存清单生效，您需要在网页中启用它，方法是将 manifest 属性添加到根 <html> 元素，如下所示:
<!DOCTYPE html>
<html lang="en" manifest="example.appcache">
<head>
<title>Using the Application Cache</title>
</head>
<body>
<!--The document content will be inserted here-->
</body>
</html>注意： 在 Apache Web 服务器上，可以通过将 AddType text/cache-manifest .appcache 添加到应用程序根目录下的 .htaccess 文件或与应用程序相同的目录中来设置清单 (.appcache) 文件的 MIME 类型 .