HTML5离线缓存

最新推荐文章于 2025-06-05 06:51:06 发布

原创最新推荐文章于 2025-06-05 06:51:06 发布 · 695 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#离线缓存

H5 专栏收录该内容

6 篇文章

订阅专栏

一,离线缓存
   文档的本地缓存,在断网的情况下依旧能够访问,
   但是不能访问网络接口
   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