HTML5 应用程序缓存

Created: October-16, 2018

你可以使用 HTML5 缓存功能创建脱机应用程序。

什么是应用缓存

通常，大多数基于 Web 的应用程序仅在你在线时才有效。但是 HTML5 引入了一种应用程序缓存机制，允许浏览器自动保存 HTML 文件以及需要在本地计算机上正确显示它的所有其他资源，这样浏览器仍然可以访问网页及其资源而无需互联网连接。

以下是使用 HTML5 应用程序缓存功能的一些优点：

离线浏览 - 即使用户离线或网络连接出现意外中断，用户也可以使用该应用程序。
提高性能 - 缓存资源直接从用户的计算机而不是远程服务器加载，因此网页加载速度更快，性能更好。
减少 HTTP 请求和服务器负载 - 浏览器只需从远程服务器下载更新/更改的资源，以最小化 HTTP 请求并减少服务器负载。

提示： 所有主要的现代浏览器（如 Firefox，Chrome，Opera，Safari 和 Internet Explorer 10+）都支持 HTML5 的应用程序缓存功能。

使用清单缓存文件

要缓存文件以供脱机使用，你需要完成以下步骤：

第 1 步：创建缓存清单文件

清单是一个特殊的文本文件，它告诉浏览器要存储哪些文件，不存储哪些文件以及要用其他文件替换哪些文件。清单文件始终以单词 CACHE MANIFEST （大写）开头。以下是一个简单的清单文件的示例：

CACHE 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.php
 
FALLBACK:
/ /offline.html

代码说明

你可能会想到该代码的全部内容。好的，让我们直接进入它。清单文件可以有三个不同的部分：CACHE，NETWORK 和 FALLBACK。

CACHE: 部分标题下列出的文件（或紧接 CACHE MANIFEST 在行之后）在第一次下载后显式缓存。
NETWORK: 部分标题下列出的文件是列出白名单的资源，这些资源从不缓存且不可脱机使用。
FALLBACK: 部分指定浏览器在无法建立与服务器的连接时应使用的回退页面。本节中的每个条目都列出了两个 URI - 第一个是资源，第二个是后备。
以 # 开头的行是注释行。

警告： 不要在缓存清单文件中指定清单文件本身，否则几乎不可能通知浏览器新的清单可用。

第 2 步：使用你的缓存清单文件

创建后，在 Web 服务器上上载缓存清单文件 - 确保 Web 服务器配置为使用 MIME 类型 text/cache-manifest 提供清单文件。

现在要使缓存清单生效，你需要在网页中启用它，方法是将清单属性添加到根元素，如下所示： <html>

<!DOCTYPE html>
<html lang="en" manifest="example.appcache">
<head>
    <title>HTML5 Application Cache</title>
</head>
<body>
    <!--The document content will be inserted here-->
</body>
</html>

注意： 在 Apache Web 服务器上，可以通过添加 AddType text/cache-manifest .appcache 到 .htaccess 应用程序根目录中的文件来设置 manifest（ .appcache）文件的 MIME 类型。