移动互联网之页面数据离线处理

1、离线应用基础检测本地缓存的更新状态实例11-4：开发一个离线留言系统实例11-1：简单的离线应用程序实例11-2：检测网络的当前状态实例11-3：online、offline事件检测当前网络状态综合实例开发一个离线式日历提醒系统离线Web应用程序可以在无法连接Web服务器时运行，它的工作原理如下：当应用程序与服务器建立联系时，浏览器会在本地缓存所有URL清单中的资源文件。当应用与服务器失去联系时，浏览器会调用缓存的文件来支撑Web应用程序的正常运行。离线Web应用程序核心元素如右图所示。右图中的DB并不是指服务器端的数据库，而是指本地数据库，例如SQLite、IndexedDB等。Manife

2、st是一个文件，是离线Web应用程序的强制性部署描述符组件，它列举了需要加载的文件。离线Web应用程序核心元素在开发支持离线Web的应用程序时，开发者通常需要完成下面几项工作：离线资源缓存：离线资源缓存：需要一种方式来指明应用程序离线工作时所需的资源文件。这样，浏览器才能在在线状态时，将这些文件缓存到本地。此后，当用户离线访问应用程序时，这些资源文件会自动加载，从而让用户正常使用。HTML5中，通过cache manifest文件指明需要缓存的资源，并支持自动和手动两种缓存更新方式，将在11.2节中进行介绍。在线状态检测：在线状态检测：开发者需要知道浏览器是否在线，这样才能够针对在线或离线的状

3、态，做出对应的处理。在HTML5中，提供了两种检测当前网络是否在线的方式，将在实例11-1和实例11-2中进行介绍。本地数据存储：本地数据存储：离线时，需要能够把数据存储到本地，以便在线时同步到服务器上。为了满足不同的存储需求，HTML5提供了DOM Storage和Web SQL Database两种存储机制。前者提供了易用的key/value对存储方式，而后者提供了基本的关系数据库存储功能。具体实现基本流程如下：编写一个manifest类型的文件，列出需要通过浏览器缓存至本地的资源性文件。开发一个Web页面，通过元素的“manifest”属性将manifest文件与页面绑定。对服务器端进行

4、配置，使其能读取manifest类型的文件。在移动Web页面应用中，为了能在离线状态下继续访问Web应用，需要将缓存文件的URL写入manifest文件中。当浏览器与服务器建立联系后，浏览器就会根据manifest文件所列的缓存清单，将相应的资源文件缓存在本地。manifest文件可以实现如下管理功能：需要保存哪些文件不需要保存哪些文件在线与离线时需要调用哪些文件在具体应用时，使用文本文件的编辑器就可以新建一个manifest文件，在保存时需要将扩展名设置为“.manifest”即可。例如，以下代码新建了一个manifest文件。CACHE MANIFEST#version 0.0.0CACH

5、E:#下面列出了带有相对路径的资源文件Js0.jscss0.cssImages/img0.jpgImages/img1.pngNETWORK:#下面列出了在线时需要访问的资源文件Index.jspOnline.doFALLBACK:#以成对形式列出不可访问文件的替补资源文件/Project/Index.jsp /BkProject/Index.jsp对上述代码的具体说明如下所示。“CACHE:”标记：标记：表示离线时浏览器需要缓存到本地的服务器资源文件列表。当为某个页面编写manifest类型文件时，不需要将该页面放入列表中，因为浏览器在进行本地资源缓存时会自动缓存这个页面。“NETWORK:

6、”标记：标记：表示在线时需要访问的资源文件列表，这些文件只有在浏览器与服务器之间建立联系时才能访问。如果设置为“*”，表示除了在“CACHE：”标记中标明需要缓存的文件之外都不进行本地缓存。“FALLBACK:”标记：标记：表示以成对方式列出不访问文件的替补文件。其中前者是不可访问的文件，后者是替补文件，即当“/Project/Index.jsp”文件不可访问时，浏览器会尝试访问“/BkProject/Index.jsp”文件。在编写manifest文件的代码时，需要注意以下几点：（1）在manifest文件中，第一行必须是“CACHE MANIFEST”，表明这是一个通过浏览器将服务器资源进

7、行本地缓存的格式文件。（2）在编写注释时需要另起一行，并且以“#”开头。（3）manifest文件的内容允许重复编写分类标记，即可以写多个“CACHE：”标记或另外两种标记。（4）如果没有找到分类的标记，则都被视为“CACHE：”标记下的资源文件。（5）建议通过注释的方式标明每一个manifest类型文件的版本号，以便于更新文件时使用。例如在上面的演示代码中，“#version 0.0.0”表示内定的版本号。在创建完manifest类型文件后，就可以通过页面中元素的“manifest”属性，将页面与manifest类型文件绑定起来。代码如下：这样在浏览器中查看页面时，会自动将manifest类

8、型文件中所涉及的资源文件缓存在本地。完成manifest文件的创建并将该文件与Web页进行了绑定后，接下来需要设置服务器支持扩展名为“.mainfest”的文件，否则服务器无法读取mainfest类型的文件。接下来以Windows 7系统为例，介绍配置IIS服务器选项的过程。（1）进入Win7的控制面板，单击“程序和功能”选项，在弹出的对话框中单击左侧的“打开或关闭Windows功能”项。（2）在安装Windows功能的选项菜单，将Internet信息服务的所有组件全部勾起来。（3）安装完成后，再次打开控制面板，打开管理工具，单击Internet信息服务（IIS）管理器。（4）在弹出的对话框中

9、，依次单击左边的“网站”“默认网站”选项，然后双击右侧IIS组的“MIME”类型图标。查看是否存在“.manifest”类型，如果已经存在将其值改为“text/cache-manifest”即可。（5）如果不存在“.manifest”类型则在空白处右击鼠标，在弹出的快捷菜单中选择“添加”选项，会弹出新建文件类型的对话框。在对应的“文件扩展名”文本框中输入“.manifest”，在“MIME类型”文本框中输入“text/cache-manifest”。单击“确定”按钮，此时便完成了扩展名为“.manifest”文件类型的创建。通过上述实现步骤，成功为IIS创建了一个扩展名为“.manifest”

10、的文件类型，使服务器能够支持manifest文件，实现对应站点下Web页离线访问的功能。浏览器第一次访问Web应用程序时将manifest文件中指定的文件保存在本地缓存中，并在manifest文件内容变化时更新缓存，而需要缓存的资源文件的内容变化时，则需要手动更新缓存。在HTML5标记语言中，applicationCache对象表示本地缓存。开发离线应用程序时，通过调用该对象的onUpdateReady事件来监测本地缓存是否更新完成。在当前有如下两种手动更新本地缓存的方法：直接调用applicationCache对象的update()方法具体调用格式如下：window. application

11、Cache. update()在onUpdateReady事件中调用swapCache()方法如果与页面绑定的manifest文件的内容发生变化时，将会引起本地缓存的更新而触发updateready事件。基于此特征，可以在updateready事件中编写实时监测本地缓存是否完成更新的代码。swapCache()方法与update()方法的功能都是更新本地缓存，两者有一些不同：更新本地缓存的时间不一样： swapCache()方法要早于update()方法将本地的缓存进行更新，swapCache()方法是将本地缓存立即更新。在移动Web页面应用中，无论是使用哪种方法，当前执行的页面都不会立即显示

12、本地缓存更新后的页面效果，都要重新加载一次或手动刷新页面后才能发挥作用。触发事件不一样：必须在updateready事件中才能调用swapCache()方法，而update()方法随时可以调用。在本实例的具体实现流程如下：（1）新建一个HTML5页面，当浏览该页面时，通过JS文件js1.js来获取服务器时间，并按照指定的时间格式动态地显示在页面中。（2）当中断与服务器的联系再次浏览该页面时，仍然可以在页面中动态地显示时间。实例文件11-1.html的具体实现代码如下：开发一个简单离线应用 简单离线示例 正在获取当前时间. function $(id) return document.getEl

13、ementById(id);/获取当前格式化后的时间并显示在页面上function getCurTime() var dt=new Date(); var strHTML=当前时间是 ; strHTML+=RuleTime(dt.getHours(),2)+:+ RuleTime(dt.getMinutes(),2)+:+ RuleTime(dt.getSeconds(),2); $(time).value=strHTML;JS文件js1.js自定义了两个函数，分别用于获取系统时间与格式化显示的时间。其具体实现代码如下：/转换时间显示格式function RuleTime(num, n) va

14、r len = num.toString().length; while(len n) num = 0 + num; len+; return num;/定时执行setInterval(getCurTime,1000);CACHE MANIFEST#version 0.0.1CACHE:js1.js另外，在11-1.html页面中通过元素的“manifest”属性绑定了一个“manifest”类型文件l.manifest，在此文件中列举了服务器需要缓存至本地的代码。其具体代码如下：在上述代码中缓存了两个资源文件，分别是jsl.js和11-l.html本身。因为使用了本地缓存，所以使浏览器与服务

15、器之间的数据交互按照如下步骤进行：（1）浏览器：请求访问文件11-l.html。（2）服务器：返回文件11-l.html。（3）浏览器：解析返回的文件11-l.html，请求服务器返回文件11-l.html所包含的全部资源性文件，包括文件l.manifest。（4）服务器：返回浏览器所请求的所有资源文件。（5）浏览器：解析返回的文件l.manifest，请求返回URL清单中的资源文件。（6）服务器：再次返回URL清单中的资源文件。（7）浏览器：更新本地缓存，将新获取的URL清单中的资源文件更新至本地缓存中。在进行更新过程中会触发onUpdateReady事件，表示完成本地缓存的更新工作。（8）

16、浏览器再次查看访问文件11-l.html的页面，如果文件l.manifest没有发生变化，则直接调用本地的缓存以响应用户的请求，从而实现离线访问页面的功能。本实例执行后的效果如下图所示。执行效果开发浏览器与服务器在数据交互时的离线应用程序，必须获取应用的在线状态。只有检测出页面的在线状态，才能在离线后将数据保存在本地，在上线时将本地数据同步至服务器，从而实现离线数据交互功能。在HTML5标记语言中，可以通过访问onLine属性和触发online事件的方法分别检测应用是否在线。onLine属性是一个布尔值，当值为true时表示在线，否则表示离线。如果当前的网络状态发生了变化，属性onLine的值

17、就会随之发生变动。基于此，可以通过获取属性onLine的值来检测当前网络的状态，确定应用是否在线或离线，从而可以编写出不同的代码。在移动Web页面应用中，navigator是一个独立的对象，用于向用户返回浏览器和操作系统的相关信息，所有信息都是以navigator对象的属性方式进行调用的。在日常的代码开发过程中，除使用onLine属性检测当前浏览器的在线模式外，navigator对象还有其他一些常用的属性，如下表所示。navigator对象中常用属性在本实例的实现文件是11-2.html，具体实现流程如下：（1）新建一个HTML5页面，设置在页面加载时调用onLine属性。（2）如果属性onL

18、ine的值为true，则在页面中显示“在线”字样，否则显示“离线”字样。实例文件11-2.html的具体实现代码如下：通过onLine属性检测网络的当前状态 通过onLine属性检测网络的当前状态 function $(id) return document.getElementById(id);/自定义页面加载时调用的函数function pageload() if (navigator.onLine) Status_Handle(在线); else Status_Handle(离线); JavaScript文件js2.js中自定义了函数pageload()。其功能是根据“onLine”属性

19、检测当前网络的状态，在页面加载时调用。文件js2.js的具体实现代码如下：/自定义显示执行过程中状态的函数function Status_Handle(message) $(pStatus).style.display = block; $(pStatus).innerHTML= message;在上述代码中，通过调用navigator对象的属性onLine来检测当前浏览器的在线模式。如果为“true”表示在线，否则表示离线。CACHE MANIFEST#version 0.6.0CACHE:js2.js再看manifest文件2.manifest，功能是列举服务器需要缓存至本地的文件清单，具

20、体实现代码如下：执行后的效果如下图所示。执行效果使用navigator对象中的onLine属性来检测当前网络的状态时，因为该属性有滞后性，所以不能及时反馈当前网络的变化状态。为了解决这个问题，在HTML5中可以调用online与offline事件及时侦测网络在线与离线的状态。这两个事件是基于body对象触发的，以冒泡的方式传递给document、window对象，因此这两个事件可以准确及时地捕获当前浏览器的在线状态。在本实例的实现文件是11-3.html，具体实现流程如下：（1）新建一个HTML5页面，在浏览页面的过程中，如果用户有切换网络连接状态的操作，页面将自动触发online或offli

21、ne事件。（2）如果是连接网络，则在页面中显示“在线”提示，否则显示“离线”提示。实例文件11-3.html的具体实现代码如下：通过online与offline事件检测网络的当前状态 通过online与offline事件检测网络的当前状态 连接已经断开 再看JavaScript文件js3.js，设置当页面加载时调用函数pageload()为window对象添加“online”事件和“offline”事件。文件js3.js的具体实现的代码如下所示。/ JavaScript Documentfunction $(id) return document.getElementById(id);/自定义

22、页面加载时调用的函数function pageload() window.addEventListener(online,function() Status_Handle(网络连接正常); ,false); window.addEventListener(offline,function() Status_Handle(连接已经断开); ,false);/自定义显示执行过程中状态的函数function Status_Handle(message) $(pStatus).style.display = block; $(pStatus).innerHTML= message;因为本实例是通过事件

23、机制捕获网络状态的，所以只有在触发online事件和offline事件时才能在页面中展现提示信息。通常在手动或异常使网络断开后会触发offline事件，打开的页面将自动侦测，无需刷新，并在页面中显示“连接已断开”的提示。在手动或自动重试的方式使网络连接成功后，打开的页面也无需刷新，自动在页面中显示“网络连接正常”的提示。如果不触发网络断开与连接的事件，则不会在页面中展示任何提示信息。再看manifest文件she3.manifest，功能列举服务器需要缓存至本地的文件清单，具体实现代码如下：CACHE MANIFEST#version 0.7.0CACHE:js3.js本实例执行后的效果如下图

24、所示。执行效果在HTML5网页开发过程中，如果目标对象仅仅是是简单的静态页面，那么使用Cache Manifest处理方法就可以实现离线页面的访问。但如果是数据交互型的离线应用，不仅需要在离线时访问页面，而且还要支持数据在离线时的传输功能。要想数据在离线时也能与服务器发生交互功能，通常的处理方式如下：用onLine属性来检测当前的网络状态，如果是离线，则先将交互的数据暂时存储至本地，例如保存到localStorage对象或Web SQL数据库中。在上线时将存储的数据同步至服务器，从而实现数据在离线时的交互功能。下面通过一个演示实例来讲解离线留言系统的开发方法。本实例的功能是创建一个HTML5页

25、面，无论是网络在线或离线时都可以访问页面，并在文本框中输入留言内容。单击“发表”按钮时，如果是在线状态，将向服务器与本地存储对象同时写入数据；如果是离线则将数据保存在本地，等上线时再将存储的数据同步至服务器中。具体实现代码如下：离线留言系统 亲，请稍等，正在读取数据中. function $(id) return document.getElementById(id);/点击发表按钮时调用function btnAdd_Click() /获取文本框中的内容 var strContent = $(txtContent).value; /如果不为空，则保存 if (strContent.lengt

26、h 0) var strKey = RetRndNum(4); var strVal = strContent;然后编写脚本文件js4.js，具体代码如下所示。 if (navigator.onLine) /如果在线向服务器端增加数据 AddServerData(strKey, strVal); localStorage.setItem(strKey, strVal); /重新加载 SynclocalData(); /清空原先内容 $(txtContent).value = ;/获取保存数据并显示在页面中function SynclocalData() /标题部分 var strHTML= ;

27、 strHTML+= ID; strHTML+= 内容; strHTML+= ; /内容部分 for (var intI = 0; intI localStorage.length; intI+) /获取Key值 var strKey = localStorage.key(intI); /过滤键名内容 var strVal = localStorage.getItem(strKey); strHTML+= ; strHTML+= + strKey + ; strHTML+= + strVal + ; strHTML+= ; if (navigator.onLine) /如果在线向服务端增加数据 AddServerData(