前端技术分享-码匠 极客编程技术分享

您当前位于:HTML5新技术 ——> HTML5新技术 离线缓存
上一篇:网页图片新格式,WEBP格式图片讲解 下一篇:没有了

HTML5新技术 离线缓存

2016/11/24 11:18:27 | 作者:HTML5学堂(码匠) | 分类:HTML5新技术 | 关键词:HTML5,离线缓存,离线,manifest

什么是离线缓存

离线缓存,就是将指定的网页文件(例如css、js)保存到本地,当用户没有网络时,依旧可以通过浏览器使用这些文件。

为何要用离线缓存

从网站所有者的角度来说,增加离线缓存功能,能够让用户更好的使用网站。

离线缓存的设置步骤

1 配置manifest文件

2 通过JS进行缓存的控制

manifest文件的配置

1. 添加manifest属性

将需要离线缓存的文件罗列下来,存储于后缀名为manifest的文件当中。 在HTML文件中引入manifest文件

  1. <html manifest="h5course.manifest">

2. manifest文件的基本组成

基本语法:

  1. CACHE MANIFEST
  2. # 该符号后面的内容为注释信息,第一行的CACHE MANIFEST不能少
  3. CACHE:
  4. # 需要缓存的文件
  5. NETWORK:
  6. # 不需要缓存的文件
  7. FALLBACK:
  8. # 当页面无法访问时的回退页面/重定向

代码实例:

  1. CACHE MANIFEST
  2. CACHE:
  3. ../test.html
  4. ../css/reset.css
  5. ../css/test.css
  6. # 需要注意的是:manifest文件中书写的路径,是以该文件的路径为基础,而非以html所在文件夹为基础
  7. NETWORK:
  8. ../images/logo.jpg
  9. 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 检查更新结束,不需要更新

部分事件使用案例代码:

  1. // update事件使用案例
  2. applicationCache.update();
  3.  
  4. // updateready事件使用案例
  5. application.addEventListener('updateready', function(){
  6.     console.log('已完成缓存的更新');
  7. }, false);
  8.  
  9. // progress事件使用案例
  10. application.addEventListener('progress', function(){
  11.     console.log(applicationCache.status); 
  12. }, false);

HTML5学堂微信~欢迎扫码关注

HTML5学堂微信

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端

上一篇:网页图片新格式,WEBP格式图片讲解 下一篇:没有了