首页 > 代码库 > html5离线应用详摘
html5离线应用详摘
html5离线应用详摘
在html文件里配置如下：
<html manifest=”name.manifest”>
在name.manifest文件里配置如下：
CACHE MANIFEST
#2014-07-27 v1.0
index.html
index.css
index.js
images/self.jpg
NETWORK
*
①CACHE MANIFEST全部大写。
②“#”开头的行是注释。
③缓存文件路径对应明确。
④文件后缀名可随便起，推荐使用.manifest或者.appcache。不过最重要的取决于web服务器的配置，让它能认识这两个扩展名。如果不是自己的服务器，得问主机托管公司配置了什么扩展名来支持描述文件。不同的服务器配置MIME的类型方法不一样，以下我用模拟服务器软件wampserver，在Apache->httpd.conf下写入的字段如下：AddType text/cache-manifest .manifest（放在哪里都可以，建议放在相同类型字段处） 。
⑤不同的浏览器对离线应用缓存的限制有很大不同，移动端ipad和iphone中的Safari限制的5MB；桌面端，Firefox默认最大50MB，而用户可调高这个限制（选项->高级->网络）；chrome目前只有5MB，如果缓存达到空间限制，已经下载要缓存的文件会被完全删除，离线相当于白做。
⑥必须给离线应用包含的每个页面都添加同样的属性，比如说：缓存中包含index.html、self.html，那么这两个文件都要添加<html manifest=”name.manifest”>，当然，离线应用可以有任意多个，每个应用分别对应自己的描述文件即可。
⑦更新缓存内容，只要更改name.manifest文件下的任何地方（包括注释），name.manifest文件就变成新的文件，浏览器发现新的描述文件会静默地下载里面配置的所有文件，然后再用新下载的文件代替原来缓存的内容，下次用户访问同一个页面（或者刷新该页面），就会显示新内容，如果想让用户马上切换到新下载的内容，需要用到javascript，请转到⑩。
⑧NETWORK最好不要省略，“ * ”表示所有未缓存的内容，当然，也可以一个一个罗列不想要被缓存的内容。列表中不能使用“ * ”，因为html5规范制定者担心有人会无意中缓存庞大的站点。
⑨FALLBACK表示根据计算机是否在线而互换，“FALLBACK”区块可以在描述文件中的任何地方出现，第一个文件是在联网时访问的页面（浏览器会照常向web服务器请求该文件）；第二个文件是在不能上网时访问的页面（浏览器会在上次联网时自动把该文件下载并缓存起来）；当然“ FALLBACK: ”也可省略。“ FALLBACK: ”下可使用通配符“ / ”。比如：
FALLBACK:
/ offline.html
目前在Firefox中通配符还可以用“ * ”，还可以通过指定子目录来匹配更小范围内的文件：
FALLBACK:
http://www.wei.com/folder/* offline.html
也可以指定只匹配某些类型的文件：
FALLBACK:
*.jpg offline.jpg
⑩使用相对有限的javascript接口可以与离线应用功能交互，这个javascript接口由applicationCache对象定义。在此例举onupdateready事件（表示已经取得了更新内容） 。通过javascript指定更新：
<script>
window.onload=function(){
applicationCache.onupdateready=function(){
if(confirm(“一个新版本的离线缓存已经更新完成，是否刷新以查看最新效果”)){
window.location.reload();
}
};
};
</script>
注：可以模拟confirm显示一个更友好美观的用户界面。
幕尾话：本文采摘自采摘者的左思右想+html5秘籍（原名：[html5：The Missing Manual]）——美Matthew MacDonald 著，李松峰 朱巍 译，人民邮电出版-2012年8月
------------------------------- 非常华丽的分割线 ----------------------------
...没有了 (≧▽≦)/...
html5离线应用详摘