什么是离线缓存
离线缓存，就是将指定的网页文件（例如css、js）保存到本地，当用户没有网络时，依旧可以通过浏览器使用这些文件。
为何要用离线缓存
从网站所有者的角度来说，增加离线缓存功能，能够让用户更好的使用网站。
离线缓存的设置步骤
1 配置manifest文件
2 通过JS进行缓存的控制
manifest文件的配置
1. 添加manifest属性
将需要离线缓存的文件罗列下来，存储于后缀名为manifest的文件当中。 在HTML文件中引入manifest文件
- <html manifest="h5course.manifest">
2. manifest文件的基本组成
基本语法：
- CACHE MANIFEST
- # 该符号后面的内容为注释信息，第一行的CACHE MANIFEST不能少
- CACHE:
- # 需要缓存的文件
- NETWORK:
- # 不需要缓存的文件
- FALLBACK:
- # 当页面无法访问时的回退页面/重定向
代码实例：
- CACHE MANIFEST
- CACHE:
- ../test.html
- ../css/reset.css
- ../css/test.css
- # 需要注意的是：manifest文件中书写的路径，是以该文件的路径为基础，而非以html所在文件夹为基础
- NETWORK:
- ../images/logo.jpg
- FALLBACK
离线缓存的工作流程图：
使用JavaScript控制缓存
缓存的各类属性和事件，均绑定在“applicationCache”上。
1. 涉及缓存的属性：
applicationCache.status
用于表示当前的缓存状态，取值范围为0~5。
0代表未缓存，通常是这些页面没有运用离线缓存技术，就是这个状态。
1代表空闲，当缓存是最新的时候为1，不需要做什么操作。
2代表检查中，即浏览器在检查manifest文件是否为最新。
3代表下载中，当前有更新，并且正在下载。
4代表更新就绪，代表当前有更新，并且已经下载完毕。等待下次载入页面的时候，进行更新。
5代表缓存过期。即找不到正确的缓存文件时候，会变成5。
2. 涉及缓存的事件：
update 用于主动更新缓存
updateready 当有新的缓存，并更新完毕之后，会触发此事件
progress 进度事件，当进行缓存的下载时，会不断的触发该事件
progress中的event对象包含：loaded和total。loaded代表当前已经
加载完成的文件，total为总共需要更新的文件数。
checking 正在检查
downloading 正在下载
obsolete 缓存过期
cached 空闲，缓存为最新状态
error 报错
noupdate 检查更新结束，不需要更新
部分事件使用案例代码：
- // update事件使用案例
- applicationCache.update();
- // updateready事件使用案例
- application.addEventListener('updateready', function(){
- console.log('已完成缓存的更新');
- }, false);
- // progress事件使用案例
- application.addEventListener('progress', function(){
- console.log(applicationCache.status);
- }, false);
扫一扫
1356
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
