文档章节

HTML5中的离线应用程序

梦前端
 梦前端
发布于 2016/05/18 13:02
字数 648
阅读 13
收藏 0

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

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>

 

© 著作权归作者所有

梦前端
粉丝 0
博文 14
码字总数 7624
作品 0
马鞍山
程序员
私信 提问
关于HTML5应用现状与前景的思考

现在的 HTML5 就像当年崭露头角时的 Ajax,有人在做,但不知道叫它什么。最近,苹果在 HTML5 上大做文章,而著名的 Web 设计师 Eric Meyer 则提出了 Web Stacks 的概念。Alex Kessinger 是 ...

红薯
2010/06/20
754
1
使用 HTML 5 创建 Flex 的离线应用程序

本文转自 IBM developerWorks 简介: 目前 HTML 5 技术大兴其道,很多厂商都开始围绕着 HTML 5 技术在开发下一代 Web 应用。难道 HTML 5 真的会终结当前同样火热的 RIA 技术吗? 事实上二者完...

IBMdW
2011/06/11
722
0
[IBM DW] 使用 HTML5 开发离线应用

简介: Web2.0 技术鼓励个人的参与,每个人都是 Web 内容的撰写者。如果 Web 应用能够提供离线的功能,让用户在没有网络的地方(例如飞机上)和时候(网络坏了),也能进行内容撰写,等到有网...

红薯
2010/11/28
735
2
我们应该干掉 LocalStorage API

LocalStorage API 是一个失败的功能。作为浏览器的开发商和开发者,我们应该停止为这个功能创建样例。它不是一个可扩展的API,我们使用它越多,将来对我们的束缚就越大。 LocalStorage 的查询...

虫虫
2012/02/29
4.2K
8
华丽丽的HTML5新特性

Web2.0带来的丰富互联网技术让所有人都享受到了技术发展和体验进步的乐趣。作为下一代互联网标准,HTML5自然也是备受期待和瞩目,技 术人员、设计者、互联网爱好者们都在热议HTML5究竟能带来...

小编辑
2011/07/13
1K
1

没有更多内容

加载失败,请刷新页面

加载更多

64.监控平台介绍 安装zabbix 忘记admin密码

19.1 Linux监控平台介绍 19.2 zabbix监控介绍 19.3/19.4/19.6 安装zabbix 19.5 忘记Admin密码如何做 19.1 Linux监控平台介绍: 常见开源监控软件 ~1.cacti、nagios、zabbix、smokeping、ope...

oschina130111
今天
13
0
当餐饮遇上大数据,嗯真香!

之前去开了一场会,主题是「餐饮领袖新零售峰会」。认真听完了餐饮前辈和新秀们的分享,觉得获益匪浅,把脑子里的核心纪要整理了一下,今天和大家做一个简单的分享,欢迎感兴趣的小伙伴一起交...

数澜科技
今天
7
0
DNS-over-HTTPS 的下一代是 DNS ON BLOCKCHAIN

本文作者:PETER LAI ,是 Diode 的区块链工程师。在进入软件开发领域之前,他主要是在做工商管理相关工作。Peter Lai 也是一位活跃的开源贡献者。目前,他正在与 Diode 团队一起开发基于区块...

红薯
今天
12
0
CC攻击带来的危害我们该如何防御?

随着网络的发展带给我们很多的便利,但是同时也带给我们一些网站安全问题,网络攻击就是常见的网站安全问题。其中作为站长最常见的就是CC攻击,CC攻击是网络攻击方式的一种,是一种比较常见的...

云漫网络Ruan
今天
12
0
实验分析性专业硕士提纲撰写要点

为什么您需要研究论文的提纲? 首先当您进行研究时,您需要聚集许多信息和想法,研究论文提纲可以较好地组织你的想法, 了解您研究资料的流畅度和程度。确保你写作时不会错过任何重要资料以此...

论文辅导员
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部