HTML5离线应用
本地缓存与浏览器缓存
- 本地缓存是为整个web应用程序服务的而网页缓存值服务与单个网页
- 本地缓存是为你指定的资源进行缓存,而我们不知道网页缓存会春初哪些内容,他是不安全不可靠的
- 在没有网络的时候还是可以访问到以缓存的对应的站点页面,其中这些文件可以包括html,js,css,img等等文件,但其实即使在有网络的时候,浏览器也会优先使用已离线存储的文件,返回一个200(from cache)头。
manifest文件
web应用程序的本地缓存是通过每个页面的manifest文件来管理的,这个文件是一个简单的文本文件,可以在这个里面指定要缓存的资源文件的资源名称。可以为单独页面指定也可以对整个web应用程序指定一个总的manifest文件。同时也要对服务器进行设置,让服务器支持text/cache-manifest这个MIME类型。
manifest的大概写法
CACHE MANIFEST
CACHE MANIFEST // 这一行是必须的是必须的,告知浏览器需要进行本地缓存
/theme.css
/logo.gif
/main.js
以此告诉浏览器对本地服务器的一些资源进行具体设置,上面的 manifest 文件列出了三个资源:一个 CSS 文件,一个 GIF 图像,以及一个 JavaScript 文件。当 manifest 文件加载后,浏览器会从网站的根目录下载这三个文件。然后,无论用户何时与因特网断开连接,这些资源依然是可用的。
NETWORK
白名单,使用通配符"*". 则会进入白名单的open状态. 这种状态下.所有不在相关Cache区域出现的url都默认使 用HTTP相关缓存头策略.或者写出不需要缓存的文件,这 些文件都不会进行本地缓存。
FALLBACK
每行指定两个资源文件,第一个资源文件为能够在线访问时使用的资源文件,第二个资源文件为不能在线访问时使用的备用文件。指定上述文件,可以用相对路径,也可以用绝对路径,都是ok的。但是绝对路径要加上http://
浏览器和服务器交互过程要点
- 当浏览器处理manifest文件时,会向服务器请求你的manifest中指定的文件,即使你刚刚已经请求过了,这里还需要进行重复的请求
- 浏览器接收到服务器发送来的文件之后会对本,存入包括页面本身在内的所有要求本地缓存的资源文件,并且触发一个时间表明更新完毕,HTML5 的更新策略与HTTP缓存策略一致,我们可以点击,需要注意的是,修改了一些文件以后想要让离线存储更新,就必须改动manifest清单文件。(因为manifest文件还足够新鲜,不需要与服务器进行新鲜度验证)
- 当资源被修改过之后,浏览器会向服务端请求新的manifest文集,然后对资源进行更新存入新的资源并触发更新完成事件,需要注意的是既是文件资源被修改过了已经装入页面的文件不会突然变为新的文件资源,也就是说当你再次加载的时候才会看到新的资源。
通过JS动态控制更新
applicationCache对象代表了本地缓存,它提供个了一些方法和事件,管理离线存储的交互过程。通过在firefox8.0的控制台中输入window.applicationCache可以看到这个对象的所有属性和事件方法。
当我们不适用applicationCache的时候页面内容更新是在下一次打开本页面的时候更新吗如果使用了applicationCache的时候可以立即被更新。下面我们来看一下它的一些属性和方法。
- 当文件资源更新完毕的时候会触发onUpdateReady事件
applicationCache.onUpdateReady = function(){
//第二次载入,如果manifest被更新
//在下载结束时候触发
//不触发onchched
alert("本地缓存已经更新,您可以刷新页面来得到本程序的最新版本");
}
- swapCache方法,该方法用来手工执行本地缓存
applicationCache.onUpdateReady = function(){
//第二次载入,如果manifest被更新
//在下载结束时候触发
//不触发onchched
alert("本地缓存正在更新中。。。");
if(confirm("是否重新载入已更新文件")){
applicationCache.swapCache();
location.reload();
}
}
也就是说如果不调用该方法,用户需要手动刷新页面才能看到更新后的方法
- 另外还有其他的方法如下
applicationCache.onchecking = function(){
//检查manifest文件是否存在
}
applicationCache.ondownloading = function(){
//检查到有manifest或者manifest文件
//已更新就执行下载操作
//即使需要缓存的文件在请求时服务器已经返回过了
}
applicationCache.onnoupdate = function(){
//返回304表示没有更新,通知浏览器直接使用本地文件
}
applicationCache.onprogress = function(){
//下载的时候周期性的触发,可以通过它
//获取已经下载的文件个数
}
applicationCache.oncached = function(){
//下载结束后触发,表示缓存成功
}
application.onupdateready = function(){
//第二次载入,如果manifest被更新
//在下载结束时候触发
//不触发onchched
alert("本地缓存正在更新中。。。");
if(confirm("是否重新载入已更新文件")){
applicationCache.swapCache();
location.reload();
}
}
applicationCache.onobsolete = function(){
//未找到文件,返回404或者401时候触发
}
applicationCache.onerror = function(){
//其他和离线存储有关的错误
}
HTML5离线应用的更多相关文章
- HTML5离线缓存(Application Cache)
HTML5离线缓存又名Application Cache,是从浏览器的缓存中分出来的一块缓存区,要想在这个缓存中保存数据,可以使用一个描述文件(manifest file),列出要下载和缓存的资源. ...
- HTML5 离线缓存管理库
一.HTML5离线缓存技术 支持离线缓存是HTML5中的一个重点,离线缓存就是让用户即使在断网的情况下依然可以正常的运行应用.传统的本地存储数据的方式有 localstorage,sessionsto ...
- HTML5离线Web应用实战:五步创建成功
[IT168 技术]HTML5近十年来发展得如火如荼,在HTML 5平台上,视频,音频,图象,动画,以及同电脑的交互都被标准化.HTML功能越来越丰富,支持图片上传拖拽.支持localstorage. ...
- 吓哭原生App的HTML5离线存储技术,却出乎意料的容易!【低调转载】
吓哭原生App的HTML5离线存储技术,却出乎意料的容易![WeX5低调转载] 2015-11-16 lakb248 起步软件 近几天,WeX5小编编跟部分移动应用从业人士聊了聊,很多已经准备好全面拥 ...
- html5 离线存储
在html页面中引入manifest文件 <html manifest="sample.appcache"> 在服务器添加mime-type text/cache-ma ...
- HTML5离线缓存问题
HTML5离线缓存问题 1.应用程序缓存 什么是应用程序缓存(Application Cache)? HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问. ...
- Manifesto – HTML5 离线应用程序缓存校验工具
Manifesto 是一个 HTML5 离线应用程序缓存校验工具,提供了快速校验 HTML5 manifest 文件有效性的方法.离线应用程序缓存在使用中最困难的部分之一就是无法正常工作的时候没有明显 ...
- HTML5离线存储原理
找到一篇介绍离线缓存的,感觉比之前看到的解释的更透彻,新的知识点记录如下: 大家都知道Web App是通过浏览器来访问的,所以离线状态下是无法使用app的.其中web app中的一些资源并不经常改变, ...
- html5 离线存储 worker
html5 离线存储 <!DOCTYPE html> <html manifest="cache.manifest"> <!--manifest存储- ...
- 使用 jQuery Mobile 与 HTML5 开发 Web App —— HTML5 离线缓存
本文要介绍的,是 HTML5 离线网络应用程序的特性,离线网络应用程序在 W3C 中的实际名称是 "Offline Web applications" ,也称离线缓存.当用户打开浏 ...
随机推荐
- 我到 vim 配置文件---------修改从---http://www.cnblogs.com/ma6174/archive/2011/12/10/2283393.html
""""""""""""""""&quo ...
- gzip: stdin: unexpected end of file tar: Unexpected EOF in archive
1.问题描述: 今天解压tar包遇到这样一个问题 使用命令:tar -zxvf xxxxx.tar.gz gzip: stdin: unexpected end of filetar: Unexpe ...
- URL重写技术总结
URL重写技术总结 概要:什么是url重写? URL 重写是截取传入 Web 请求并自动将请求重定向到其他 URL 的过程.比如浏览器发来请求 hostname/101.html ,服务器自动将这个请 ...
- HDU 3966 & POJ 3237 & HYSBZ 2243 & HRBUST 2064 树链剖分
树链剖分是一个很固定的套路 一般用来解决树上两点之间的路径更改与查询 思想是将一棵树分成不想交的几条链 并且由于dfs的顺序性 给每条链上的点或边标的号必定是连着的 那么每两个点之间的路径都可以拆成几 ...
- vue组件 Prop传递数据
组件实例的作用域是孤立的.这意味着不能(也不应该)在子组件的模板内直接引用父组件的数据.要让子组件使用父组件的数据,我们需要通过子组件的props选项. prop 是单向绑定的:当父组件的属性变化时, ...
- codeforces763C
解题报告: 直接截图好了...辣鸡博客园不能上传文件
- vlan 配置
在RedHat上配置vlan: ~]$ modinfo 8021q在ethX接口上配置vlan逻辑子接口: DEVICE=ethX. BOOTPROTO=none ONBOOT=yes IPADDR= ...
- java开发环境的搭建(JDK的下载安装及环境变量的配置)
首先可以在Sun公司网站 http://java.sun.com 免费下载java se提供的JDK. 下载后再下载的文件夹下打开,双击jdk文件跟着提示进行安装,安装结束后——点击本机电脑的开始—— ...
- PostMan使用教程(1)
Postman介绍 Postman是google开发的一款功能强大的网页调试与发送网页HTTP请求,并能运行测试用例的的Chrome插件.其主要功能包括: 模拟各种HTTP requests 从常用的 ...
- DSD, DFF, DSF, DST概念解析
DSD = Direct Stream Digital; DST = D DSD是技术原理. DSDIFF简称DFF 是文件后缀名 DSF也是文件后缀名,他们是一个意思,只是一个是飞利浦的叫法 一个 ...