HTML5 离线缓存 applicationCache 通过iframe直接缓存远程服务器文件。 -

li463968565

浏览: 1994 次
性别:
来自: 广州

最近访客更多访客>>

solomon54321

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

HTML5 离线缓存 applicationCache 通过iframe直接缓存远程服务器文件。

博客分类：

HTML5

通过几天的研究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 属性：

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 答案：是

分享到：