《HTML5移动开发指南》——笔记4(离线应用)
2016-06-19 14:48
423 查看
<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">HTML5新特性:离线应用 ——</span><span style="font-family: Arial, Helvetica, sans-serif; color: rgb(255, 0, 0); background-color: rgb(255, 255, 255);">解决在网络离线的情况下,正常读取和访问web上的文件资源。</span>
JavaScript检查浏览器是否支持离线应用。
离线应用的三种特性:
1.离线资源缓存 使用manifest类型的文件作为需要配置缓存资源文件的配置文件。
2.ApplicationCache对象记录缓存状态, 并通过缓存状态手动更新资源文件的缓存。
3.在线状态监测 html5标准提供了onLIne方法用于检测当前网络是否在线。
使用离线应用功能的manifest配置文件以及ApplicationCache对象步骤如下:
html页面里使用manifest文件——在HTML标签增加manifest属性,并制定manifest文件。
<html manifest="cache.manifest">
<head></head>
<body></body>
</html>
Web服务器配置MIME类型,来识别manifest文件。
manifest文件的MIME类型是text/cache-manifest,需要在服务器进行配置。
例如:在tomcat服务器下,需要在该项目目录下的conf/web.xml文件中进行manifest类型配置
cache.manifest文件第一行添加 CACHE MANIFEST :通知;浏览器文件内容是一个应用离线的清单文件,共有三种类型:
1.跟在 CACHE MANIFEST 之后被定义为需要缓存的文件。
2.跟在NETWORK 之后被定义为无论文件是否被缓存,都必须从网络中下载。
3.跟在FALLBACK之后 ,列表的前半部分无法获取文件时,请求转发后半部分的文件。
applicationCache对象和事件
applicationCache记录本地缓存的状态及事件,通过window.applicationCache.status获得。
1.Checking事件 第一次下载manifest清单的时候,第一个被触发的事件。
2.Noupdate事件 检查到manifest中清单文件不需要再更新时触发。
3.downloading事件 第一次下载或更新manifest文件时触发。
4.Progress事件 与downloading事件相似,只不过是周期性触发。
5.Cached事件 当manifest清单下载完毕缓存成功后触发。
6.upadateready事件 表示缓存清单已经下载完毕,可通过重新加载页面读取文件或者切换到新的缓存文件。
7.Obsolete事件 发生404错误时触发
8.Error事件 1)已经触发Obsolete事件 2)manifest文件未变,但存在缓存文件失败 3)获取manifest资源文件时发生致命错误 4)当更新本地缓存时,manifest文件再次被更改
JavaScript检查浏览器是否支持离线应用。
if(window.applicationCache){ }
离线应用的三种特性:
1.离线资源缓存 使用manifest类型的文件作为需要配置缓存资源文件的配置文件。
2.ApplicationCache对象记录缓存状态, 并通过缓存状态手动更新资源文件的缓存。
3.在线状态监测 html5标准提供了onLIne方法用于检测当前网络是否在线。
使用离线应用功能的manifest配置文件以及ApplicationCache对象步骤如下:
html页面里使用manifest文件——在HTML标签增加manifest属性,并制定manifest文件。
<html manifest="cache.manifest">
<head></head>
<body></body>
</html>
Web服务器配置MIME类型,来识别manifest文件。
manifest文件的MIME类型是text/cache-manifest,需要在服务器进行配置。
例如:在tomcat服务器下,需要在该项目目录下的conf/web.xml文件中进行manifest类型配置
<mime-mapping> <extension.>manifest</extension> <mine-type>text/cache-manifest</mime-type> </mime-mapping>
cache.manifest文件第一行添加 CACHE MANIFEST :通知;浏览器文件内容是一个应用离线的清单文件,共有三种类型:
1.跟在 CACHE MANIFEST 之后被定义为需要缓存的文件。
2.跟在NETWORK 之后被定义为无论文件是否被缓存,都必须从网络中下载。
3.跟在FALLBACK之后 ,列表的前半部分无法获取文件时,请求转发后半部分的文件。
applicationCache对象和事件
applicationCache记录本地缓存的状态及事件,通过window.applicationCache.status获得。
1.Checking事件 第一次下载manifest清单的时候,第一个被触发的事件。
2.Noupdate事件 检查到manifest中清单文件不需要再更新时触发。
3.downloading事件 第一次下载或更新manifest文件时触发。
4.Progress事件 与downloading事件相似,只不过是周期性触发。
5.Cached事件 当manifest清单下载完毕缓存成功后触发。
6.upadateready事件 表示缓存清单已经下载完毕,可通过重新加载页面读取文件或者切换到新的缓存文件。
7.Obsolete事件 发生404错误时触发
8.Error事件 1)已经触发Obsolete事件 2)manifest文件未变,但存在缓存文件失败 3)获取manifest资源文件时发生致命错误 4)当更新本地缓存时,manifest文件再次被更改
applicationCache.addEventListener('updateready',function(){ })
相关文章推荐
- HTML5之DOM小游戏——乒乓球
- h5应用缓存及收藏时Icon显示
- HTML5 canvas画布
- html5平板游戏列表
- HTML5浏览器兼容性解决方案
- 使用HTML5技术控制电脑或手机上的摄像头
- HTML5新增及移除的元素
- html5中file对象
- html5中input新增属性
- HTML5简介(二)
- HTML5简介(一)
- 移动前端头部标签(HTML5 head meta)
- 为什么要学HTML5
- FileUpload系列:(4)HTML5的 input:file上传类型控制
- HTML5自学(一)
- html5学习站点推荐
- canvas 简易时钟
- 使用spring mvc+localResizeIMG实现HTML5端图片压缩上传
- 在线制作h5
- html5向左滑动删除特效