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:
manifest例子, 如果离线应用要用到js，则CACHE后要加 js 文件
CACHE MANIFEST
#该文件的第一行必须是CACHE MANIFEST
#下面指定该清单文件的版本号
#version 1
#CACHE:后面列出的是需要缓存的资源
CACHE:
index.html
logo.jpg
#NETWORK:后面列出的不进行缓存的资源
NETWORK:
*
#FALLBACK:后面每行需要列出两个资源。
#第一个资源是处于在线状态时使用的资源。
#第二个资源是处于离线状态时所使用的资源。
FALLBACK:
test.js offline.js
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、被设置缓存的页面会被永久的被保存，但是用户在被缓存的页面清空浏览器数据时，此页面会被重新加载再次缓存
4、 需要在线update时可以通过改变服务器端的manifest文件（VERSION ），来使客户端update
例子：
test1.html
<!DOCTYPE html>
<html manifest="test1.manifest">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/js1.js"></script>
<title>Insert title here</title>
</head>
<body>
<h1>检测服务器更新 </h1>
<h2> xx</h2>
<input type="button" id="update" value="手动更新" οnclick="myupdate()" /> <br/>
</body>
</html>
function myupdate() {
window.applicationCache.update();
}
setInterval(function() {
window.applicationCache.update();
}, 2000);
window.applicationCache.onupdateready = function() {
if (confirm("发现新版本，是否立即更新?")) {
applicationCache.swapCache();
location.reload();
}
};
CACHE MANIFEST
#version 2
CACHE:
test1.html
js/jquery/jquery-1.9.1.min.js
js/js1.js
扫一扫
1237
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
