HTML5的离线应用
参考:有趣的HTML5:离线存储——segmentfault
简介
HTML5提供了很多新的功能以及相应的接口,离线存储就是其中的一个。通过浏览器访问Web App需要联网发送请求,这样就使得用户在离线的状态下无法使用App,但是Web App中一部分资源并不是经常改变,并不需要每次都向服务器发出请求,出于这些原因,HTML5提出了离线存储的新功能。
离线存储可以将站点的一些文件存储在本地,在没有网络的时候还是可以访问到以缓存的对应的站点页面,其中这些文件可以包括html,js,css,img等等文件,但其实即使在有网络的时候,浏览器也会优先使用已离线存储的文件,返回一个200(from cache)头。这跟HTTP的缓存使用策略是不同的。
用法
1、缓存清单manifest
CACHE MANIFEST//必须以这个开头
version 1.0 //最好定义版本,更新的时候只需修改版本号
CACHE:
m.png
test.js
test.css
NETWORK:
*
FALLBACK:
online.html offline.html
CACHE: 指定你要浏览器进行离线存储的文件列表,一个文件一行
NETWORK: 跟CACHE相反,指定浏览器一定要通过网络访问的文件列表
FALLBACK(可选): 如果通过网络访问失败了,就去访问紧跟着的那个在本地缓存好的文件文件
指定上述文件,可以用相对路径,也可以用绝对路径,都是ok的。但是绝对路径要加上http://
编辑好这个文件以后就在html文件中引入这个文件浏览器就可以知道要缓存那些文件了。
2、浏览器怎么解析manifest
浏览器对离线的资源进行管理和加载的
在线的情况下,浏览器发现html头部有manifest属性,它会请求manifest文件,
如果是第一次访问app,那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。
如果已经访问过app并且资源已经离线存储了,那么浏览器就会使用离线的资源加载页面,然后浏览器会根据HTTP的缓存策略去探测manifest清单是否最新版本,如果最新,就不做任何操作,如果不是最新,那么就会重新下载文件中的资源并进行离线存储。
离线的情况下,浏览器就直接使用离线存储的资源。
注意:
如果服务器对离线的资源进行了更新,那么必须更新manifest文件版本之后这些资源才能被浏览器重新下载,如果只是更新了资源而没有更新manifest文件的话,浏览器并不会重新下载资源,也就是说还是使用原来离线存储的资源。
由于判断manifest清单是否最新是利用了HTTP的缓存策略的,所以可能出现你对manifest文件进行了更新,但浏览器还是使用原来的manifest文件的情况,这是因为http的缓存策略告诉浏览器本地缓存的manifest文件还没过期,所以对于manifest文件进行的缓存要十分小心。
浏览器在下载manifest文件中的资源的时候,它会一次性下载所有资源,如果某个资源由于某种原因下载失败,那么这次的所有更新就算是失败的,浏览器还是会使用原来的资源。
在更新了资源之后,新的资源需要到下次再打开app才会生效,如果需要资源马上就能生效,那么可以使用
window.applicationCache.swapCache()
方法来使之生效,出现这种现象的原因是浏览器会先使用离线资源加载页面,然后再去检查manifest是否有更新,所以需要到下次打开页面才能生效。
3、HTML5中对应的离线存储API
支持H5离线存储的浏览器使用window.applicationCache对象,在浏览器处理离线存储的期间触发各种事件,对象说明具体如下
oncached
:当离线资源存储完成之后触发这个事件,这个是文档的说法,我在Chrome上面测试的时候并没有触发这个事件。onchecking
:当浏览器对离线存储资源进行更新检查的时候会触发这个事件ondownloading
:当浏览器开始下载离线资源的时候会触发这个事件onprogress
:当浏览器在下载每一个资源的时候会触发这个事件,每下载一个资源就会触发一次。onupdateready
:当浏览器对离线资源更新完成之后会触发这个事件onnoupdate
:当浏览器检查更新之后发现没有资源更新的时候触发这个事件
HTML5的离线应用的更多相关文章
- 使用html5的离线缓存技术
突然想用html5的离线缓存,但是一直没有成功,在各种群里问发现很多人都没什么经验,最终终于在各种论坛找到解决方案了.下面就简单记录一下相关情况. 一.离线缓存的优点 我们都知道离线缓存主要是用来减少 ...
- HTML5的离线储存
在用户没有与因特网连接时,可以正常访问站点或应用,在用户与因特网连接时,更新用户机器上的缓存文件. 原理:HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技 ...
- HTML5:离线存储
最近由于找工作一直没时间也没有精力更新博客,找工作真是一件苦逼的事情啊...不抱怨了,我们来看看HTML5的新特性---离线存储吧. 随着Web App的发展,越来越多的移动端App使用HTML5的方 ...
- 使用HTML5开发离线应用 - cache manifest
HTML5 是目前正在讨论的新一代 HTML 标准,它代表了现在 Web 领域的最新发展方向.在 HTML5 标准中,加入了新的多样的内容描述标签,直接支持表单验证.视频音频标签.网页元素的拖拽.离线 ...
- html5的离线存储问题集合
HTML5的离线存储使用一个manifest文件来标明哪些文件是需要被存储的,使用如 来引入一个manifest文件,这个文件的路径可以是相对的,也可以是绝对的,如果你的web应用很多,而且希望能集中 ...
- 6,html5的离线储存怎么用
6,html5的离线储存怎么用 客户端:(百科:或称为用户端,是指与服务器相对应,为客户提供本地服务的程序.除了一些只在本地运行的应用程序,一般安装在客户机上,需要与服务端配合运行) 在用户没有和因特 ...
- HTML5 manifest离线缓存
一.基本概念 离线缓存是HTML5新引入的技术,能够让你的Web应用程序指定哪些文件可以缓存在本地,使得你的网络断开时依然可以通过本地的缓存来进行访问浏览. 二.使用方法 1. MIME type 声 ...
- html5的离线缓存
一个离线网络应用程序就是一个URL的列表,html,css,js,图片,或者其他类型的资源. 把这些资源,在本地缓存下来,当你尝试在没有网络连接时访问网络应用程序,你的浏览器将自动切换并使用本地代替. ...
- HTML5 manifest离线缓存技术
干什么用的? 离线缓存为的是第一次请求后,根据manifest文件进行本地缓存,并且在下一次请求后进行展示(若有缓存的话,无需再次进行请求而是直接调用缓存),最根本的感觉是它使得WEB从online可 ...
随机推荐
- JS获取函数的成员变量
1. js函数 var table = function(){ var totalCount = 10; //给函数添加一个方法,返回成员变量的值,供调用 this.getTotalCount = f ...
- mysql删除重复记录
Solution 1: Add Unique Index on your table: ALTER IGNORE TABLE `TableA` ADD UNIQUE INDEX (`member_id ...
- 使用Navicat连接oracle时出现unsupported server character set ZHS16GBK的解决之道
原文网址http://blog.mn886.net/chenjianhua/show/ba1dc6f835be403ea159b0a5e2685ff2/index.html ORA-12737:Ins ...
- centos下安装Anaconda
第一步:将下载好的Anaconda2-4.1.1-Linux-x86_64.sh软件传到linux下 第二步:[hadoop@spark1 ~]$ cd Desktop #进入到该软件所在目录,我的放 ...
- hdu 5877 Weak Pair dfs序+树状数组+离散化
Weak Pair Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 262144/262144 K (Java/Others) Prob ...
- maven环境变量配置不成功的原因
在配置java开发环境时,MAVEN_HOME配置后,再将%MAVEN_HOME%\bin加入path后,mvn -v 不成功,显示mvn不是内部命令 网上寻觅各种办法无果 于是弃用MAVEN_HOM ...
- c# 查找一个字符串在另一个字符串出现的次数
方法一: string test = "FF FF FF FF 01 00 82 00 00 A2 00 00 FB 07 FF FF FF FF 01 00 82 00 00 A2 00 ...
- Ceph pg分裂流程及可行性分析
转自:https://www.ustack.com/blog/ceph-pg-fenlie/ 1 pg分裂 Ceph作为一个scalable的分布式系统,集群规模会逐渐增大,为了保证数据分布的均匀性, ...
- npm被墙解决方法
npm config set proxy http://your-proxy-addrnpm config set strict-ssl falsenpm config set registry &q ...
- 02-THREE.JS 辅助线使用
<!DOCTYPE html> <html> <head> <title></title> <script src="htt ...