HTML5--離線web應用

weixin_34007291發表於2016-02-14
HTMLWeb

HTML5新增了離線應用，離線應用使得我們可以在網頁或應用在沒有網路的情況下依然可以使用。
離線應用的使用需要以下幾個步驟：

  • 離線檢測（確定是否聯網）
  • 訪問一定的資源
  • 有一塊本地空間用於儲存資料（無論是否上網都不妨礙讀寫）

使用HTML5離線web應用

1、檢查瀏覽器的支援情況的方法

  if(window.applicationCache){
        //瀏覽器支援離線應用
  }

2、關於描述檔案
描述檔案用來列出需要快取和不需要快取的資源，以備離線時使用。
描述檔案的副檔名以前用.manifest，現在推薦使用.appcache，並且描述檔案需要配置正確的MIME-type，即"text/cache-manifest"，必須在web伺服器上進行配置（檔案編碼必須是UTF-8）。不同的伺服器有不同的配置方法，具體這裡不詳述。

首行必須以以下字串開始

    CACHE MANIFEST

剩下的就是要快取的檔案的URL，一行一個（相對URL是相對於清單檔案而言的，不是相對於檔案）

    #以“#”開頭的是註釋
    common.css
    common.js

這樣這個檔案中列舉的所有的檔案都會被快取

在清單中，可以使用特殊的區域頭來標識頭資訊之後的清單項的型別，上面的最簡單的快取屬於"CACHE:"區域。
像這樣

    #該頭資訊之後的內容需要快取
    CACHE:
    common.css
    connom.js

以"NETWORK:"開頭的區域列舉的檔案，總是從線上獲取，不快取
NETWORK:頭資訊支援萬用字元"*",表示任何未明確列舉的資源，都將通過網路載入

    #該頭資訊之後的內容不需要快取，總是從線上獲取
    NETWORK:
    a.css
    #表示以name開頭的資源都不要快取
    name/

以"FALLBACK:"開頭的區域中的內容，提供了獲取不到快取資源時的備選資源路徑
該區域中的內容，每一行包含兩個URL（第一個URL是一個字首，任何匹配的資源都不被快取，第二個URL表示需要被快取的資源）

    FALLBACK:
    name/  example.html

一個清單可以有任意多個區域，且位置沒有限制。

3、搭建離線應用程式
假設我們要構建一個包含css，js，html的單頁應用，同時要為這個單頁應用新增離線支援。
要將描述檔案與頁面關聯起來，需要使用html標籤的manifest特性指定描述檔案的路徑

    <html manifest='./offline.appcche'>

開發離線應用的第一步就是檢測裝置是否離線

  • HTML5新增了navigator.onLine屬性
    當該屬性為true的時候表示聯網，值為false的時候，表示離線

      if(navigator.onLine){
      //聯網
  }else{
      //離線
  }

** 注：IE6及以上瀏覽器及其他標準瀏覽器都支援這個屬性 **

  • online事件（IE9+瀏覽器支援）

當網路從離線變為線上的時候觸發該事件，在window上觸發該事件，不需要重新整理

    window.online = function(){
        //需要觸發的事件
    }

  • offline事件（IE9+瀏覽器支援）
    當網路從線上變為離線的時候觸發該事件，和online事件一樣，在window上觸發該事件，不需要重新整理

      window.offline = function(){
      //需要觸發的事件
  }

應用快取

應用快取（Application Cache）是從瀏覽器的快取中分出來的一塊快取區（大小根據具體瀏覽器而定，一般是5M）

應用快取和網頁快取的區別：

  • 應用快取為整個web應用程式服務，網頁快取服務於單個網頁
  • 應用快取只快取指定頁面需要的指定資源（可人為控制），任何網頁都具有網頁快取（瀏覽器預設行為）
  • 應用快取不會隨著清除瀏覽器快取而消失
  • 應用快取不會像網頁快取那樣，老資料會被最新一次的新資料替代
  • 應用快取可以離線訪問，網頁快取必須線上訪問
  • 應用快取可靠，可控，網頁快取不可控

應用快取的優勢

  • 離線瀏覽
  • 速度更快--已快取資源載入更快
  • 減少負載--瀏覽器只從伺服器下載更新過的檔案

一個web應用首次下載並快取之後，任何載入請求都優先來自於快取，因此可以實現離線快取。如果不需要使用離線快取了，就需要在伺服器端刪除描述檔案，或者刪除HTML頁面中的manifest屬性。

一旦應用被快取，則快取始終不變。那麼，怎樣才能改變快取

  • 使用者清空應用快取
  • manifest檔案被修改
  • 使用update()方法更新快取

如果伺服器上的檔案有所修改的話，那麼修改描述檔案中註釋行的日期或者版本號是一個不錯的使瀏覽器重新快取檔案的辦法

此外，我們還可以使用HTML5提供的API來操作和更新快取

applicationCache API

applicationCache API是一個操作應用快取的介面。新的window.applicationCache物件可以觸發一系列與快取狀態相關的事件。
這個物件有一個status屬性，值為常量，表示快取狀態

  • 0：沒有與頁面相關的應用快取（未快取）
  • 1：應用快取未得到更新（空閒）
  • 2：正在下載描述檔案並檢查更新（檢查中）
  • 3：應用快取正在下載描述檔案中指定的資源（下載中）
  • 4：應用快取已經更新了資源，而且所有資源都已下載完畢，可以通過swapCache()來使用了（更新就緒）
  • 5：應用快取的描述檔案不存在了，頁面無法再訪問應用快取（已過期）

這個物件有以下事件，表示其狀態的改變

  • 每次載入一個設定了manifest屬性的HTML檔案，首先會觸發checking事件
  • 如果應用程式已經快取，並且清單檔案沒有改動，則瀏覽器觸發noupdate事件
  • 如果應用程式已經快取，並且清單檔案發生改動，則瀏覽器觸發downloading事件，下載完畢後觸發updateready事件
  • 如果應用程式未快取，則downloading事件和progress事件都會觸發，但是下載完成後觸發cached事件而不是updateready事件
  • 如果處於離線，無法檢測清單狀態，則觸發error事件，如果引用一個不存在的清單檔案，也會觸發error事件
  • 如果處於線上，應用也快取了，但是清單檔案不存在，則會觸發obsolete事件，並將應用程式從快取中清除。

一般來講，這些事件會隨著頁面載入按上述順序依次觸發

update()方法

通過update()方法也可以手工干預，讓應用快取為檢查更新而觸發上述事件

    applicationCache.update();

update()一經呼叫，應用快取就會去檢查描述檔案是否更新，觸發checking事件，然後頁面就會像剛剛載入一樣，繼續執行後續操作。如果觸發了cached事件，則說明應用快取已經準備就緒，不會再發生其他操作。

swapCache()方法

如果觸發了updateready事件，則說明新版本的應用快取已經可用，需要呼叫swapCache()方法來啟用新的應用快取。

    applicationCache.onupdateready = function(){
        applicationCache.swapCache();
    };

瀏覽器檢查清單檔案，以及更新快取的操作是非同步的，因此可能是在載入舊快取之後進行，因此可能需要載入兩次才能顯示最新的內容，因此需要提示使用者

    window.applicationCache.onupdateready = function(){
        var con = comfirm('有新內容可用，是否重新載入？');
        if(con){
            location.reload();
        }
    }

相關文章