html5构建离线web应用
最近在研究html5的一些相关内容，其过程真是苦不堪言，由于被一些东西所吸引着所以也就硬着头皮挺了过来，结果还是有一些收获，相信也有很多初学者正在和我当时一样的痛苦中，所以把一些研究收获写了出来与大家一起分享讨论：
这次主要写的是构建web离线应用，顾名思义离线就是当网络无法连接时也可以做一些简单的操作或者是继续浏览一些网页的一个网站。这个应用至少给我们带来了三个好处：1、离线状态下访问2、文件被存储在本地，页面加载速度得到提升3、只加载被修改的文件，可以降低用户请求对服务器的造成的负载压力由于目前html5还在draft中所以，支持问题就成了当前最重要的一个话题，下图是目前各大浏览器厂商对html5的支持情况：?
??
?
说了这么多，可能已经有人迫不及待了，那么现在就让我带你们进入离线应用世界来看一下吧：第一步：服务器端首先，你的服务器必须支持html5；由于离线应用包含一个manifest清单文件，此文件的MIME类型 是text/cache-manifest,所以配置服务器端Tomcat服务器：在tomcat下的conf/web.xml添加一个mime_type 如下：<mime-mapping><extension>manifest</extension><mime-type>text/cache-manifest</mime-type></mime-mapping>?Apache服务器：Apache 中可在 .htaccess 中添加：
AddType text/cache-manifest manifest
第二步：给html元素添加manifest特性：
?
<html manifest="path/myApplication.manifest">
?第三步：编写manifest文件myApplication.manifest:
?
manifest文件第一行必须是CACHE MANIFEST其次是其它标记CACHE标记：直接要缓存的文件NETWORK标记：需要在线访问的文件FALLBACK标记：当没有响应的页面，如：当请求某个页面时，而此页面服务器不在正常工作中，那么可 以显示一个指定页面??
CACHE MANIFEST#VERSION 10.0#直接缓存文件CACHE:applicationCache.jspjs/offline.jsjs/jquery-1.4.1.min.js#图片文件images/1.jpgimages/2.jpg#需要在线的文件NETWORK:formapi.jsp#替代方案FALLBACK:index.jsp
?第四步：编写功能代码：
?
jsp文件：<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html manifest="myApplication.manifest"><head> <script type="text/javascript" src="js/jquery-1.4.1.min.js"></script> <script type="text/javascript" src="js/offline.js"></script><script> </script><style></style> </head> <body> <header>Offline Example</header> <section> <img src="images/1.jpg" /> <article> <button id="switchButton">切换</button> <button id="installButton">缓存</button> <h3>Log</h3> *****start 离线应用进程列表 开始start***** <div id="info"> </div> *****end 离线应用进程列表结束 end***** </article> </section> </body></html>??js文件：要写js文件就涉及到了applicatioCache API操作应用缓存的接口。新的window.applicationCache对象可触发一系列缓存状态相关事件，该对象有一个status属性为数值型代表了缓存的状态，该状态共有6种：缓存状态?数值属性?UNCACHED(未缓存)0??IDLE(空闲)1?CHECKING(检查中)2?DOWNLOADING(下载中)3?UPDATEREADY(更新就绪)4?OBSOLETE(过期)5目前由于大多数网页都没有缓存，所以都处于UNCACHED状态，而IDLE代表所有资源都已被浏览器缓存，当前不需要更新，如果缓存曾经有效但现在manifest文件丢失怎进入OBSOLETE(过期)状态对于以上各种状态相应会触发相应的事件：?事件关联的缓存状态?onchecking??CHECKINGondownloading?DOWNLOADINGonupdateready?UPDATEREADYonobsolete?OBSOLETEoncached?IDLE此外还有一些事件：onerror：更新时发生错误onprogress：更新进程onnoupdate：没有可用更新ononline：往前网络连接onoffline:当前网络中断下面将为大家详细介绍各个事件的触发：如图
var n=1;window.applicationCache.onprogress=function(e){$("#info").append("<br/>Resource loading..."+n);n++;}window.applicationCache.oncached=function(e){$("#info").append("<br/>oncached");}window.applicationCache.onchecking=function(e){$("#info").append("<br/>onchecking");}window.applicationCache.onnoupdate=function(e){$("#info").append("<br/>onnoupdate");}window.applicationCache.onupdateready=function(e){$("#info").append("<br/>onupdateready");}window.applicationCache.onobsolete=function(e){$("#info").append("<br/>onobsolete");}window.applicationCache.ondownloading=function(e){$("#info").append("<br/>ondownloading");}window.applicationCache.onerror=function(e){$("#info").append("<br/>onerror");}window.addEventListener("online",function(){alert("在线");},true);window.addEventListener("offline",function(){alert("离线");},true);$(function(){showCacheStatus=function(n){statusMessage=["Uncache","Idle","Checking","Downloading","Update Ready","Obsolete"];return statusMessage[n];}$("#installButton").click(function(e){try{window.applicationCache.update();}catch(e){alert("更新错误！")}});window.onload=function(e){if(!window.applicationCache){alert("当前浏览器不支持离线缓存");return;}if(!navigator.geolocation){alert("当前浏览器不支持位置信息");}if(!window.localStorage){alert("当前浏览器不支持本地存储Storage");}cache = window.applicationCache; //返回应用于当前window对象文档的ApplicationCache对象 //ache = self.applicationCache; //返回应用于当前shared worker的ApplicationCache对象 [shared worker] //cache.status //返回当前应用的缓存状态，status有五种无符号短整型值的状态： cache.update(); //调用当前应用资源下载过程 cache.swapCache(); //更新到最新的缓存，这个不会使得之前加载的资源突然被重新加载。图片不会重新加载，样式和脚本也不会重新渲染或解析，唯一的变化是在此之后发出请求页面的资源是最新的 }$("#switchButton").toggle(function(){$("img:first").attr("src","/test/images/2.jpg");},function(){$("img:first").attr("src","/test/images/1.jpg");});});//--------ready结束?更新时applicationCache提供两个更新方法 update()/swapCache()//调用当前应用资源下载过程cache.update();??//更新到最新的缓存，这个不会使得之前加载的资源突然被重新加载。图片不会重新加载，样式和?//本也不会重新渲染或解析，唯一的变化是在此之后发出请求页面的资源是最新的?cache.swapCache();?