一,离线缓存
文档的本地缓存,在断网的情况下依旧能够访问,
但是不能访问网络接口
1,检测支持性
if(window.applicationCache){
alert('支持');
}else{
alert('不支持');
}
2,引入文件
name.manifest
这是一个配置缓存的文件
CACHE:将制定的文件全部缓存到本地
NETWORK:将制定的文件总是从网络下载
FAKKBACK:制定的文件如果找不到,会被重新定位到这个地址
CACHE MANIFEST 开头
#Cache Manifest v3.01
#:表示注释
引入缓存文件方式:
在html标签中使用:
manifest='name.manifest';
3,工作原理
见图片
4,缓存状态
applicationCache.status
0:没有缓存
1:空闲(缓存为最新状态)
2:检查中
3:下载中
4:更新就绪
5:缓存过期
5,缓存更新
applicationCache.update();
6,updateready 事件
当有新的缓存,并跟新完成以后,会触发这个时间
applicationCache.addEventListener('updateready',function(){})
7,progress 事件
当有新的缓存时,并处于正在下载过程中,会不断的触发这个事件
event.totle:一共需要加载多少文件
applicationCache.addEventListener('progress',function(event){})
8,其他事件:
checking事件:正在检查
downloading事件:正在下载
updateready事件:更新完成
obsolete:缓存过期
cached:空闲,缓存为最新状态
error:错误
noupdate:检查更新错误结束,没有需要更新的内容
9,注意事项
1)浏览器对缓存数据的容量限制是不一样的(一般浏览器显示每个站点缓存5m)
2)如果manifest文件或者内部列举的某一个文件不能正常下载,整个缓存的更新都会失败,
浏览器继续使用全部的老文件(原来缓存的文件)
3)引入manifest文件的html文件必须和manofest文件同源,在同一个域下
4)FALLBACK中的文件必须与manifest文件同源
5)如果文件被缓存了,当使用本地绝对路径的file协议打开时也会打开缓存文件
6)站点中其他文件没有缓存,但是如果使用到的资源在缓存中,也会从缓存中访问
7)当manifest文件发生改变时,资源请求本身也会触发更新
8)如果离线存储资源有更新,但是在第一次打开该文件时还会使用老版本
下面是案例
<!DOCTYPE html>
<html lang="en" manifest="test.manifest">引入文件
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/test.css">
</head>
<body>
<div class="box">今天天气不好</div>
<img src="images/skin.gif" alt="">
</body>
<script src="js/test.js"></script>
<script type="text/javascript">
setInterval(function() {
console.log(applicationCache.status);
},3000)
</script>
</html>
test.manifest文件内容
CACHE MANIFEST
#Cache Manifest v3.01
CACHE:
02_离线缓存测试.html
NETWORK:
*
FALLBACK:
/ error.html