H5离线存储
如何使用
首先,我们建立一个html文件,类似这样:
<!DOCTYPE html>
<html lang="en" manifest="manifest.appcache">
<head>
<meta charset="UTF-8">
<title>APP CACHE</title>
<link rel="stylesheet" type="text/css" href="test.css">
</head><!-- text/cache-mainfest -->
<body>
<img src="img/1.jpg">
<img src="img/2.jpg">
<script type="text/javascript">
window.addEventListener('load', function(e){
console.log(window.applicationCache.status);
})
</script>
</body>
</html>
可能有些代码看不懂,我们先看最简单的,第一行配置了一个manifest=”manifest.appcache”(注意是mani不是main),这是使用app cache首先要配置的,然后我们在这个html文件里引入了两个img做为测试用,然后监听了load时间来查看看application的status,关于applicationCache的api,可以查看。
然后在相同目录下新建一个manifest.appcache文件,注意关于路径要和html页面配置时一致即可。
CACHE MANIFEST
#version 1.3
CACHE:
img/1.jpg
img/2.jpg
test.css
NETWORK:
*
关于manifest.appcache文件,基本格式为三段: CACHE,
NETWORK,
与 FALLBACK,其中NETWORK和FALLBACK为可选项,而第一行CACHE MANIFEST为固定格式,必须写在前面。
CACHE:(必须)
标识出哪些文件需要缓存,可以是相对路径也可以是绝对路径。例如:aa.css,http://www.baidu.com/aa.js.
NETWORK:(可选)
这一部分是要绕过缓存直接读取的文件,可以使用通配符*,,也就是说除了上面的cache文件,剩下的文件每次都要重新拉取。例如*,login.php。
FALLBACK:(可选)
指定了一个后备页面,当资源无法访问时,浏览器会使用该页面。该段落的每条记录都列出两个 URI—第一个表示资源,第二个表示后备页面。两个 URI 都必须使用相对路径并且与清单文件同源。可以使用通配符。例如*.html /offline.html。
manifest 文件需要配置正确的 MIME-type,即 "text/cache-manifest"。必须在 web 服务器上进行配置
OK,上面文件配置完成之后,application cache就可以运行了。
查看console:
可以看到,一下子这么多log,但是除了4是我们console的log之外,其他的都是appcache自己打的,因为我们配置了manifest,系统会默认打出appcache的log。关于status的值:
可选值 | 匹配常量 | 描述 |
0 |
appCache.UNCACHED |
未缓存 |
1 |
appCache.IDLE |
闲置 |
2 |
appCache.CHECKING |
检查中 |
3 |
appCache.DOWNLOADING |
下载中 |
4 |
appCache.UPDATEREADY |
已更新 |
5 |
appCache.OBSOLETE |
失效 |
然后,通过log,我们看到一些文件已经被缓存,我们可以查看chrome Resources来查看:
可以看到我们的test.html文件也已经被缓存下来了,type是master,顾名思义一个管理着,而manifest.appcache文件为manifest类型。此时我们的appcache已经完成。我们可以尝试把网线断了,或者把服务器关了,同样,我们的项目仍然可以访问,这就是离线缓存。此时console:
证明直接从缓存拿去文件:
更新缓存的方式
- 更新manifest文件
浏览器发现manifest文件本身发生变化,便会根据新的manifest文件去获取新的资源进行缓存。
当manifest文件列表并没有变化的时候,我们通常通过修改manifest注释的方式来改变文件,从而实现更新。
- 通过javascript操作
- 清除浏览器缓存
window.applicationCache.addEventListener('updateready', function(){
console.log('updateready!');
window.applicationCache.swapCache();//应用更新后的缓存来替换原来的缓存
});
清除浏览器缓存再试一次,这次我们在console里调用window.applicationCache.update();,看看发生了什么:
updateready事件触发了,同样,appcache也更新了缓存,其中swapCache方法的意思是重新应用更新后的缓存来替换原来的缓存!,到这里后基本的appcache也差不多了。
注意事项:
- 站点离线存储的容量限制是5M
- 如果manifest文件,或者内部列举的某一个文件不能正常下载,整个更新过程将视为失败,浏览器继续全部使用老的缓存
- 引用manifest的html必须与manifest文件同源,在同一个域下
- FALLBACK中的资源必须和manifest文件同源
- 当一个资源被缓存后,该浏览器直接请求这个绝对路径也会访问缓存中的资源。
- 站点中的其他页面即使没有设置manifest属性,请求的资源如果在缓存中也从缓存中访问
- 当manifest文件发生改变时,资源请求本身也会触发更新
完!
H5离线存储的更多相关文章
- H5 离线存储-使用 serverWorker 实现
H5 离线存储-使用 serverWorker 实现 离线存储所用技术 serverWorker serviceWorker 生命周期 install 事件会在 serviceWorker 注册成功时 ...
- H5离线存储-manifest
起源 html5之前的网页,都是无连接,必须联网才能访问,这其实也是web的特色,这其实对于PC是时代问题并不大,但到了移动互联网时代,设备终端位置不再固定,依赖无线信号,网络的可靠性变得降低,比如坐 ...
- h5 离线存储
- Atitit.h5 web webview性能提升解决方案-----fileStrore缓存离线存储+http方案
Atitit.h5 web webview性能提升解决方案-----fileStrore缓存离线存储+http方案 1. 业务场景 android+webview h5 css背景图性能提升1 2. ...
- AppCache 离线存储 应用程序缓存 API 及注意事项
使用ApplicationCache接口实现离线缓存 原文:http://www.mb5u.com/HTML5/html5_96464.html 推荐:html5 application cache遇 ...
- H5离线缓存技术Application Cache
H5离线缓存技术Application Cache 1.离线缓存技术:是浏览器本身的一种机制 HTML5引入Application Cache(应用程序缓存)技术,离线存储可以将站点的一些文件存储在本 ...
- H5 离线缓存的用法
H5离线缓存基础系列 1.什么是离线缓存 离线缓存:离线缓存可以将站点的一些文件缓存到本地,它是浏览器自己的一种机制,将需要的文件缓存下来,以便后期即使没有连接网络,被缓存的页面也可以展示. 2. ...
- H5本地存储(转)
H5本地存储 一.本地存储由来的背景 众所周知Html4时代Cookie的大小.格式.存储数据格式等限制,网站应用如果想在浏览器端存储用户的部分信息,那么只能借助于Cookie.但是 ...
- 吓哭原生App的HTML5离线存储技术,却出乎意料的容易!【低调转载】
吓哭原生App的HTML5离线存储技术,却出乎意料的容易![WeX5低调转载] 2015-11-16 lakb248 起步软件 近几天,WeX5小编编跟部分移动应用从业人士聊了聊,很多已经准备好全面拥 ...
随机推荐
- C语言初学者代码中的常见错误与瑕疵(23)
见:C语言初学者代码中的常见错误与瑕疵(23)
- 用shell脚本监控进程是否存在 不存在则启动的实例
用shell脚本监控进程是否存在 不存在则启动的实例,先上代码干货: #!/bin/shps -fe|grep processString |grep -v grepif [ $? -ne 0 ]th ...
- 使用jquery-qrcode生成二维码
一.使用jquery-qrcode生成二维码 先简单说一下jquery-qrcode,这个开源的三方库(可以从https://github.com/jeromeetienne/jquery-qrcod ...
- Kafka 0.9+Zookeeper3.4.6集群搭建、配置,新Client API的使用要点,高可用性测试,以及各种坑 (转载)
Kafka 0.9版本对java client的api做出了较大调整,本文主要总结了Kafka 0.9在集群搭建.高可用性.新API方面的相关过程和细节,以及本人在安装调试过程中踩出的各种坑. 关于K ...
- 采用重写tostring方法使ComboBox显示对象属性
当ComboBox中添加的是对象集合的时候,如果运行就会发现显示是的命令空间.类名,而如果我们想显示对象属性名的时候,我们就可以在对象类中重写object基类中的tostring方法.
- 你年纪轻轻怎么这么"不讲理"
今天在公交上遇到一出"精彩的打戏",这给我的12月份带来了一丝的"惊喜",1号就能让我碰到这样的事,看来这个月会惊喜不断啊!!!! 这精彩的戏是这样的,公交到了 ...
- 树上倍增LCA模版
void dfs(int u){ ;i = edge.next){ int to = dege[i].to; ]) continue; d[to] = d[u]+; dis[to] = dis[u]+ ...
- [java报错]Could not instantiate listener XXXXXX
写在开头的话: 兜兜转转,辞去了深圳的工作,回到了武汉,从事的居然一度是我最不想学的语言-java,曾经以为自己并不会java,但是上手之后,发现语言都是相通的,自己一度排斥学习java真的是不能再傻 ...
- Linux内核分析:打开文件描述符实现
在Linux中每一个进程的数据是存储在一个task_struct结构(定义在sched.h中)中的. struct task_struct { volatile long state; /* -1 u ...
- Java SE 基础:标识(zhì)符
Java SE 基础:标识(zhì)符 一.标识符定义 标识符,就是给类.接口.方法.变量等起名字时的字符序列 二.组成规则与注意事项 1.组成规则 英文大小写字母 数组 $ 和 _ 2.注意事项 不 ...