移动互联网之页面数据离线处理综述.pptx

目录 离线应用基础 检测本地缓存的更新状态 实例11-4：开发一个离线留言系统 实例11-1：简单的离线应用程序 实例11-2：检测网络的当前状态 实例11-3：online、offline事件检测当前网络状态 综合实例——开发一个离线式日历提醒系统 1 离线应用基础 离线Web应用程序可以在无法连接Web服务器时运行，它的工作原理如下： 当应用程序与服务器建立联系时，浏览器会在本地缓存所有URL清单中的资源文件。当应用与服务器失去联系时，浏览器会调用缓存的文件来支撑Web应用程序的正常运行。 离线Web应用程序核心元素如右图所示。 右图中的DB并不是指服务器端的数据库，而是指本地数据库，例如SQLite、IndexedDB等。Manifest是一个文件，是离线Web应用程序的强制性部署描述符组件，它列举了需要加载的文件。 离线Web应用程序核心元素 1 离线应用基础 11.1.1 开发离线应用程序 在开发支持离线Web的应用程序时，开发者通常需要完成下面几项工作： 离线资源缓存：需要一种方式来指明应用程序离线工作时所需的资源文件。这样，浏览器才能在在线状态时，将这些文件缓存到本地。此后，当用户离线访问应用程序时，这些资源文件会自动加载，从而让用户正常使用。HTML5中，通过cache manifest文件指明需要缓存的资源，并支持自动和手动两种缓存更新方式，将在11.2节中进行介绍。 在线状态检测：开发者需要知道浏览器是否在线，这样才能够针对在线或离线的状态，做出对应的处理。在HTML5中，提供了两种检测当前网络是否在线的方式，将在实例11-1和实例11-2中进行介绍。 本地数据存储：离线时，需要能够把数据存储到本地，以便在线时同步到服务器上。为了满足不同的存储需求，HTML5提供了DOM Storage和Web SQL Database两种存储机制。前者提供了易用的key/value对存储方式，而后者提供了基本的关系数据库存储功能。 1 离线应用基础 11.1.1 开发离线应用程序 具体实现基本流程如下： 编写一个manifest类型的文件，列出需要通过浏览器缓存至本地的资源性文件。 开发一个Web页面，通过html元素的“manifest”属性将manifest文件与页面绑定。 对服务器端进行配置，使其能读取manifest类型的文件。 1 离线应用基础 11.1.2 manifest文件详解 在移动Web页面应用中，为了能在离线状态下继续访问Web应用，需要将缓存文件的URL写入manifest文件中。当浏览器与服务器建立联系后，浏览器就会根据manifest文件所列的缓存清单，将相应的资源文件缓存在本地。 manifest文件可以实现如下管理功能： 需要保存哪些文件 不需要保存哪些文件 在线与离线时需要调用哪些文件 在具体应用时，使用文本文件的编辑器就可以新建一个manifest文件，在保存时需要将扩展名设置为“.manifest”即可。 1 离线应用基础 例如，以下代码新建了一个manifest文件。 CACHE MANIFEST #version 0.0.0 CACHE: #下面列出了带有相对路径的资源文件 Js0.js css0.css Images/img0.jpg Images/img1.png NETWORK: #下面列出了在线时需要访问的资源文件 Index.jsp Online.do FALLBACK: #以成对形式列出不可访问文件的替补资源文件 /Project/Index.jsp /BkProject/Index.jsp 1 离线应用基础 对上述代码的具体说明如下所示。 “CACHE:”标记：表示离线时浏览器需要缓存到本地的服务器资源文件列表。当为某个页面编写manifest类型文件时，不需要将该页面放入列表中，因为浏览器在进行本地资源缓存时会自动缓存这个页面。 “NETWORK:”标记：表示在线时需要访问的资源文件列表，这些文件只有在浏览器与服务器之间建立联系时才能访问。如果设置为“*”，表示除了在“CACHE：”标记中标明需要缓存的文件之外都不进行本地缓存。 “FALLBACK:”标记：表示以成对方式列出不访问文件的替补文件。其中前者是不可访问的文件，后者是替补文件，即当“/Project/Index.jsp”文件不可访问时，浏览器会尝试访问“/BkProject/Index.jsp”文件。 1 离线应用基础 在编写manifest文件的代码时，需要注意以下几点： （1）在manifest文件中，第一行必须是“CACHE MANIFEST”，表明这是一个通过浏览器将服务器资源进行本地缓存的格式文件。 （2）在编写注释时需要另起一行，并且以“#”开头。 （3）manifest文件的内