首页风格
门户
博客

GBin1专题之HTML5教程 - 第十二篇:HTML5应用缓存(application cache)

日期:2012-4-25  来源:GBin1.com

使用HTML5我们可以通过创建一个缓存manifest文件来方便的生成一个离线版的应用。

什么是应用缓存(application cache)?

HTMl5引入了application cache概念。意思是你可以缓存一个web应用,然后在没有互联网的情况下访问它。

主要三个的好处:

  • 离线浏览器 - 用户可以在离线状态下使用应用
  • 速度 - 缓存的资源加载速度很快
  • 减少了服务器负载 - 浏览器只会去服务器下载更新的或者改变了的资源

浏览器支持

iefirefoxchromeoperasafari

除了IE,Firefox,Chrome,Opera和Safari 5都支持这个特性。

HTML5 Cache Manifest 演示

<!DOCTYPE HTML>
<html manifest="demo.appcache">
<body>
The content of the document......
</body>
</html>

在线演示

Cache Manifest 基本代码

为了启动应用缓存,你需要在document的html中包含如下属性:

<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>

每一个包含这个manifest属性的页面当用户访问的时候都会被缓存。如果manifest属性没有指定的话,将不会缓存(除非网页被直接在manifest文件中指定)。

推广的manifest文件扩展是".appcache"。

一个manifest文件需要被正确的MIME-type支持,这种文件类型为"text/cache-manifest"。必须在web服务器上配置。

Manifest文件

manifest文件是一个简单的文本文件,告诉了浏览器去缓存什么内容(或者不缓存什么内容)。

manifest文件包含下面三个部分:

  • CACHE MANIFEST - 在这个列表标题下的文件将会在下载后被缓存 
  • NETWORK - 在这个列表标题下的文件将要求连接到服务器,不会进行缓存。
  • FALLBACK - 在这个列表标题下的文件如果不能访问时,则指定特定的fallback页面

CACHE MANIFEST

第一行,CACHE MANIFEST要求如下:

CACHE MANIFEST
/theme.css
/logo.gif
/main.js

以上manifest资源文件包含了3个资源,一个CSS文件,一个GIF文件还有一个js文件。当这个manifest文件加载后,浏览器将会从服务器根目录下载3个文件,一旦不能访问互联网,资源仍旧可以被访问。

NETWORK

NETWORK部分指定了文件"login.jsp“将永远不需要缓存,所以离线不可用:

NETWORK:
login.jsp

一个星号可以用表示所有的其它资源或者文件需要一个互联网连接:

NETWORK:
*

FALLBACK

fallback部分指定了offline.html文件将会在无法访问互联网的情况下替代所有的/html5/下的文件 。

FALLBACK:
/html5/ /offline.html

注意:第一个的URI是资源,第二个是fallback

更新缓存

一旦一个应用被缓存,他将保持缓存除非一下情况发生:

  • 用户删除了缓存
  • manifest文件被修改
  • 应用缓存被程序修改

一个演示 - 完成Cache Manifest文件

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK:
login.asp

FALLBACK:
/html5/ /offline.html

小技巧:以"#"开始的行是注释行,但是可以有其它用处。一个应用的缓存只有在manifest文件修改的时候更新。如果你编辑一个图片或者修改了javascript功能,那些变化是不会被重新缓存的。在注释中更新日期和版本是让浏览器重新缓存你的文件的一个方法。

应用缓存的一些注意问题

缓存时候得注意。

一旦文件被缓存,浏览器将会持续的显示缓存版本内容,即使你修改了服务器文件。为了让浏览器更新缓存,你需要修改manifest文件。

注意:浏览器可以有很多不同大小限制的缓存数据(有些浏览器允许5M的缓存数据)。

来源:GBin1专题之HTML5教程 - 第十二篇:HTML5应用缓存(application cache)

喜欢我们的文章请您与朋友分享:

?ü?à

留言

友情提示: 本站博客不再支持访客留言,如果有问题或者留言,请发布到  GBtags.com


  1. 常平婚纱摄影

    来采访 ,,,要回访哦
    2012-8-19 下午3:11
今日推荐