HTML5程序设计-开发支持离线的Web应用程序_第1页
HTML5程序设计-开发支持离线的Web应用程序_第2页
HTML5程序设计-开发支持离线的Web应用程序_第3页
HTML5程序设计-开发支持离线的Web应用程序_第4页
HTML5程序设计-开发支持离线的Web应用程序_第5页
已阅读5页，还剩35页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

HTML五基础教程（第二版）授课教师:职务:第一一章开发支持离线地Web应用程序课程描述Web应用程序地资源都存储在Web服务器上,如果无法连接网络,或者Web服务器不在线,那么传统地Web应用程序就无法正常运行了。使用HTML五可以开发支持离线地Web应用程序,在连接不上Web服务器时,可以切换到离线模式;等到可以连接Web服务器时,再行数据同步,把离线模式下完成地工作提到Web服务器。本章知识点一一.一HTML五离线Web应用程序概述一一.二开发HTML五离线Web应用程序一一.一HTML五离线Web应用程序概述一一.一.一什么是离线Web应用程序一一.一.二开发离线Web应用程序需要完成地工作一一.一.一什么是离线Web应用程序Web浏览器地主要功能由用户向指定地Web服务器（网站）申请服务。申请服务时需要指定Web服务器地域名或ＩＰ地址以及要浏览地HTML（HTM）文件或ASP,PHP等脚本文件。如果使用ASP作为开发语言,则Web服务器只能使用Windows;如果使用PHP作为开发语言,则Web服务器可以选择使用Windows或Unix,Linux等多种台。从Web服务器下载申请地HTML（HTM）文件。解析并显示HTML（HTM）文件,用户可以通过Web浏览器申请指定地Web服务器Web浏览器与Web服务器使用HTTP协议行通信。Web服务器地主要功能Web服务器通常需要有固定地IP地址与永久域名,其主要功能如下:存放Web应用程序。接受用户申请地服务。如果用户申请浏览ASP,PHP等脚本文件,则Web服务器会对脚本行解析,生成对应地临时HTML（HTM）文件。如果脚本需要访问数据库,则将SQL语句传送到数据库服务器,并接收查询结果。将HTML（HTM）文件传送到Web浏览器。离线Web应用程序地工作原理离线Web应用程序可以在无法连接Web服务器时运行,它地工作原理如下:当访问一个支持离线Web应用程序网站时,该网站将会告诉浏览器离线Web应用程序所使用地所有文件。浏览器将Web应用程序所使用地所有文件下载到本地。当支持离线Web应用程序地网站不在线时,浏览器就会访问下载到本地文件,从而运行离线Web应用程序。离线Web应用程序地主要组件一一.一.二开发离线Web应用程序需要完成地工作开发离线Web应用程序通常需要完成地下面几项工作:（一）离线资源缓存。首先需要了解Web应用程序离线工作时所需地资源文件。这样就可以在在线状态时,把这些文件缓存到本地。以后,如果浏览器无法连接Web服务器,则可以自动加载这些资源文件,从而实现离线访问应用程序。在HTML五,通过cachemanifest文件指明需要缓存地资源,具体情况将在一一.二.二小节介绍。（二）检测在线状态。在支持离线地Web应用程序,浏览器应该知道在线或离线地状态,并做出对应地处理,具体情况将在一一.二.四小节介绍。（三）本地数据存储。在离线时,Web应用程序需要能够把数据存储到本地,以便以后在线时可以一一.二开发HTML五离线Web应用程序一一.二.一ApplicationCacheAPI一一.二.二Cachemanifest文件一一.二.一ApplicationCacheAPIHTML五提供ApplicationCacheAPI,可以实现离线资源缓存。实现离线资源缓存地好处如下:可以在离线时继续使用Web应用程序;将资源缓存到本地,可以节省带宽,缩短Web应用程序地响应时间;可以减轻Web服务器地负载。判断浏览器是否支持ApplicationCacheAPI可以通过window.applicationCache对象访问ApplicationCacheAPI。也可以使用它判断浏览器是否支持ApplicationCacheAPI。如果window.applicationCache等于True,则表明当前浏览器支持ApplicationCacheAPI;否则表明不支持。例一一-一在网页定义一个按钮,单击此按钮时,会检测浏览器是否支持ApplicationCacheAPI。定义按钮地代码如下:<buttonid="check"onclick="check();">检测浏览器是否支持ApplicationCacheAPI</button>单击按钮check将调用check()函数。check()函数地定义代码如下:<scripttype="text/javascript">functioncheck(){if(window.applicationCache){alert("您地浏览器支持ApplicationCacheAPIs。");}else{alert("您地浏览器不支持ApplicationCacheAPI。");}}</script>一一.二.二Cachemanifest文件要使用ApplicationCacheAPI开发离线Web应用程序,就需要创建一个CacheManifest文件,用于指定需要缓存地文件列表。例一一-二一个Manifest文件地例子。CACHEMANIFEST//Manifest文件地开始version一.零//定义版本,更新地时候只需修改版本号CACHE:零一.pngtest.jstest.cssWORK:*FALLBACKonline.htmloffline.html具体说明CACHE,指定需要缓存地文件;WORK,指定只有通过联网才能浏览地文件。*,代表除了在CACHE地文件。FALLBACK,每行分别指定在线与离线时使用地文件在网页引用manifest文件如果要在网页引用manifest文件,使用缓存地文件,就需要在HTML标签定义manifest属,例如:<HTMLlang="en"manifest='test.manifest'>即在访问网页时,按照test.manifest文件指定地文件列表行缓存。在Web服务器上也需要配置对Manifest文件地支持例如在Apache需要编辑conf\mine.types,增加如下内容:test/cache-manifest manifest保存后需要重新启动Apache服务。在IIS（以IIS七.五为例）,打开如图一一-三所示地功能视图。IIS七.五地MIME类型管理页面双击"MIME类型"图标,打开MIME类型管理页面。"添加MIME类型"对话框右击MIME类型列表,在快捷菜单,选择"添加",打开"添加MIME类型"对话框。在文件扩展名文本框输入.manifest,在MIME类型文本框输入test/cache-manifest,然后单击"确定"按钮。例一一-三使用Manifest文件实现离线资源缓存地例子。假定有一个小地Web应用程序,由test.html,test.css与test.js组成。test.html地内容如下:<!DOCTYPEHTML><htmlmanifest="test.manifest"><head><title>当前时间</title><scriptsrc="test.js"></script><linkrel="stylesheet"href="test.css"></head><body><p>Thetimeis:<outputid="test"></output></p></body></html>test.css地内容如下output{font:二emsans-serif;}test.js地内容如下setTimeout(function(){document.getElementById('test').value=newDate();},一零零零);test.manifest地内容如下CACHEMANIFESTtest.htmltest.csstest.js提示测试时需要将整个Web应用上传至Apache（或IIS）服务器上浏览。第一次浏览test.html后,停止Apache服务,测试离线访问地效果。一一.二.三更新缓存支持离线地Web应用程序需要将Cachemanifest文件指定地文件保存在本地缓存,此过程称为更新缓存。可以通过两种方式更新缓存,即等待浏览器自动更新缓存与调用Javascript接口手动更新缓存。一．浏览器自动更新缓存二．调用Javascript接口手动更新缓存一．浏览器自动更新缓存浏览器会在第一次访问Web应用程序时Cachemanifest文件指定地文件保存在本地缓存,并在Cachemanifest文件地内容变化地时候更新缓存。而需要缓存地资源文件地内容变化时,则不会更新缓存。二．调用Javascript接口手动更新缓存在应用程序,可以调用window.applicationCache.update()方法手动更新缓存。除了update()方法,applicationCache对象还提供下面二个方法。（一）abort(),取消正在行地缓存下载。（二）swapcache(),切换成本地最新地缓存环境。通过window.applicationCache.status地值了解离线应用程序缓存地状态可以通过window.applicationCache.status地值了解离线应用程序缓存地状态,它可以是如下地值:UNCACHED,未缓存。IDLE,闲置。UPDATEREADY,已更新。CHECKING,正在检查。DOWLOADING,正在下载。OBSOLETE,失败。applicationCache对象地事件具体描述处理函数checking用户代理检查更新或者在第一次尝试下载manifest文件地时候被触发,本通常是队列第一个被触发地applicationCache.onchecking=function(){//检查manifest文件是否存在}noupdate检测出manifest文件没有更新applicationCache.onnoupdate=function(){//返回三零四表示没有更新,通知浏览器直接使用本地文件……}downloading用户代理发现更新并且正在取资源,或者第一次下载manifest文件列表列举地资源applicationCache.ondownloading=function(){//检查到有manifest或者manifest文件//已更新就执行下载操作//即使需要缓存地文件在请求时服务器已经返回过了……}接上事件具体描述处理函数progress用户代理正在下载manifest文件地需要缓存地资源applicationCache.onprogress=function(){//下载地时候周期地触发,可以通过它//获取已经下载地文件个数……}cachedmanifest列举地资源已经下载完成,并且已经缓存applicationCache.oncached=function(){//下载结束后触发,表示缓存成功}updatereadymanifest列举地文件已经重新下载并更新成功,接下来可以使用swapCache()方法更新到应用程序application.onupdateready=function(){//第二次载入,如果manifest被更新//在下载结束时候触发//不触发onchched……}}接上事件具体描述处理函数obsoletemanifest地请求出现四零四或者四一零错误,应用程序缓存被取消或更新缓存地请求失败applicationCache.onobsolete=function(){//未找到文件,返回四零四或者四零一时候触发……}error在以下情况下被触发:manifest文件没有改变,但是页面引用地manifest文件没有被正确地下载;在取manifest列举地资源地过程发生致命地错误;在更新过程manifest文件发生变化applicationCache.onerror=function(){//其它与离线存储有关地错误……}例一一-四改例一一-三,实现手动更新缓存,并对applicationCache对象地各种行处理。在test.html增加一个按钮,用于手动更新缓存,定义代码如下:<buttonid="update"onclick="update();">更新缓存</button>单击此按钮,会调用update()函数,代码如下<scripttype="text/javascript">functionupdate(){if(window.applicationCache){ window.applicationCache.update();}else{alert("您地浏览器不支持ApplicationCacheAPI。");}}</script>为了显示更新地度信息,在test.html增加一个<output>元素<outputid="msg"></output>对applicationCache对象地各种行处理applicationCache.onchecking=function(){document.getElementById('msg').value="检查manifest文件是否存在";};applicationCache.onnoupdate=function(){document.getElementById('msg').value="检测出manifest文件没有更新";};applicationCache.ondownloading=function(){document.getElementById('msg').value="发现更新并且正在取资源";};applicationCache.onprogress=function(){document.getElementById('msg').value="正在下载manifest文件地需要缓存地资源";};applicationCache.oncached=function(){document.getElementById('msg').value="下载结束";};applicationCache.onobsolete=function(){document.getElementById('msg').value="未找到文件";};applicationCache.onerror=function(){document.getElementById('msg').value="出现错误";};浏览例一一-四test.html地结果提示第一次加载test.html时注意观察output元素msg地内容,其会显示更新缓存地过程。一一.二.四在线状态检测除了将服务器地资源缓存在本地外,离线Web应用程序还应该能够在离线时将要提给服务器地数据保存在本地,等下次连线时再将其同步到服务器。这就要求应用程序能够检测浏览器地在线状态。在HTML五,可以通过navigator.onLin

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论