个性化阅读
专注于IT技术分析

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>

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

赞(0)
未经允许不得转载:srcmini » html5应用程序缓存 – HTML5教程

评论 抢沙发

评论前必须登录!