html5应用程序缓存 – HTML5教程 html5应用程序缓存|HTML

上一章HTML5教程请查看：html5 Web存储
在本教程中，你将学习如何使用HTML5缓存特性创建离线应用程序。
什么是应用程序缓存？通常，大多数基于web的应用程序只有在你在线时才能工作。但是HTML5引入了一种应用程序缓存机制，允许浏览器自动保存HTML文件和所有其他需要在本地机器上正确显示的资源，这样浏览器仍然可以在没有互联网连接的情况下访问web页面及其资源。
以下是使用HTML5应用缓存功能的一些好处：

离线浏览-用户可以使用应用程序，即使他们离线或有意外中断的网络连接。
提高性能—缓存的资源直接从用户的机器而不是远程服务器加载，因此网页加载更快，性能更好。
减少HTTP请求和服务器负载——浏览器只需从远程服务器下载更新/更改的资源，从而最小化HTTP请求并节省宝贵的带宽，同时减少web服务器的负载。

提示：HTML5的应用程序缓存功能在所有主要的现代web浏览器中都得到了支持，比如Firefox、Chrome、Opera、Safari和Internet Explorer 10及以上。
使用清单缓存文件要缓存离线使用的文件，你需要完成以下步骤：
步骤1：创建缓存清单文件清单是一个特殊的文本文件，它告诉浏览器要存储什么文件，不存储什么文件，以及用其他文件替换什么文件。清单文件总是以单词缓存清单开头(大写)。下面是一个简单清单文件的例子：

缓存清单 # v1.0 : 10-08-2020 缓存: # 页面 index.html # 样式 & 脚本 css/theme.css js/jquery.min.js js/default.js # 图片 /favicon.ico images/logo.png 网络: login.php 回退: / /offline.html

代码解释
你可能会想那是什么代码。好吧，我们直接开始吧。清单文件可以有三个不同的部分：缓存、网络和回退。

在缓存下列出的文件：节标头(或紧接在缓存清单行之后)在第一次下载后显式缓存。
在NETWORK:节标头下列出的文件是白色列表的资源，它们从不被缓存，也不能离线使用，这意味着用户只有在联机时才能访问login.php页面。
回退：部分指定在无法建立到服务器的连接时浏览器应该使用的回退页面。本节中的每个条目都列出了两个uri——第一个是主资源，第二个是备用资源。例如，在我们的示例中，如果用户离线，就会显示offline.html页面。另外，两个uri必须与清单文件来自同一个源文件。
以散列符号(#)开头的行是注释行。

注意：如果存在应用程序缓存，浏览器直接从缓存加载文档及其相关资源，而不访问网络。在浏览器检查清单文件是否已在服务器上更新之后，如果已经更新，浏览器将下载清单的新版本和其中列出的资源。
警告：不要在缓存清单文件中指定清单文件本身，否则几乎不可能通知浏览器有新的清单可用。
步骤2：使用缓存清单文件创建之后，将缓存清单文件上传到web服务器上——确保web服务器配置为使用MIME类型text/cache-manifest来提供清单文件。
现在要使缓存清单生效，你需要在web页面中启用它，方法是将清单属性添加到根元素< html> 元素，如下所示：

< !DOCTYPE html> < html lang="en" manifest="example.appcache"> < head> < title>使用应用程序缓存< /title> < /head> < body> < !--文档内容将插入这里--> < /body> < /html>

【html5应用程序缓存 – HTML5教程】注意：在Apache web服务器上，可以通过将AddType text/cache-manifest .appcache添加到应用程序根目录中的.htaccess文件或与应用程序相同的目录中来设置清单(.appcache)文件的MIME类型。