《移动商务网页设计与制作》第10章 离线 Web 应用

第10章离线Web应用10.

1离线Web应用概述10.

2创建HTML5离线应用10.

3浏览器与服务器的交互过程10.

4

applicationCache对象10.

5小结返回10.

1离线Web应用概述１０.１.１离线Ｗｅｂ应用的基本知识在Ｗｅｂ应用中使用缓存的原因之一是为了支持离线应用。离线应用有很好的使用价值，特别是当无法上网的时候，如火车过隧道、乘坐飞机或无线设备的信号出现故障时等。如果应用程序只需要偶尔进行网络通信，应用资源在本地，则离线应用变得很重要。随着完全依赖浏览器的设备出现，Ｗｅｂ应用程序在不稳定的网络环境下持续工作变得可行。ＨＴＭＬ５缓存机制综合了Ｗｅｂ应用和桌面应用的优势，基于Ｗｅｂ技术构建的Ｗｅｂ应用程序可在浏览器中运行并在线更新，也可在脱机状态下使用。但是，目前的Ｗｅｂ服务器不为脱机应用程序提供任何默认的缓存行为，所以要想使用这一新的离线应用功能，必须在应用中明确声明。下一页返回10.

1离线Web应用概述ＨＴＭＬ５的离线应用缓存使得用户可在无网络连接的情况下运行应用程序，这类应用程序的用处很多。离线应用的场景很多：如阅读和撰写电子邮件、编辑文档、编辑和展示演示文稿、创建代办事件列表等。开发人员可以指定具体哪些资源（如ＨＴＭＬ、ＣＳＳ、ＪａｖａＳｃｒｉｐｔ和图像）可以脱机使用。使用离线存储，可避免加载应用程序时常规的网络请求。如果缓存清单文件是最新的，浏览器就无需检查其他资源是否是最新的。大部分应用程序可以非常迅速地从本地缓存中加载完成。从缓存中加载资源可以节省带宽。上一页下一页返回10.

1离线Web应用概述缓存清单文件中标识的资源构成了应用缓存，是浏览器持久存储资源的地方，通常在硬盘上。有些浏览器向用户提供了查看应用程序缓存的方法，如最新版的Ｆｉｒｅｆｏｘ，其“ａｂｏｕｔ：ｃａｃｈｅ”页面会显示应用程序缓存的详细信息，提供查看缓存中每个文件的方法，如图１０.１所示。上一页下一页返回10.

1离线Web应用概述１０.１.２本地缓存和浏览器网页缓存的区别应用程序的本地缓存与浏览器网页缓存有许多方面的区别：本地缓存是为整个Ｗｅｂ应用程序服务的，而浏览器的网页缓存只为单个网页服务。任何网页都有网页缓存，而本地缓存指缓存那些指定需要缓存的网页。网页缓存是不安全、不可靠的，用户不知道网站中到底缓存了哪些网页以及哪些资源。而本地缓存是可靠的，用户可以控制对哪些内容进行缓存、不对哪些内容进行缓存，还可以编程来控制缓存的更新，利用缓存对象的各种属性、状态和事件，使得应用程序更加强大。上一页返回１０.２创建ＨＴＭＬ５离线应用１０.２.１缓存清单（ｍａｎｉｆｅｓｔ）Ｗｅｂ应用程序的本地缓存是通过每个页面的ｍａｎｉｆｅｓｔ文件来管理的。ｍａｎｉｆｅｓｔ文件是一个简单的文本文件，该文件以清单的形式列举了需要被缓存或不需要被缓存的资源文件的文件名称，以及这些资源文件的访问路径。可以对每一个页面单独指定一个ｍａｎｉｆｅｓｔ文件，也可以对整个Ｗｅｂ应用程序指定一个总的ｍａｎｉｆｅｓｔ文件。下一页返回１０.２创建ＨＴＭＬ５离线应用在ｍａｎｉｆｅｓｔ文件中，第一行“ＣＡＣＨＥＭＡＮＩＦＥＳＴ”，把本文件的作用告知浏览器，设置本地缓存中的资源。注释行以“＃”开头，注释前面可以有空格，但必须单独成行。ｍａｎｉｆｅｓｔ文件最好加上版本号。更新ｍａｎｉｆｅｓｔ文件时一般也会对版本号更新。ｍａｎｉｆｅｓｔ文件指定资源文件，文件路径可以是绝对路径，也可以是相对路径，指定时每个资源文件为一行。资源一般分为３类，分别是ＣＡＣＨＥ、ＮＥＴＷＯＲＫ、ＦＡＬＬＢＡＣＫ。上一页下一页返回１０.２创建ＨＴＭＬ５离线应用（１）ＣＡＣＨＥ类：指定别缓存在本地的资源文件。为某个页面指定需要本地缓存的资源文件时，不需要把这个页面本身指定在ＣＡＣＨＥ类别中，因为如果一个页面具有ｍａｎｉｆｅｓｔ文件，浏览器会自动为这个页面进行本地缓存。（２）ＮＥＴＷＯＲＫ类：指定不进行本地缓存的资源文件，这些资源文件只有当客户端和服务器建立连接的时候才能访问。本实例该类别中“”为通配符，表示没有在本ｍａｎｉｆｅｓｔ文件中指定的资源文件都不进行本地缓存。（３）ＦＡＬＬＢＡＣＫ类：该类别中每行指定两个资源文件，第一个资源文件为能够在线访问时使用的资源文件，第二个资源文件为不能在线访问时使用的备用资源文件。上一页下一页返回１０.２创建ＨＴＭＬ５离线应用１０.２.２配置ＩＩＳ服务器在应用程序完全离线之前，还需要正确地提供清单文件。清单文件必须有扩展名.ｍａｎｉｆｅｓｔ和正确的ｍｉｍｅ-ｔｙｐｅ。如果使用Ａｐａｃｈｅ这样的Ｗｅｂ服务器，需要在Ａｐａｃｈｅ中找到ＡｐｐＳｅｒｖ／Ａｐａｃｈｅ２.２／ｃｏｎｆ文件夹中的ｍｉｎｅ.ｔｙｐｅｓ文件并向其添加如下内容：ｔｅｘｔ／ｃａｃｈｅ－ｍａｎｉｆｅｓｔｍａｎｉｆｅｓｔ这使用户在请求任何扩展名为.ｍａｎｉｆｅｓｔ的文件时，Ａｐａｃｈｅ将发送ｔｅｘｔ／ｃａｃｈｅ-ｍａｎｉｆｅｓｔ文件头部。在微软的ＩＩＳ服务器中按下列步骤配置：上一页下一页返回１０.２创建ＨＴＭＬ５离线应用（１）右键选择默认网站或需要添加类型的网站，弹出属性对话框。（２）选择“ＨＴＴＰ头”标签。（３）在ＭＩＭＥ映射下，单击文件类型按钮。（４）在打开的ＭＩＭＥ类型对话框中单击“新建”按钮。（５）在关联扩展名文本框中输入“ｍａｎｉｆｅｓｔ”，在内容类型文本框中输入“ｔｅｘｔ／ｃａｃｈｅ-ｍａｎｉｆｅｓｔ”，然后单击“确定”按钮。上一页下一页返回１０.２创建ＨＴＭＬ５离线应用１０.２.３浏览器缓存清单为了让浏览器能够正常阅读该文本文件，需要在Ｗｅｂ应用程序页面上〈ｈｔｍｌ〉标签的ｍａｎｉｆｅｓｔ属性中指定ｍａｎｉｆｅｓｔ文件的ＵＲＬ地址。指定方法如下：上一页返回１０.３浏览器与服务器的交互过程当使用离线应用时，浏览器与服务器之间的通信过程很有用。例如一个网站以ｉｎｄｅｘ.ｈｔｍｌ为主页，该主页使用ｉｎｄｅｘ.ｍａｎｉｆｅｓｔ文件为ｍａｎｉｆｅｓｔ文件，在该文件中请求缓存ｉｎｄｅｘ.ｈｔｍｌ、ｍｒ.ｊｓ、ｍｒ１.ｊｐｇ、ｍｒ２.ｊｐｇ等文件。首次访问该网站时，其交互过程如下：（１）浏览器请求访问网站。（２）服务器返回请求网页，如ｉｎｄｅｘ.ｈｔｍｌ。（３）浏览器解析网页，请求页面上的所有资源文件，包括ＨＴＭＬ文件、图像文件、ＣＳＳ文件、ＪＳ文件以及ｍａｎｉｆｅｓｔ文件。（４）服务器返回所有资源文件。下一页返回１０.３浏览器与服务器的交互过程（５）浏览器处理ｍａｎｉｆｅｓｔ文件，请求ｍａｎｉｆｅｓｔ中所有要求本地缓存的文件，包括ｉｎｄｅｘ.ｈｔｍｌ页面本身，即使刚才已经请求过这些文件。如果要求本地缓存所有文件，这将是一个比较大的重复的请求过程。（６）服务器返回所有要求本地缓存的文件。（７）浏览器对本地缓存进行更新，存入包括页面本身在内的所有要求本地缓存的资源文件，并且触发一个事件，通知本地缓存被更新。上一页返回１０.４applicationCache对象ａｐｐｌｉｃａｔｉｏｎＣａｃｈｅ对象代表本地缓存，可以用它来通知用户本地缓存中已经被更新，也允许用户手工更新本地缓存。在浏览器与服务器的交互过程中，当浏览器对本地缓存进行更新，加入新的资源文件时，会触发ａｐｐｌｉｃａｔｉｏｎＣａｃｈｅ对象的ｕｐｄａｔｅｒｅａｄｙ事件，通知本地缓存已经被更新。１０.４.１ｓｗａｐＣａｃｈｅ方法该方法用来手工执行本地缓存的更新，它只能在ａｐｐｌｉｃａｔｉｏｎＣａｃｈｅ对象的ｕｐ-ｄａｔｅＲｅａｄｙ事件被触发时调用，ｕｐｄａｔｅＲｅａｄｙ事件只有在服务器上的ｍａｎｉｆｅｓｔ文件被更新，并且把ｍａｎｉｆｅｓｔ文件中所要求的资源文件下载到本地后触发。该事件的含义是“本地缓存准备被更新”。当这个事件被触发后，可以用ｓｗａｐＣａｃｈｅ（）方法来手工进行本地缓存的更新。下一页返回１０.４applicationCache对象当本地缓存的容量非常大，本地缓存的更新工作将需要相对较长的时间，而且还会把浏览器锁住。这时最好有个提示，告诉用户正在进行本地缓存的更新，代码如下：上一页下一页返回１０.４applicationCache对象１０.４.２ａｐｐｌｉｃａｔｉｏｎＣａｃｈｅ对象的事件ＡｐｐｌｉｃａｔｉｏｎＣａｃｈｅ对象除了有ｕｐｄａｔｅ方法与ｓｗａｐＣａｃｈｅ方法外，还有一系列的事件。下面通过浏览器与服务器的交互过程来看看这些事件是如何被触发的。首次访问网站时，事件被触发的过程如下：（１）浏览器请求访问网站。（２）服务器返回请求网页，例如ｉｎｄｅｘ.ｈｔｍｌ。（３）浏览器发现该网页具有ｍａｎｉｆｅｓｔ属性，触发ｃｈｅｃｋｉｎｇ事件，检查ｍａｎｉ-ｆｅｓｔ文件是否存在。不存在时，触发ｅｒｒｏｒ事件，表示未找到ｍａｎｉｆｅｓｔ文件，不执行步骤（６）。上一页下一页返回１０.４applicationCache对象（４）浏览器解析ｉｎｄｅｘ.ｈｔｍｌ网页，请求页面上的所有资源文件。（５）服务器返回所有资源文件。（６）浏览器处理ｍａｎｉｆｅｓｔ文件，请求ｍａｎｉｆｅｓｔ中所有要求本地缓存的文件，包括ｉｎｄｅｘ.ｈｔｍｌ页面本身，即使刚才已经请求过该文件。如果要求本地缓存所有文件，这将是一个比较大的重复的请求过程；（７）服务器返回所有要求本地缓存的文件。（８）浏览器触发ｄｏｗｎｌｏａｄｉｎｇ事件，然后开始下载这些资源。在下载的同时，周期性地触发ｐｒｏｇｒｅｓｓ事件，开发人员可以用编程的手段获取多少文件已被下载，多少文件仍然处于下载队列等信息。上一页下一页返回１０.４applicationCache对象（９）下载结束后触发ｃｈｅｃｋｅｄ事件，表示首次缓存成功，存入所有要求本地缓存的资源文件。再次访问网站，步骤（１）～（５）同上，在步骤（５）执行完之后，浏览器将核对ｍａｎｉｆｅｓｔ文件是否被更新，若没有被更新，则触发ｎｏｕｐｄａｔｅ事件，步骤（６）开始的交互过程不会被执行。如果它被更新了，将继续执行后面的步骤，在步骤（９）中不触发ｃｈｅｃｋｅｄ事件，而是触发ｕｐｄａｔｅｒｅａｄｙ事件，这表示下载结束，可以通过刷新页面来使用更新后的本地缓存，或调用ｓｗａｐＣａ