浅谈HTML5离线缓存（Application Cache）

什么是应用程序缓存（Application Cache）？

HTML5离线缓存又名Application Cache，是从浏览器的缓存中分出来的一块缓存区，要想在这个缓存中保存数据，可以使用一个描述文件（manifest file），列出要下载和缓存的资源。这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。

应用程序缓存为应用带来三个优势：
1.离线浏览 - 用户可在应用离线时使用它们
2.速度 - 已缓存资源加载得更快
3.减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

---

Manifest 文件

manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。
manifest 文件可分为三个部分：
CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存，无论在线与否，均从缓存里读取。
NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存。不缓存的文件，无论缓存中存在与否，均从新获取。
FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）。如下所示，获取不到资源时的备选路径，如index.html访问失败，则返回404页面。

FALLBACK:
index.html 404.html

CACHE MANIFEST字符串应在第一行，且必不可少
引用manifest的html必须与manifest文件同源，在同一个域下
在manifest中使用的相对路径，相对参照物为manifest文件
FALLBACK中的资源必须和manifest文件同源

使用方法

配置服务器支持 cache.manifest 的Content-type: text/cache-manifest
编写 cache.manifest 文件
在html标签里通过manifest属性引用一个cache.manifest文件

离线缓存与传统浏览器缓存区别

离线缓存是针对整个应用，浏览器缓存是单个文件
离线缓存断网了还是可以打开页面，浏览器缓存不行
离线缓存可以主动通知浏览器更新资源

---

applicationCache对象及常用属性、事件、接口

浏览器通过window.applicationCache对象来及其相应属性、接口、事件供用户构建离线应用。

status属性，表示应用缓存的当前状态

为0～5的整数值，分别对应一个状态，并分别对应一个常量
0（UNCACHED） : 无缓存， 即没有与页面相关的应用缓存
1（IDLE） : 闲置，即应用缓存未得到更新
2 （CHECKING） : 检查中，即正在下载描述文件并检查更新
3 （DOWNLOADING） : 下载中，即应用缓存正在下载描述文件中指定的资源
4 （UPDATEREADY） : 更新完成，所有资源都已下载完毕
5 （IDLE） : 废弃，即应用缓存的描述文件已经不存在了，因此页面无法再访问应用缓存

事件，表示应用缓存状态的改变

checking : 在浏览器为应用缓存查找更新时触发
error : 在检查更新或下载资源期间发送错误时触发
noupdate : 在检查描述文件发现文件无变化时触发
downloading : 在开始下载应用缓存资源时触发
progress：在文件下载应用缓存的过程中持续不断地下载地触发
updateready : 在页面新的应用缓存下载完毕触发
cached : 在应用缓存完整可用时触发

常用API

window.applicationCache.update() //update方法调用时，页面会主动与服务器通信，检查页面当前的缓存是否为最新的，如不是，则下载更新后的资源
window.applicationCache.swapCache() //updateready后，更新到最新的应用缓存

在更新了资源之后，新的资源需要等到下次再打开页面才会生效，如果需要资源马上就能生效，那么可以使用window.applicationCache.swapCache()方法来使之生效，出现这种现象的原因的浏览器会先使用离线资源加载页面，然后再去检测mainfest是否有更新。（资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。）

//当index.manifest内容更新时，浏览器检查到存在更新，并进行提示  
    function init() {  
        setInterval("toUpdateCache()", 3000);  
    }  

    function toUpdateCache() {  
        //强制检查服务器上的manifest文件是否有更新  
        applicationCache.update();  

    applicationCache.onupdateready = function() {  
        if (confirm("本地缓存已被更新,需要刷新页面来获取应用程序最新版本")) {  
            //手动更新本地缓存，只能在onupdateready事件触发时调用  
            applicationCache.swapCache();  
            location.reload();  
        }  
    }  

    //与上述写法完全等效  
    /* applicationCache.addEventListener("updateready",function(){  
        if(confirm("本地缓存已被更新,需要刷新页面来获取应用程序最新版本")){  
            //手动更新本地缓存，只能在onupdateready事件触发时调用  
            applicationCache.swapCache();  
            location.reload();  
        }  
    },true); */