离线应用Application Cache API
离线应用（Offline Web applications）将网页资源缓存到本地，可以减少对服务器的请求，并且可以在断线的情况下浏览网页。 (离线图片是用 base64图片)
1.创建.manifest 文件
在指定资源文件的时候，可以把资源文件分为三类，分别是CACHE、NETWORK、FALLBACK.
1)在CACHE类别中指定需要被缓存在本地的资源文件。为某个页面指定需要在本地缓存的资源文件时，不需要把这个页面本身指定在CACHE类别中，因为如果一个页面具有manifest文件，浏览器会自对这个页面进行本地缓存。
2）NETWORK类别为显示指定不进行本地缓存的资源文件，这些资源文件只有当客户端与服务器端建立连接的时候才能访问。本示例该类别中的“*”为通配符，表示没有在本manifest文件中指定的资源文件都不进行本地缓存。
3）FALLBACK类别中每行中指定两个资源文件，每一个资源文件为能够在线访问时使用的资源文件，第二个资源文件为不能在线访问时使用的备用资源文件。
2.HTML标签的manifest属性中指定manifest文件的URL地址
<html manifest="test.manifest">
…
</html><html manifest="xiaocai.name/global.manifest">
…</html>
<html manifest="xiaocai.name/manifest.php">
…</html>
3.如何更新缓存
当要对本地缓存区的内容进行修改时，只要修改manifest文件就可以了。文件修改后，浏览器可以自动检查manifest文件，并自动更新本地缓存区中的内容。
ps: 说是只要修改manifest文件就可以了，但实际上不会那么实时，尤其是.css .js 文件，这里我是将manifest文件用php文件代替来达到实时显示的效果.
4. manifest 存在的问题
自动缓存引用了manifest文件的页面( 引用了manifest文件的页面都会被缓存 )
即使在 NETWORK 中指定 "*"（所有的页面都）使用网络，还是不能解决它自动缓存当前页面。这使得这个页面在 manifest 没有变更的情况下，会一直以"类静态"存在。比如，你后台更新了一篇文章，这个动态的首页，还是像第一次缓存的时候一样，没有变。这对于静态页面还好，但应用在一个动态系统就很麻烦了，因为你的内容是时时要更新的。
解决方法：
1 如果只想缓存部分文件可以用iframe来引入一个拥有manifest的静态文件
2.如果只想在离线的情况下使用cache那么可以用php代替manifest文件，# time <?php echo time(); ?>
Firefox弹出提示信息
可能是习惯了弹窗警告之类的，一不小心，用户还以为是网站被人挂马呢，想把不干净的东西存储到他的电脑。
demo3.html
<!DOCTYPE html>
<html manifest="https://xiaocaiblog.sinaapp.com/demo/html5/demo3/manifest.php">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Application Cache API</title>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="demo3.js"></script>
</head>
<body>
<h1>HTML5 manifest </h1>
<p>The time is: <output id="clock"></output></p>
<pre id="result">
99+1+1
</pre>
<script type="text/javascript">
</script>
</body>
</html>
manifest.php
<?php header("Content-type: text/cache-manifest; charset=utf-8"); ?>
CACHE MANIFEST
# version 99
# time <?php echo time(); ?>
# 在CACHE类别中指定需要被缓存在本地的资源文件
CACHE:
demo3.html
jquery-1.4.4.min.js
demo3.js
#NETWORK类别为显示指定不进行本地缓存的资源文件
NETWORK:
#FALLBACK类别中每行中指定两个资源文件
FALLBACK:
demo3.js
//a
setTimeout(function () {
document.getElementById('clock').value = new Date();
}, 1000);
结果:
