摘要：使用離線應用構建應用服務端服務器配置創建文件客戶端構建，并在標簽上添加屬性，屬性值是服務器上配置的緩存資源列表的文件名配置相關事件，創建離線文件內容將狀態代碼轉化成狀態離線應用創建即使沒有互聯網連接也可以使用的應用程序。

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

web當中使用緩存的原因之一是為了支持離線應用，其它優點：

減少網絡資源的請求（減少服務器壓力）

相比網絡加載資源，加載本地資源速度更快，體驗更好

在斷網的情況下，能提供良好的用戶體驗（斷網加載）

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

使用HTML5離線WEB應用API：

1、檢查瀏覽器是否支持

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

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

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

    CACHE MANIFEST

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

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

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

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

#不緩存的文件  # 每次都會從服務器拉去新的文件，因為瀏覽器會緩存，為了保證每次的內容都是服務器上最新的，應當在這里
NETWORK
signup.html


#獲取不到資源文件時候的備選資源路徑，一般出現404的時候會使用
FALLBACK
signup.html     offline.html  #當訪問signup.html出現404的時候，會轉到offline.html
/app/ajax       offline.html  #當訪問/app/ajax路徑下的內容出現404的時候，會轉到offline.html

6、applicationCache API
applicationCache API是一個操作應用緩存的接口。

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

相關事件

沒有更新或者更新發生錯誤，
onerror
onnoupdate
onprogress

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

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

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

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

再次訪問應用網站的時候，瀏覽器會從緩存當中加載資源文件，同時，如果應用在線，則會檢查manifest文件是否更新過

離線狀態，瀏覽器會從資源緩存中加載，而訪問NETWORK資源時，會加載FALLBACK的內容。

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

當修改了緩存的文件，也修改了manifest文件，但刷新瀏覽器的時候，依然看到的是原來緩存的內容，因為頁面從應用緩存中加載資源時發生在服務器執行服務器檢查之前，瀏覽器是不會自動更新加載頁面的。可以把瀏覽器關掉，再次打開，也可以通過updateready事件綁定監聽，提示用戶進行刷新。

    服務端：
    1、服務器配置
    2、創建manifest文件
    
    客戶端：
    3、構建HTML，并在HTML標簽上添加manifest屬性，屬性值是服務器上配置的緩存資源列表的文件名
    4、配置相關事件，創建離線Javascript

Js文件內容：

    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狀態代碼轉化成狀態
    */
    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應用創建即使沒有互聯網連接也可以使用的應用程序。為確保應用中所需文件能夠成功緩存，需要將這些文件指定在manifest文件中，隨后在應用程序的主頁面中進行引用。然后，添加監聽器監聽在線和離線狀態的變化，進而基于因特網連接是否讓網站執行不同的操作。