HTML5 应用程序缓存

你可以使用 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 类型。