html5离线储存,application cache,manifest使用体验
一、应用场景
我们通常使用浏览器缓存在用户磁盘上存储web单页，在用户再次浏览的时候已节省带宽，但即便这样，依然无法在没有Internet的情况下访问Web。为了让web应用程序在离线状态也能被访问。html5通过application cache API提供离线存储功能。前提是你需要访问的web页面至少被在线访问过一次。
离线本地存储和传统的浏览器缓存有什么不同呢？
1、浏览器缓存主要包含两类：
a.缓存协商：Last-modified,Etag
浏览器向服务器询问页面是否被修改过，如果没有修改就返回304，浏览器直接浏览本地缓存文件。否则服务器返回新内容。
b.彻底缓存：cache-control,Expires
通过Expires设置缓存失效时间，在失效之前不需要再跟服务器请求交互。
2、离线存储为整个web提供服务，浏览器缓存只缓存单个页面；
3、离线存储可以指定需要缓存的文件和哪些文件只能在线浏览，浏览器缓存无法指定；
4、离线存储可以动态通知用户进行更新。
二、如何实现
离线存储是通过manifest文件来管理的，需要服务器端的支持，不同的服务器开启支持的方式也是不同的。
CACHE MANIFEST//必须以这个开头
version 1.0 //最好定义版本，更新的时候只需修改版本号
CACHE:
m.png
test.js
test.css
NETWORK:
*
FALLBACK
online.html offline.html
CACHE指定需要缓存的文件；NETWORK指定只有通过联网才能浏览的文件，*代表除了在CACHE中的文件；FALLBACK每行分别指定在线和离线时使用的文件
要让manifest管理存储，还需要在html标签中定义manifest属性，如下：
<!DOCTYPE HTML>
<html lang="en" manifest='test.manifest'>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
最后别忘了，这些应用需要服务器支持。
Apache服务器开启支持的方式是：在conf/mime.types中添加一段代码：
test/cache-manifest manifest
IIS服务器开启方式：
右键--HTTP---MIME映射下，单击文件类型---新建---扩展名输入manifest，类型中输入test/cache-manifest
三、通过JS动态控制更新
applicationCache对象提供个了一些方法和事件，管理离线存储的交互过程。通过在firefox8.0的控制台中输入window.applicationCache可以看到这个对象的所
有属性和事件方法。
applicationCache.onchecking = function(){
//检查manifest文件是否存在
}
applicationCache.ondownloading = function(){
//检查到有manifest或者manifest文件
//已更新就执行下载操作
//即使需要缓存的文件在请求时服务器已经返回过了
}
applicationCache.onnoupdate = function(){
//返回304表示没有更新，通知浏览器直接使用本地文件
}
applicationCache.onprogress = function(){
//下载的时候周期性的触发，可以通过它
//获取已经下载的文件个数
}
applicationCache.oncached = function(){
//下载结束后触发，表示缓存成功
}
application.onupdateready = function(){
//第二次载入，如果manifest被更新
//在下载结束时候触发
//不触发onchched
alert("本地缓存正在更新中。。。");
if(confirm("是否重新载入已更新文件")){
applicationCache.swapCache();
location.reload();
}
}
applicationCache.onobsolete = function(){
//未找到文件，返回404或者401时候触发
}
applicationCache.onerror = function(){
//其他和离线存储有关的错误
}
四、浏览器与服务器的交互
曾经有面试题是这样的："描述在浏览器的地址栏中输入:http://www.baidu.com 后发生了什么？"。
1、服务端返回baidu页面资源，浏览器载入html
2、浏览器开始解析
3、发现link，发送请求载入css文件
4、浏览器渲染页面
5、发现图片，发送请求载入图片，并重新渲染
6、发送请求js文件，阻塞渲染。如果js对dom进行了操作，则会进行rerender
对于支持离线存储的页面，浏览器和服务器的交互又是如何呢？
首次载入页面：
1-6 ： 同上
7：请求页面中需要缓存的页面和数据，就算在之前的步骤中已经请求过（这是个耗能的地方）
8：服务器返回所有请求文件，浏览器进行本地存储
再次载入页面：
1：发送请求
2：使用本地存储的离线文件
3：解析页面
4：请求服务端的manifest文件，判断是否有改变，返回304则表示没有改变进入步骤5，否则进入步骤6（jaykon:这里是不是错了？304时会进入6才对）
5：进入首次载入页面的7-8（jaykon:这里注意，就算此次请求manifest文件更新了，也只是在页面宣染完成后重新下载里面路径的文件，这些新文件要在下一次访问时才会体现出来，比如再次刷新时。）
6：使用本地存储，不重新请求
