HTML5 application cache

HTML5带来了application cache这一新特性,好多文档和书籍介绍了使用它来进行离线应用的开发,由于自己做的手机应用还得面临弱爆的GPRS网络,也考虑使用以下来改善用户的体验性,使用过程中也遇到了一些困惑和不解,比如他的FALLBACK功能就没有实现,还好这个功能对我们的应用来说不是那么的非用不可,时间也紧张,就没有深究它了,下面说一下Application Cache实现离线的基本步骤(所有代码在chrome和firefox上测试通过)。

1、首先需要一个manifest文件来保存需要离线的文件和页面的信息,文件的结构如下:
CACHE MANIFEST   #必须放在开头,“#”用来做注释
#VERSION 1.6   
#cache块是需要缓存到本地的文件列表
CACHE:   
static/js/lib/zepto.js
static/js/lib/zepto-min.js
static/css/m.css
test.html
static/css/test.css
nav
nav.htm
#network块是不需要缓存的文件列表,配为“*”的话浏览器会请求除cache块中的所有文件
NETWORK:
*
#fallback块每一行有两个文件,此配置的作用是当地一个不能从服务器请求到就用第二个文件来代替,很明显第二个是
#事先就  缓存到了浏览器里了,这个没有测试通过,感兴趣的同学可以自己试试。
FALLBACK:

2、在页面中引入上面完成的manifest文件,假如我们的文件叫做 cache.manifest,则我们的页面应该如下:
<!DOCTYPE html>
<html manifest="cache.manifest">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="static/js/lib/zepto.js"></script>
<script type="text/javascript" src="static/js/lib/zepto-min.js"></script>
<style type="text/css" src="static/css/m.css"></style>
<style type="text/css" src="static/css/test.css"></style>
</head>
<body>
Test Application Cache.
change by admin
</body>
</html>

3、我们在项目里引入了cache.manifest文件,浏览器需要去读取清单,所以就需要我们的服务器支持 text/cache-manifest这个mime类型。下面是一些主流服务器的配置方法:
tomcat : 
     在安装目录的cof/web.xml中增加如下的代码:
     <mime-mapping>
        <extension>manifest</extension>
        <mime-type>text/cache-manifest</mime-type>
    </mime-mapping>

apache:
      在网络根目录的.htaccess文件中添加一个AddType指令:AddType text/cache-manifest .manifest

好了,到现在就可以体验离线带来的无限快乐与痛苦了。
我的体会是:
1、manifest文件格式一定不能错,错了浏览器也不会给任何提示,只是不给你用离线功能了,很悲催。

2、设置过manifest的页面会被自动缓存,直到清楚浏览器数据

3、被设置缓存的页面会被永久的被保存,但是用户在被缓存的页面清空浏览器数据时,此页面会被重新加载再次缓存

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值