网站建设
网站备案流程
本机IIS服务器的创建
Win7下配置本机IIS服务器
建网站需要学习的内容
使用表格布局网页
定义网页头文件元素
制作弹出网页
制作网页宣传窗
Div+CSS布局网页
CSS的常见选择器
CSS设置文本样式
CSS设置背景颜色与图像
CSS设置表格样式
HTML中使用CSS的方法
CSS3新增的部分属性1
CSS3新增的部分属性2
CSS3动画与渐变
网页显示MySQL数据库中汉字的乱码问题
HTML5的新特性
HTML5的API
HTML5音视频API
HTML5表单
HTML5表单API
HTML5画布canvas
HTML5拖放API
HTML5地理位置API
HTML5离线应用API
HTML5 Workers多线程
HTML5跨源通信
HTML5 WebSocket通信
HTML5的Web存储API
HTML5本地数据库
HTML5其他一些API
Node.js功能和使用
常用Web前端工具
WebGL编程
GLSL ES语言
使用ThreeJs库3D编程
XML可扩展标记语言
传统的Web应用在网络不好时就无法使用网上提供的应用程序，HTML5借鉴桌面应用程序的特征，引入了离线应用缓存。Web应用程序提前把与应用程序相关的资源文件缓存到本地，当断开网络或网络环境不好时，用户仍然可以继续浏览未浏览完成的内容。
离线应用缓存需要以一种方式来指明应用程序离线时所需要的资源文件，这样，浏览器才能在在线状态时，把这些资源文件缓存到本地。此后，当用户离线访问应用程序时，这些资源文件会自动加载。HTML5可通过一个缓存清单的文件manifest指明需要缓存的资源，并且支持自动和手动两种缓存更新方式。
此外，HTML5还提供了在线状态检测，应用程序需要检测网络是否通畅，这样才能针对在线和离线状态做出相应的处理。
1.缓存清单文件：
为了使用户能够在离线状态下使用Web应用程序，需要开发者在服务器端提供一个缓存清单manifest文件。此清单中，列出了离线应用程序需要的所有资源文件。访问服务器时，浏览器会把这些资源文件缓存到本地。
1)manifest文件的格式：
示例：
CACHE MANIFEST
#version1.1
CACHE:
css/style.css
script.js
NETWORK:
images/picture.jpg
*
FALLBACK:
css/style2.css css/style.css
CACHE:
other.html
浏览器会在本地缓存manifest文件列出的资源文件。manifest文件说明：
·文件内容的第一行必须是“CACHE MANIFEST”，用于把文件的作用告诉浏览器
·文件的注释需要另起一行，以#开头
·最好为manifest文件加一个版本注释，提醒浏览器更新缓存文件
·对于指定的缓存文件，可以是绝对路径，也可以是相对路径
·文件中的关键字CACHE、NETWORK、FALLBACK用于资源分类
·CACHE类别中指定文件是要被缓存到本地的资源文件
·NETWORK类别指定的文件是不会缓存到本地的资源文件，只有在网络通畅情况下才能被访问
·FALLBACK类别中，每行指定两个资源文件。第一个资源文件为能够在线访问时使用，第二个文件是不能在线访问时使用
·三个类别中，每个类别都是可选的。如果manifest文件没有指定任何类别就列出资源文件，那么就是CACHE类别的资源文件
2)使用manifest文件的方法：
页面元素html添加属性manifest，用于指定manifest缓存清单文件，浏览器可通过该清单文件缓存Web应用程序所需要的资源文件。使用方法：
<!DOCTYPE html>
<html manifest="cache.manifest">
......
</html>
Manifest属性指定了一个缓存清单文件cache.manifest，浏览器通过识别该清单文件的第一行来确定文件的类型是否为用于离线应用缓存的清单文件。
指定了manifest缓存清单文件的页面，不需要再列入manifest文件中，浏览器会默认对该页面进行缓存。
3)服务器端的配置：
Manifest文件的MIME类型是text/cache-manifest，在使用前要确保服务器能够支持该文件。为此，需要在服务器端进行配置。
⑴IIS服务器中的配置：
右键单击需要添加类型的网站，弹出对话框；选择“HTTP头”标签；在MIME映射下，单击“文件类型”按钮，弹出MIME对话框；在关联扩展名的文本框中输入“manifest”，在内容类型文本框中输入“text/cache-manifest”，然后单击确定按钮。
⑵Apache服务器的配置：
找到{apache_home}/conf/mime.types文件，并在文件中添加如下的一行代码：
text/cache-manifest manifest
⑶Tomcat服务器的配置：
找到{tamcat_home}/conf/webxml文件，并在文件中添加如下配置节：
<mime-mapping>
<extension>manifest</extension>
<mime-type>text/cache-manifest</mime-type>
</mime-mapping>
⑷Python标准库的SimpleHTTPServer的配置方法是：
找到{PATHON_HOME}/Lib/mimetypes.py文件，并在文件中添加如下一行代码：
'.manifest':'text/cache-manifest manifest',
有了服务器支持，才能使用离线应用缓存的功能。
2.检测浏览器的网络状态：
离线的Web应用程序在离线状态和在线状态下，有不同的行为模式。HTML5引入了一些新事件，用于检测网络能否正常连接。通常使用window.navigator对象的onLine属性来检测。
window.navigator对象的onLine属性是一个标明了浏览器是否处于在线状态的布尔值。当onLine属性值为false时，Web应用程序不会尝试进行网络连接；当属性值为true时，会尝试进行网络连接，但不一定确保访问到相应的服务器。示例：
function testingNetwork() {
if (window.navigator.onLine) {
console.log("在线状态");
} else {
console.log("离线状态");
}
}
window.addEventListener("online", function(e){
console.log("在线状态");
},true);
window.addEventListener("offline", function(e){
console.log("离线状态");
},true);
上面代码中，有两种检测网络状态的方法：一种是通过判断window.navigator.onLine属性，另一种是通过添加事件监听器来监听网络的状态。
3.应用缓存接口applicationCache：
HTML5提供了一系列操作应用缓存的接口，包含在新增的window.applicationCache对象中，可触发一系列与缓存相关的事件。
1)检测浏览器支持情况：
使用Web的离线应用，最好先检查浏览器是否支持，防止不必要的错误发生。示例：
if (window.applicationCache) {
console.log("浏览器支持离线应用");
} else {
console.log("浏览器不支持离线应用");
}
2)applicationCache接口：
离线应用缓存的接口包括基本的属性、方法和事件，并且定义了离线应用的6种状态。
interface ApplicationCache {
const unsigned short UNCACHED=0;
const unsigned short IDLE=1;
const unsigned short CHECKING=2;
const unsigned short DOWNLOADING=3;
const unsigned short UPDATEREADY=4;
const unsigned short OBSOLETE=5;
readonly attribute unsigned short status;
void update();
void swapCache();
attribute Function onchecking;
attribute Function onerror;
attribute Function onnoupdate;
attribute Function ondownloading;
attribute Function onprogress;
attribute Function onupdateready;
attribute Function oncached;
attribute Function onobsolete;
};
ApplicationCache implements EventTarget;
3)applicationCache的属性：
应用缓存接口有一个状态属性status，表示应用缓存的状态，并且该缓存是只读的。HTML5为该状态定义了6个数字常量，见下表：
| 缓存状态 | 数值 |
说明 |
UNCACHED |
0 |
未缓存 |
IDLE |
1 |
空闲 |
CHECKING |
2 |
检查中 |
DOWNLOADING |
3 |
下载中 |
UPDATEREADY |
4 |
更新就绪 |
OBSOLETE |
5 |
过期 |
一般网页都没有使用离线应用的功能，这些网页的应用状态就是未缓存状态UNCACHED。空闲IDLE是离线应用的典型状态，说明应用程序所需要的所有资源文件都已经被缓存到本地，不需要再更新。如果曾经有应用缓存，却发现manifest文件丢失，则缓存会进入过期状态OBSOLETE。
4)applicationCache的方法：
applicationCache应用缓存接口包含两个方法：update()和swapCache()。
·update()方法：用于请求浏览器更新缓存。当方法被调用时，浏览器会检测manifest清单文件，如果有更新，就会重新下载缓存的资源文件。该方法执行完成后，应用缓存状态变为UPDATEREADY，同时触发updateready事件。
·swapCache()方法：用于手工执行本地缓存的更新。只能在applicationCache的updateready事件被触发时调用。而updateready事件只有在服务器端的manifest文件被更新，且把文件内的所有资源文件下载到本地后触发，而这一过程是update()方法所经历的。swapCache()方法只是让本地的应用缓存能够即时更新，而不是等到下一次刷新页面时更新。
5)applicationCache事件：
HTML5为应用缓存提供了8个事件用于编程开发，见下表：
| 事件 | 说明 |
checking |
检测应用缓存时触发，这始终是整个应用缓存过程中的第一个事件 |
error |
发生任何错误时触发 |
noupdate |
缓存的资源文件清单没有改变时触发 |
downloading |
浏览器发现更新并获取时，或者下载清单中第1次列入的资源时触发 |
progress |
浏览器正在下载资源文件时触发 |
updateready |
清单列表中所有资源文件都更新完成时触发 |
cached |
清单列表中所有资源文件都下载完成时触发 |
obsolete |
找不到应用缓存清单manifest文件时触发 |
4.示例：图片画廊的离线应用
1）网页HTML代码：
网页中以列表形式添加15张图片，使用离线应用缓存功能。
<!DOCTYPE html>
<html manifest="application.manifest">
<head>
<meta charset="utf-8">
<title>图片画廊</title>
<link rel="stylesheet" href="application.css">
<script src="application.js"></script>
</head>
<body>
<div><input type="button" id="update" value="更新应用缓存' /></div>
<ul id=”gallery”>
<li><a href="#" title="图片1" ><img src="images/image1.jpg" atl="图片1" /></a></li>
<li><a href="#" title="图片2" ><img src="images/image2.jpg" atl="图片2" /></a></li>
<li><a href="#" title="图片3" ><img src="images/image3.jpg" atl="图片3" /></a></li>
......
<li><a href="#" title="图片15" ><img src="images/image15.jpg" atl="图片15" /></a></li>
</ul>
</body>
</html>
2）application.manifest文件：
CACHE MANIFEST
#version1.0
CACHE:
images/image1.jpg
images/image2.jpg
images/image3.jpg
......
images/image15.jpg
images/bark.jpg
这样，当用户浏览该页面时，页面会首先检查是否需要更新资源文件，如果manifest文件没有发生任何变化，则不会再从服务器上下载网页内容。如果manifest文件发送过改变，则重新下载离线资源文件以更新本地应用缓存。
3）手动更新应用缓存的脚本：
function updateCache() {
window.applicationCache.update();
window.applicationCache.onupdateready=function() {
console.log("本地应用缓存已经更新");
if (confirm("本地应用缓存已经更新，是否刷新页面获取最新版本？")) {
window.applicationCache.swapCache();
window.location.reload();
}
}
}
window.onload=function(e) {
if (window.applicationCache) {
document.getElementById("update").onclick=UpdateCache;
} else {
document.getElementById("update").onclick=function() {
alert("浏览器不支持离线应用缓存");
};
}
}