HTML5 离线缓存 applicationCache 通过iframe直接缓存远程服务器文件。
通过几天的研究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
bg.jpg
jquery-mini-1.8.2.js
# 需要在时间在线的文件*号代表除了上面缓存文件都是在线访问
NETWORK:
*
# 替代方案
FALLBACK
online.html off.html
三、给 index.hmtl <html> 标签加 manifest 属性：
<html manifest=" test.manifest ">
index.hmtl 页面可以写一些事件
//手动更新 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(){
//其他和离线存储有关的错误
}
四、出现的问题
按照上面的方法可以缓存，但是这个情况是test.manifest文件和需要缓存的文件在同一项目下面。
现在出现的问题是我访问本地文件就缓存index.html 相关的文件。
本地文件loading.html 并且本地没有 test.manifest
当时我就想在loading.html 页面设置如下：
<html manifest=" http://....../ test.manifest "> 这样缓存不了
五、怎么解决本地文件去动态缓存服务器文件
在loading.html 页面加上iframe 标签 SRC 指向的是服务器文件 Cache.html
<html id="html" manifest='test.manifest'>
<head>
<title>loading</title>
</head>
<body>
</body>
<script type="text/javascript">
var url=location.href.split("mac=");
url=url[1].split("&");
var mac=url[0];
var user=url[1].split("user=")[0];
applicationCache.onupdateready = function(){
//第二次载入，如果manifest被更新 http://172.249.0.89:8081/ftp/sangsang/
//在下载结束时候触发
//不触发onchched
alert("本地缓存正在更新中。。。");
if(confirm("是否重新载入已更新文件")){
applicationCache.swapCache();// 得到最新版本缓存列表，并且成功下载资源，更新缓存到最新
location.reload();
}
localStorage.setItem("mac", mac);
localStorage.setItem("user" , user);
}
</script>
</html>
这样就可以缓存动态页面了，写着写着 就觉得说不清楚了，如果有什么不知道的可以加我QQ 463968565 答案：是