摘要：使用離線應(yīng)用構(gòu)建應(yīng)用服務(wù)端服務(wù)器配置創(chuàng)建文件客戶端構(gòu)建，并在標(biāo)簽上添加屬性，屬性值是服務(wù)器上配置的緩存資源列表的文件名配置相關(guān)事件，創(chuàng)建離線文件內(nèi)容將狀態(tài)代碼轉(zhuǎn)化成狀態(tài)離線應(yīng)用創(chuàng)建即使沒有互聯(lián)網(wǎng)連接也可以使用的應(yīng)用程序。

HTML5新增了localstroage和application cache做離線緩存，兩種緩存各有應(yīng)用的場景，今天我們說說application cache這種方案。

web當(dāng)中使用緩存的原因之一是為了支持離線應(yīng)用，其它優(yōu)點(diǎn)：

減少網(wǎng)絡(luò)資源的請求（減少服務(wù)器壓力）

相比網(wǎng)絡(luò)加載資源，加載本地資源速度更快，體驗(yàn)更好

在斷網(wǎng)的情況下，能提供良好的用戶體驗(yàn)（斷網(wǎng)加載）

通常緩存的資源包括：HTML文檔，JS文件，CSS文件，圖片，多媒體
application cache 緩存的資源文件，通常保存在瀏覽器持久性存儲資源的地方，也就是在本地硬盤上面

使用HTML5離線WEB應(yīng)用API：

1、檢查瀏覽器是否支持

    if(window.applicationCache){
        // 則支持離線緩存
    }

2、在html文檔的HTML元素上添加manifest特性，如下：

3、在application.appcache文件中，定義緩存文件清單，比如：

    CACHE MANIFEST

4、支持離線行為
HTML5引入了一些新的事件，可以讓應(yīng)用程序檢測網(wǎng)絡(luò)是否正常連接。這樣就可以控制應(yīng)用程序在離線和在線的時(shí)候有不同的行為，HTML5當(dāng)中可以通過檢測window.navigator對象來做判斷，navigator.onLine是一個(gè)標(biāo)明瀏覽器是否在線的布爾屬性，我們可以通過以下代碼作相應(yīng)的判斷：

    function loadDemo(){
        if(navigator.onLine){
            log("online")
        }else{
            log("offline")
        }
    }
    
    // 添加事件
    window.addEventListener("online",function(e){
        log("online")
    });

5、manifest文件
離線應(yīng)用當(dāng)中包含一個(gè)manifest的文件，文件當(dāng)中列出了瀏覽器為離線應(yīng)用緩存的所有資源列表。manifest的文件MIME類型是text/cache-manifest
文件示例：

CACHE MANIFEST
# 要換成的文件
about.html
html5.css
index.html
a.gif
b.jpg

#不緩存的文件  # 每次都會從服務(wù)器拉去新的文件，因?yàn)闉g覽器會緩存，為了保證每次的內(nèi)容都是服務(wù)器上最新的，應(yīng)當(dāng)在這里
NETWORK
signup.html


#獲取不到資源文件時(shí)候的備選資源路徑，一般出現(xiàn)404的時(shí)候會使用
FALLBACK
signup.html     offline.html  #當(dāng)訪問signup.html出現(xiàn)404的時(shí)候，會轉(zhuǎn)到offline.html
/app/ajax       offline.html  #當(dāng)訪問/app/ajax路徑下的內(nèi)容出現(xiàn)404的時(shí)候，會轉(zhuǎn)到offline.html

6、applicationCache API
applicationCache API是一個(gè)操作應(yīng)用緩存的接口。

window.applicationCache.status，代表了緩存的狀態(tài)，一共有6種，如下表：

相關(guān)事件

沒有更新或者更新發(fā)生錯(cuò)誤，
onerror
onnoupdate
onprogress

window.applicationCache.update——會請求瀏覽器更新緩存，包括檢查新版本的manifest文件，并下載必要的新資源，如果沒有緩存，或者緩存已過期，則會拋出錯(cuò)誤。

7、運(yùn)行中的應(yīng)用緩存
如果應(yīng)用使用了離線緩存，瀏覽器在應(yīng)用緩存中已經(jīng)成功緩存了manifest列表當(dāng)中的內(nèi)容之后，它會優(yōu)先的從緩存當(dāng)中獲取資源，之后，瀏覽器只干一件事，就是檢查manifest文件是否已經(jīng)被改變過，流程如下：

首次訪問，瀏覽器加載頁面及其資源

解析頁面的時(shí)候，瀏覽器會解讀HTML元素的manifest屬性，然后加載CACHE 和FALLBACK部分列出的文件，到xxx.com應(yīng)用的緩存，瀏覽器大于5M的存儲空間

再次訪問應(yīng)用網(wǎng)站的時(shí)候，瀏覽器會從緩存當(dāng)中加載資源文件，同時(shí)，如果應(yīng)用在線，則會檢查manifest文件是否更新過

離線狀態(tài)，瀏覽器會從資源緩存中加載，而訪問NETWORK資源時(shí)，會加載FALLBACK的內(nèi)容。

當(dāng)應(yīng)用處于在線狀態(tài)，修改了緩存文件列表當(dāng)中的某一個(gè)文件，但是，沒有更新manifest(沒發(fā)生變化)，那么瀏覽器依然會從瀏覽器緩存當(dāng)中加載這個(gè)文件。這時(shí)候，需要稍微再manifest文件當(dāng)中修改字符（一般是版本號），瀏覽器才會加載最新的manifest文件

當(dāng)修改了緩存的文件，也修改了manifest文件，但刷新瀏覽器的時(shí)候，依然看到的是原來緩存的內(nèi)容，因?yàn)轫撁鎻膽?yīng)用緩存中加載資源時(shí)發(fā)生在服務(wù)器執(zhí)行服務(wù)器檢查之前，瀏覽器是不會自動更新加載頁面的。可以把瀏覽器關(guān)掉，再次打開，也可以通過updateready事件綁定監(jiān)聽，提示用戶進(jìn)行刷新。

    服務(wù)端：
    1、服務(wù)器配置
    2、創(chuàng)建manifest文件
    
    客戶端：
    3、構(gòu)建HTML，并在HTML標(biāo)簽上添加manifest屬性，屬性值是服務(wù)器上配置的緩存資源列表的文件名
    4、配置相關(guān)事件，創(chuàng)建離線Javascript

Js文件內(nèi)容：

    window.applicationCache.onchecking = function(e){
        log("")
    }
    
    window.applicationCache.onnoupdate = function(e){};
    window.applicationCache.onupdateready = function(e){};
    window.applicationCache.onobsolete = function(e){};
    window.applicationCache.ondownloading = function(e){};
    window.applicationCache.oncached = function(e){};
    window.applicationCache.onerror = function(e){}
    
    window.addEventListener("online",function(e){
        
    });
    
    window.addEventListener("offline",function(e){
        
    });
    
    /*
        將applicationCache狀態(tài)代碼轉(zhuǎn)化成狀態(tài)
    */
    showCacheStatus = function(n){
        statusMessages =  ["Uncached","Idle","Checking","Donwloading","Update Ready","Obsolete"];
    
        return statusMessages[n];
    }
    
    let install = function(){
        log("checking for updates");
        try{
            window.applicationCache.update();
        }cache(e){
            applicationCache.onerror();
        }
        
    }
    ...

HTML5離線WEB應(yīng)用創(chuàng)建即使沒有互聯(lián)網(wǎng)連接也可以使用的應(yīng)用程序。為確保應(yīng)用中所需文件能夠成功緩存，需要將這些文件指定在manifest文件中，隨后在應(yīng)用程序的主頁面中進(jìn)行引用。然后，添加監(jiān)聽器監(jiān)聽在線和離線狀態(tài)的變化，進(jìn)而基于因特網(wǎng)連接是否讓網(wǎng)站執(zhí)行不同的操作。