标签:
applicationCache
离线应用是什么?
乘坐飞机、手机信号弱、去演讲的时候,可能没有网络,这个时候就可以采用离线应用。
离线存储如何工作的?
离线存储的好处?
没网的时候,可以正常访问
快速相应页面,不必用多个HTTP占用资源带宽
缓存的可以是任何文件
搭建离线应用程序
①服务器设置头信息 :
AddType text/cache-manifest .manifest
② html标签加 :
manifest=“xxxxx.manifest”
<!DOCTYPE html>
<html manifest="mv.manifest">
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
//console.log(applicationCache);
var ac = applicationCache;
//console.log(ac.status);
ac.onchecking = function() {
//检测缓存清单文件
console.log(‘checking‘, ‘检测缓存清单文件‘);
}
ac.onnoupdate = function() {
console.log(‘noupdate‘, ‘清单文件没有更新‘);
}
ac.ondownloading = function() {
console.log(‘downloading‘, ‘开始下载缓存清单文件‘);
}
ac.onprogress = function() {
console.log(‘progress‘, ‘正在下载缓存清单中的文件‘)
}
ac.oncached = function() {
console.log(‘cached‘, ‘缓存清单文件更新完成‘);
}
ac.onupdateready = function() {
ac.swapCache();
// location.reload();
console.log(‘updateready‘, ‘缓存准备就绪‘);
}
ac.onobsolete = function() {
console.log(‘obsolete‘, ‘清单文件.manifase不存在‘);
}
ac.onerror = function() {
console.log(‘error‘, ‘出错了‘);
}
</script>
</head>
<body>
这是1.html文件内容
</body>
</html>
③写manifest文件 : 离线的清单列表
先写 : CACHE MANIFEST
FALLBACK : 第一个网络地址没获取到,就走第二个缓存的
NETWORK :无论缓存中存在与否,均从网络获取
CACHE MANIFEST
CACHE:
# 样式
http://file.234g.cn/css/reset_20150710.css
http://pic.234g.cn/css/Found2015-9-21.css?VM
# 脚本
http://file.234g.cn/js/appframework.min.2.1.0.js
#图片
http://pic.234g.cn/img/game-1.jpg@200w_200h_1e_1c_50Q
http://pic.234g.cn/img/game-2.jpg@200w_200h_1e_1c_50Q
http://pic.234g.cn/img/game-3.jpg@200w_200h_1e_1c_50Q
http://pic.234g.cn/img/go_1.png@200w_1e_1c_50Q.png
http://pic.234g.cn/img/yellow.jpg
http://pic.234g.cn/img/go_2.png@200w_1e_1c_50Q.png
http://pic.234g.cn/img/red.jpg
http://pic.234g.cn/img/clock.png
http://pic.234g.cn/img/search.png?wq
NETWORK:
*
FALLBACK
1.打开httpd.conf
将Options FollowSymLinks
AllowOverride None
改为
Options FollowSymLinks
AllowOverride All
2.去掉下面的注释
LoadModule rewrite_module modules
/mod_rewrite
.so
3.从启apache服务
在js中提供了一个全局applicationCache对象
这个对象下提供了一些属性和方法来让我们去操作applicationCache
appliactionCache
.stauts : 状态
事件:
checking : 检测缓存是否需要更新的时候触发
noupdate : 检测以后,发现没有更新的缓存文件信息的时候触发
downloading : 检测有更新的时候触发
progress : 更新缓存的时候触发
cached : 更新缓存完毕的时候触发
updateready : 所有缓存已经就绪的时候触发
obsolete : manifest的请求出现404或者410错误,应用程序缓存被取消的时候触发
error : 更新出错的时候触发
方法:
update() : 发起应用程序缓存下载进程
abort() : 取消正在进行的缓存下载
swapCache() : 切换成本地最新的缓存环境
标签:
原文地址:http://www.cnblogs.com/xiongcui/p/4885162.html