HTML5 APP缓存

用APP缓存可以很容易的实现离线版的网页应用,只需要创建一个manifest文件.

HTML5介绍了APP缓存,意思是网页应用可以被缓存,并且在没有联网的情况下也可以访问.

APP缓存给了应用三个有利条件:

下面的例子演示了一个被缓存HTML文档

为了允许应用缓存,只需要在<html>标签里包含manifest属性:

添加了manifest属性的页面,当用户访问时就会被缓存.如果页面没有被指定manifest属性,页面将不会被缓存(除非页面在manifest文件里被直接指定了).

manifest文件的扩展名建议用".appcache".

manifest文件需要使用正确的文件类型,可以是"text/cache-manifest".必须在服务器端配置.

manifest文件是一个简单的文本文件,告诉浏览器缓存什么(和不缓存什么).

manifest文件有三个部分:

第一行的"CACHE MANIFEST"是必不可少的:

上面的文件清单列举了三个资源:一个CSS文件,一个GIF图片和一个JavaScript文件.当manifest文件被加载了,浏览器将从网站根目录下载这三个文件. 然后,无论何时用户是否连接到了网络,资源将仍然可用.

下面的NETWORK部分指定文件"login.php"不会被缓存,断网时是不可访问的:

星号用来指示全部的资源或文件都需要联网才能访问:

如果网络连不上,下面的FALLBACK部分指定"offline.html"文件将替代/html/目录下所有的文件:

注意:第一个URI是资源,第二个是回退页.

一般应用被缓存了,缓存部分将一直保存,直到下面的情况发生了:

提示:以"#"符号开始的行是注释,但是也可以用于其它目的. 一个应用的manifest文件改变了,它的缓存也会改变. 如果你编辑一张图片或改变JavaScript函数,这些改变都不会被重新缓存. 在注释行里更新日期和版本是一种方法来让浏览器重新缓存你的文件.

注意你缓存了什么.

一旦文件被缓存了,就算你改变了服务器上的文件,浏览器还是将继续显示被缓存的版本, 为了确保浏览器更新缓存,你需要改变manifest文件.

注意:不同的浏览器缓存数据的大小也不一样(一些浏览器对于每个网站的限制是5MB).

()

21技术 www.21xrx.com 备案号：蜀ICP备17043188号-2

其它