.第11章 HTML5.pptVIP

11.2 开发HTML5离线Web应用程序 11.2.1 Application Cache API 11.2.2 Cache manifest文件 11.2.1 Application Cache API HTML5提供Application Cache API，可以实现离线资源缓存。实现离线资源缓存的好处如下： ? 可以在离线时继续使用Web应用程序； ? 将资源缓存到本地，可以节省带宽，缩短Web应用程序的响应时间； ? 可以减轻Web服务器的负载。 判断浏览器是否支持Application Cache API 11.2.2 Cache manifest文件 通过window.applicationCache.status的值了解离线应用程序缓存的状态 可以通过window.applicationCache.status的值了解离线应用程序缓存的状态，它可以是如下的值： ? UNCACHED，未缓存。 ? IDLE，闲置。 ? UPDATEREADY，已更新。 ? CHECKING，正在检查。 ? DOWLOADING，正在下载。 ? OBSOLETE，失败。 applicationCache对象的事件 接上 接上 【例11-4】 改进【例11-3】，实现手动更新缓存，并对applicationCache对象的各种事件进行处理。 在test.html中增加一个按钮，用于手动更新缓存，定义代码如下： button id=update onclick=update();更新缓存/button 单击此按钮，会调用update()函数，代码如下 script type=text/javascript function update(){ if(window.applicationCache){ window.applicationCache.update(); } else{ alert(您的浏览器不支持Application Cache API。); } } /script 为了显示更新的进度信息，在test.html中增加一个output元素 output id=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 = 出现错误; }; 浏览【例11-4】中test.html的结果 提示 第一次加载test.html时注意观察output元素msg的内容，其中会显示更新缓存的过程。 11.2.4 在线状态检测 除了将服务器的资源缓存在本地外，离线Web应用程序还应该能够在离线时将要提交给服务器的数据保存在本地，等下次连线时再将其同步到服务器。这就要求应用程序能够检测浏览器的在线状态。在HTML5中，可以通过navigator.onLine属性可以判断浏览器的在线状态，如果navigator.onLine为 true，则表示在线；否则表示离线。 【例11-5】 在网页中定义一个按钮，单击此按钮时，会检测浏览器的在线状态。定义按钮的代码如下： button id=check onclick=check