構建離線WEB應用

時間 2019-11-10

標籤構建離線 web 應用欄目 HTML 简体版

原文原文鏈接

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

web當中使用緩存的緣由之一是爲了支持離線應用，其它優勢：html

減小網絡資源的請求（減小服務器壓力）
相比網絡加載資源，加載本地資源速度更快，體驗更好
在斷網的狀況下，能提供良好的用戶體驗（斷網加載）

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

使用HTML5離線WEB應用API：web

一、檢查瀏覽器是否支持ajax

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

二、在html文檔的HTML元素上添加manifest特性，以下：瀏覽器

<html manifest='application.appcache'>
        <head></head>
        <body></body>
    </html>

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

CACHE MANIFEST

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

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

五、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

六、applicationCache API
applicationCache API是一個操做應用緩存的接口。app

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

數值型屬性	緩存狀態	說明
0	UNCACHED（未緩存）	沒有指定緩存清單
1	IDLE（空閒）	帶有緩存清單應用的狀態，表示全部文件都已被緩存
2	CHECKING（檢查中）
3	DOWNLOADING（下載中）	1
4	UPDATEREADY（更新就緒）	1
5	OBSOLETE（過時）	1

相關事件

事件	關聯的緩存狀態
Onchecking	CHECKING
Ondownloading	DOWNLOADING
Onupdateready	UPDATEREADY
Onobsolete	OBSOLETE
Oncached	IDLE

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

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

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

首次訪問，瀏覽器加載頁面及其資源
解析頁面的時候，瀏覽器會解讀HTML元素的manifest屬性，而後加載CACHE 和FALLBACK部分列出的文件，到xxx.com應用的緩存，瀏覽器大於5M的存儲空間
再次訪問應用網站的時候，瀏覽器會從緩存當中加載資源文件，同時，若是應用在線，則會檢查manifest文件是否更新過
離線狀態，瀏覽器會從資源緩存中加載，而訪問NETWORK資源時，會加載FALLBACK的內容。
當應用處於在線狀態，修改了緩存文件列表當中的某一個文件，可是，沒有更新manifest(沒發生變化)，那麼瀏覽器依然會從瀏覽器緩存當中加載這個文件。這時候，須要稍微再manifest文件當中修改字符（通常是版本號），瀏覽器纔會加載最新的manifest文件
當修改了緩存的文件，也修改了manifest文件，但刷新瀏覽器的時候，依然看到的是原來緩存的內容，由於頁面從應用緩存中加載資源時發生在服務器執行服務器檢查以前，瀏覽器是不會自動更新加載頁面的。能夠把瀏覽器關掉，再次打開，也能夠經過updateready事件綁定監聽，提示用戶進行刷新。

使用HTML5離線應用（applicationCache ）構建應用

服務端：
    一、服務器配置
    二、建立manifest文件
    
    客戶端：
    三、構建HTML，並在HTML標籤上添加manifest屬性，屬性值是服務器上配置的緩存資源列表的文件名
    四、配置相關事件，建立離線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文件中，隨後在應用程序的主頁面中進行引用。而後，添加監聽器監聽在線和離線狀態的變化，進而基於因特網鏈接是否讓網站執行不一樣的操做。