HTML5 离线缓存 applicationCache 通过iframe直接缓存远程服务器文件。解决hybrid应用的更新

通过几天的研究HMTL5的离线缓存，网上资料查了很多，翻书也看了，折腾来折腾去终于搞定。下面是我的理解，希望对新手有帮忙。

一、什么是Cache Manifest

　　话说，作为一个 web 开发相关的人员，都不会少听到、看到 cache 这个词。是的，上面也已经说了，它是一种缓存的机制。它可以通过一个 .manifest 文件来配置需要缓存的或者一定要保持联网缓存的文件。而重点就是这个 .manifest 文件，具体的可以 Google 一下，而简单的我帮你整理一下现在可能会希望了解的东西：

服务器需要支持 MIME TYPE：text/cache-manifest

需要由你创建的：NAME.manifest

二、创建test.manifest 文件

CACHE MANIFEST
#version 5.0
#直接缓存的文件
CACHE:
#绝对路径和相对路径都可以
js/initial.js
js/keyevent.js
js/uianimate.js
js/jquery.min.js
loading.gif
# 需要在线访问的文件 *是通配符，表示不在缓存里面的文件都需要在线访问
NETWORK:
*
# 替代方案一个是在线访问的页面一个不在线访问的页面
FALLBACK
online.html off.html

相关事件

<script>
//手动更新 window.applicationCache.update();
applicationCache.onchecking = function(){
//检查manifest文件是否存在
}
applicationCache.ondownloading = function(){
//检查到有manifest或者manifest文件
//已更新就执行下载操作
//即使需要缓存的文件在请求时服务器已经返回过了
}
applicationCache.onnoupdate = function(e){
//返回304表示没有更新，通知浏览器直接使用本地文件	
}
applicationCache.onprogress = function(){
//下载的时候周期性的触发，可以通过它
//获取已经下载的文件个数
}
applicationCache.oncached = function(){
//下载结束后触发，表示缓存成功
}
applicationCache.onupdateready = function(){
//第二次载入，如果manifest被更新
//在下载结束时候触发
//不触发onchched
alert("本地缓存正在更新中。。。");
if(confirm("是否重新载入已更新文件")){
applicationCache.swapCache();// 得到最新版本缓存列表，并且成功下载资源，更新缓存到最新 
location.reload();
}
}
//清单 5 手动更新缓存
//if (window.applicationCache.status == window.applicationCache.UPDATEREADY) ｛ window.applicationCache.update(); ｝
applicationCache.onobsolete = function(){
//未找到文件，返回404或者401时候触发
}
applicationCache.onerror = function(){
//其他和离线存储有关的错误
}
</script>

三、好吧前面扯了一些有用没用的现在说说运用场景移动开发 hybrid模式开发的时候应用需要请求远程资源需要登录把资源缓存起来下次

　　方便下次进入应该可以不用请求服务器代码，有更新的时候可以应用上面的相关API 方法也可以让应用写API在两个页面之间传值。

loading.html 简称加载页面简单的一个iframe 这个地方也可以做用户登录

<!DOCTYPE html>
<html>  
<head>  
    <title>loading</title>  
</head>  
<body>  
  <iframe id="iframeId" src="http://xx.xx.xxx.xxx/zhongjian.html" style="display: none;"></iframe>
</body>  
 
</script>  
</html>

　　zhongjian.html 中间页面启动应用iframe 会请求这个页面把资源下载下来下载完成可以告诉 loading页面可以跳转到index.html页面了

<html id="html" manifest='test.manifest'>  
<head>  
    <title>zhongjian</title>  
</head>  
<body>  
       
</body>  
<script type="text/javascript">  
  可以加入事件判断跳转到index.html页面
</script>  
</html>

　　index.html 首页，由于中间页面以及做过一次离线缓存了，到了首页再去判断一次 manifest文件是为了更新远程页面的时候进入index.html 都是最新的代码

<html id="html" manifest='test.manifest'>  
<head>  
    <title>index</title>  
</head>  
<body>  
       xxxxxx网站内容
</body>  
<script type="text/javascript">  
  可以加入事件判断跳转到index.html页面
</script>  
</html>

　　总结：

　　　　缓存第一次下来代码肯定是最新，但是有更新会去检测更新资源，但是需要浏览器刷新，才能获取到最新的代码，中间的页面就是为了进入首页

是保证获取到的资源是最新的。PS：这个技术用的其实很郁闷老是在更新版本的时候出现莫名其妙的错误，如果有朋友这样用过请来交流下，如果没看明白的情留言给我~~~