《HTML5移动开发指南》——笔记4(离线应用)
来源:互联网 发布:淘宝怎么搜有图评价 编辑:程序博客网 时间:2024/06/05 20:43
<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检查浏览器是否支持离线应用。
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(){ })
0 0
- 《HTML5移动开发指南》——笔记4(离线应用)
- HTML5移动开发指南(笔记概要)
- 《HTML5移动开发指南》——笔记5(html5表单元素)
- 《HTML5移动开发指南》——笔记7(Media Queries 移动设备样式)
- 《HTML5移动web开发指南》——笔记1
- 《HTML5移动web开发指南》——笔记2
- 《HTML5移动web开发指南》——笔记3(本地存储)
- 《HTML5移动开发指南》——笔记6(CSS3新特性)
- 《HTML5移动开发指南》——笔记8(Geolocation地理定位)
- HTML5移动web开发指南笔记
- HTML5 开发离线应用
- HTML5开发移动web应用—JQuery Mobile(4)-事件
- 使用 HTML5 开发离线应用
- 使用 HTML5 开发离线应用
- 使用 HTML5 开发离线应用
- 使用 HTML5 开发离线应用
- 《HTML5移动Web开发指南》读后笔记
- HTML5移动Web开发指南
- winform chart 控件之滚动条的放大与缩小功能
- 特殊的引用”$this“的使用
- 广度优先搜索-抓住那头牛(算法基础 第8周)
- Jimoshi_用easyui做Struts2+Hibenate4学生实体类(Student)的增删改
- 字符串当引号遇到美元
- 《HTML5移动开发指南》——笔记4(离线应用)
- 6-1认识CSS样式
- 翻转课堂心得
- MyEclipse添加Maven插件
- 构造方法__construct()与析构方法__destruct()
- C++实现12时制时钟
- Android 进程间通信
- hiho-102周 搜索五·数独
- 6-2CSS样式的优势