HTML5中的离线应用程序

最新推荐文章于 2024-07-19 10:24:06 发布

chenzhong5173

最新推荐文章于 2024-07-19 10:24:06 发布

阅读量123

点赞数

原文链接：https://my.oschina.net/dreamchenming/blog/677127

版权

一.本地缓存与浏览器网页缓存的区别

1.本地缓存：本地缓存是指定的网页缓存，可靠的，可以控制缓存的内容。

2.浏览器网页缓存：浏览器网页缓存指的是服务于单个网页缓存，不安全，不可靠。

二.manifest文件的操作步骤

1.写manifest文件(hello.manifest)

CACHE MANIFEST

#version:1.2

CACHE:

缓存的文件类型

NETWORK:

访问的网站

2.给服务器进行配置

在apache服务器上找到“apache/conf/mime.types”这个文件，接着在文件中的末尾填写这一段代码：

text/cache-manifest manifest

3.在web页面的html标签中写上manifest文件的地址

//可以给整个页面添加manifest文件
<html manifest="hello.manifest"></html>
//也可以给单独页面添加manifest文件
<html manifest="hello.manifest">
....
</html>

三.applicationCache对象

applicationCache对象代表了本地缓存，可以用它来通知用户本地缓存中已经被更新，也允许用户手动更新缓存。当浏览器本地更新之后，装入新的文件时会触发applicationCache对象的updateready事件，通知本地缓存已更新，用户得知可以手动刷新页面。

applicationCache.onUpdateReady = function(){
   //本地缓存已经被更新
    alert("本地缓存已经被更新，您可以刷新页面来得到本地程序的最新版本");
};

四.applicationCache对象的事件

事件触发步骤：

①浏览器访问某页面(www.hao123.com)

②服务器返回1.html

③浏览器发现网页具有manifest属性，触发checking事件，检查manifest是否存在，不存在报错，触发error事件，存在就执行第6步

④浏览器解析1.html网页，请求页面上所有的资源文件，

⑤服务器返回资源的文件

⑥浏览器处理manifest文件，并继续请求页面上的所有资源

⑦服务器返回要求缓存本地的文件

⑧浏览器触发downloding事件，下载资源，在下载的同时触发progress事件

⑨下载结束后触发cached事件，表示首次缓存成功，存入所有所要求的文件

CACHE MANIFEST
#version 1.23
CACHE:
1.html
NETWORK:
http://127.0.0.1/b/1.html

-------------------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html  manifest="hello.manifest">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>离线应用程序</title>
<script>
window.onload = function(){
	applicationCache.addEventListener('checking',function(){
		document.body.innerHTML += "checking";
	},true);
	applicationCache.addEventListener("downloading",function(){
		document.body.innerHTML += "downloading";
	},true);
	applicationCache.addEventListener("progress",function(){
		document.body.innerHTML += "progress";
	},true);
	applicationCache.addEventListener("cached",function(){
		document.body.innerHTML += "cached";
	},true);
	applicationCache.addEventListener("noupdate",function(){
		document.body.innerHTML += "noupdate";
	},true);
	applicationCache.addEventListener("error",function(){
		document.body.innerHTML += "error";
	},true);
};
</script>
</head>

<body>
我在测试离线应用程序的应用！
</body>
</html>

转载于:https://my.oschina.net/dreamchenming/blog/677127

chenzhong5173

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5中的离线应用程序

一.本地缓存与浏览器网页缓存的区别 1.本地缓存：本地缓存是指定的网页缓存，可靠的，可以控制缓存的内容。 2.浏览器网页缓存：浏览器网页缓存指的是服务于单个网页缓存，不安全，不可靠。二.manifest文件的操作步骤 1.写manifest文件(hello.manifest) ...
复制链接

扫一扫