离线缓存html5,HTML5新技术离线缓存

什么是离线缓存

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

为何要用离线缓存

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

离线缓存的设置步骤

1 配置manifest文件

2 通过JS进行缓存的控制

manifest文件的配置

1. 添加manifest属性

将需要离线缓存的文件罗列下来，存储于后缀名为manifest的文件当中。在HTML文件中引入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);

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

离线缓存html5,HTML5新技术离线缓存相关推荐

HTML5 API详解(11)：Cache 应用程序缓存，这下离线也可以玩了
Web缓存是指一个Web资源(如html页面,图片,js,数据等)存在于Web服务器和客户端(浏览器)之间的副本.缓存会根据进来的请求保存输出内容的副本:当下一个请求来到的时候,如果是相同的URL,缓 ...
通过应用程序缓存实现HTML5的离线浏览
对Web开发者和设计者来说,离线浏览已经越来越重要了.能让用户离线浏览一直是站点设计的目标,但却很难实现.当我们进入到HTML5的时代,这种情形却发生了改变.你可以利用应用程序缓存(Applicati ...
Android webView 缓存 Cache + HTML5离线功能解决
WebView中存在着两种缓存:网页数据缓存(存储打开过的页面及资源).H5缓存(即appcache). 一.网页缓存 1.缓存构成 /data/data/package_name/cache/ /d ...
HTML5时代的Web缓存机制
HTML5 之离线应用Manifest 我们知道,使用传统的技术,就算是对站点的资源都实施了比较好的缓存策略,但是在断网的情况下,是无法访问的,因为入口的HTML页面我们一般运维的考虑,不会对其进行缓 ...
.net html5页面缓存,详解HTML5中的manifest缓存使用
起源html5之前的网页,都是无连接,必须联网才能访问,这其实也是web的特色,这其实对于PC是时代问题并不大,但到了移动互联网时代,设备终端位置不再固定,依赖无线信号,网络的可靠性变得降低,比如坐在 ...
[html] HTML5的文件离线储存怎么使用，工作原理是什么？
[html] HTML5的文件离线储存怎么使用,工作原理是什么? localstorge 利用浏览器的本地存储可以缓存信息 ,在创建数据的时候引入创建好的数据 cookie 好像也可以个人简介我是 ...
html5离线储存不足,html5的离线存储问题
HTML5的一个重要特性就是离线存储,所谓的离线存储就是将一些资源文件保存在本地,这样后续的页面重新加载将使用本地资源文件,在离线情况下可以继续访问web应用,同时通过一定的手法(更新相关文件或者使用 ...
使用HTML5开发手机离线应用
本来这篇文章想叫<挺起你的HTML5>或者<让HTML5飞>或者神马其他的,但是为了更好的体现主题,我就用这个直白点的题目吧 ~ 随着各种智能手机(iPhone.Andro ...
html5离线存储图片,HTML5教程离线存储技术详解
本篇教程探讨了HTML5教程离线存储技术详解,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < 随着Web App的发展,越来越多的移动端App使用HTML5 ...

离线缓存html5,HTML5新技术离线缓存

离线缓存html5,HTML5新技术离线缓存相关推荐

最新文章

热门文章

离线缓存html5,HTML5新技术 离线缓存

离线缓存html5,HTML5新技术 离线缓存相关推荐

最新文章

热门文章

离线缓存html5,HTML5新技术离线缓存

离线缓存html5,HTML5新技术离线缓存相关推荐