html5应用程序缓存 – HTML5教程

上一章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类型。

    推荐阅读