html5离线应用application cache的代码详解-木庄网络博客

本文摘自PHP中文网，作者黄舟，侵删。

一、应用场景

我们通常使用浏览器缓存在用户磁盘上存储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属性，如下：

<span style="color: #0000ff;"><!<span style="color: #ff00ff;">DOCTYPE HTML<span style="color: #0000ff;">> <span style="color: #0000ff;"><<span style="color: #800000;">html <span style="color: #ff0000;"><a href="http://www.php.cn/java/java-ymp-Lang.html" target="_blank">lang</a><span style="color: #0000ff;">="en"<span style="color: #ff0000;"> manifest<span style="color: #0000ff;">='test.manifest'<span style="color: #0000ff;">> <span style="color: #0000ff;"><<span style="color: #800000;"><a href="http://www.php.cn/html/html-HEAD-2.html" target="_blank">head</a><span style="color: #0000ff;">> <span style="color: #0000ff;"><<span style="color: #800000;">meta <span style="color: #ff0000;">char<a href="http://www.php.cn/code/8209.html" target="_blank">set</a><span style="color: #0000ff;">="UTF-8"<span style="color: #0000ff;">> <span style="color: #0000ff;"><<span style="color: #800000;">title<span style="color: #0000ff;">></<span style="color: #800000;">title<span style="color: #0000ff;">> <span style="color: #0000ff;"></<span style="color: #800000;">head<span style="color: #0000ff;">> <span style="color: #0000ff;"><<span style="color: #800000;">body<span style="color: #0000ff;">> <span style="color: #0000ff;"></<span style="color: #800000;">body<span style="color: #0000ff;">> <span style="color: #0000ff;"></<span style="color: #800000;">html<span style="color: #0000ff;">>

最后别忘了，这些应用需要服务器支持。

Apache服务器开启支持的方式是：在conf/mime.types中添加一段代码：

1	`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(){
   //其他和离线存储有关的错误
}