HTML5基础开发教程 作者 范立锋 于合龙 孙丰伟 第08章__HTML5离线应用及地理位置应用.pptVIP

8.1 离线应用 1. 离线应用工作原理 为了使Web应用在离线状态下也能够正常工作，必须把Web应用相关的资源文件全部保存在本地。当客户端脱离网络环境时，可以根据当前访问的网络地址，找到并加载缓存在本地的相应资源文件，以达到离线应用的效果。 2. 管理本地缓存 离线存储是通过manifest文件来管理的，manifest文件用于配置哪些资源文件需要被缓存，哪些不需要被缓存，同时资源文件的访问路径也需要在manifest中进行配置。 一个标准的manifest文件主要包含以下几个节点： （1）CACHE：表示离线状态下，浏览器需要缓存到本地的资源文件列表。 （2）NETWORK：表示在线状态下，需要访问的资源文件列表。 （3）FALLBACK：FALLBACK中配置的信息都是成对出现的，前面的资源文件不可访问时，将使用后面的文件进行访问。 一个简单的manifest配置文件实例如下 CACHE MANIFEST #version 0.0.0 CACHE: JS/test.js Css/test.css Images/test.jpg NETWORK: Index.aspx FALLBACK: /Project/Index.aspx /Bak/Project/Index.aspx 3. applicationCache检测及更新缓存 利用applicationCache对象的相关方法、事件可以检测本地缓存的状态并可以更新本地缓存 （1）status属性，用于返回是否有可更新的本地缓存信息，该属性返回值及说明如右表所示 （2）updateReady事件　 updateReady事件用于检测本地缓存是否更新完毕，当manifest文件被更新且浏览器载入新的资源文件时会触发updateReady事件。 （3）swapCache方法 swapCache方法用于手动更新本地缓存信息，该方法只能在applicationCache的updateReady事件触发时调用。 （4）update方法 除了使用swapCache方法可以更新本地缓存信息外，还可以通过直接调用applicationCache对象的update方法手动更新本地缓存。 4. 检测在线状态 本地缓存的数据信息都是处于在线状态时获取并缓存在本地的，当处于离线状态时缓存信息被调用，当再次处于在线状态时缓存信息被更新。 HTML5提供了两种方式检查是否在线 （1）使用onLine属性 HTML5提供了navigator对象，利用该对象的onLine属性，可以判断是否在线。onLine属性的应用格式如下 navigator.onLine 当onLine属性返回true时表示在线，当onLine属性返回false时表示离线。onLine属性在实际应用中会有一定的延迟性。 （2）使用online与offline事件 还可以通过调用online与offline事件检测在线状态，这两个时间是基于body对象触发的，时效性要优于onLine属性。 使用监听方式应用online及offline事件的格式如下 window.addEventListener(“online”,function(){ //相关处理代码 })； window.addEventListener(“offline”,function(){ //相关处理代码 })； 8.2 地理位置应用 HTML5中通过使用Geolocation API可以获取当前用户的地理位置信息。 1. Geolocation的工作原理 （1）GPS信息 GPS是获取地理位置信息最为有效也是最为精确的方法，通过GPS卫星可以精确计算出用户当前所处的经度、纬度以及海拔信息。 （2）IP定位 当用户使用台式电脑访问网络时，可根据用户的IP信息大致确定用户所处的地理位置。但是这种方式精度很差，有时甚至会产生错误的定位信息。 （3）无线网络定位 此定位方式主要针对手机等通讯设备，根据手机发送接收信号所使用的信号基站，大致确定用户所在的区域。此定位方式也不是十分精确，取决于信号基站的分部密度。 2. 获取当前地理位置 使用getCurrentPosition()方法可以获取当前用户所处的地理位置信息，该方法的应用格式如下 void getCurrentPosition(onSuccess, onError[, options]); 参数说明： （1）onSuccess回调函数可接受一个position对象，该对象包含了地理位置的坐标信息。 （2）onError回调函数可接受一个error对象，该对象包含了两个属性：code和message。其中code属性可能的取值 PERMISSION_DENIED：用户拒