HTML5 離線緩衝

標籤：als   win   特色   可靠性   應用   apache   app   最新   到期   

    先需求分析一下---傳統的web應用是線上應用，這其實也是web的特色，對於PC時代問題並不大，但到了移動互連網時代，裝置終端位置不再固定，依賴無線訊號，網路的可靠性變得更低。比如：在火車上，穿山越嶺進隧道，便無法訪問web應用。。。因此出現了離線緩衝技術

 離線緩衝為應用帶來3個優勢，第一：離線瀏覽，使用者可以再無網路是瀏覽；第二：速度快，已經緩衝的資源載入更快；第三：減少伺服器壓力；還等什麼快學習緩衝。

1.瀏覽器對離線緩衝並不是都支援的，總有幾個不想顯示你緩衝的檔案，所以要先檢測瀏覽器和離線緩衝八字合不合~

   檢測方案：if(window.applicationCache)

                {//瀏覽器支援離線緩衝}

                else

                {//瀏覽器不支援離線緩衝}//IE不支援

2.不同的伺服器環境配置不同，在伺服器中MIME設定檔中增加manifest檔案類型，我使用的是APCHE2.4.9，就這版伺服器進行配置。。。。

          按此C:\wamp\bin\apache\apache2.4.9\conf路徑，找到httpd.conf檔案，開啟後將如下代碼           

          AddType text/cache-manifest .manifest
          AddType text/cache-manifest .appcache

        加入到

    這樣就可以放心使用離線緩衝啦，6的飛起。。。。

3.下面正式進入離線緩衝代碼的學習

 （1）  建立一個尾碼名為manifest的檔案(或appcache)，並在頁面中引入，

  （2）接下來建立此manifest檔案，先來看一下結構

         manifest檔案結構：

         CACHE MANIFEST（必須）
         # 第一行必須為CACHE MANIFEST
         # v1.0.0
         CACHE:（必須）
         # 快取檔案
         如test.css，或一張圖片的路徑（來自網路）http://img4.duitang.com/uploads/item/201407/14/20140714122325_sjTrX.jpeg
         NETWORK:（可選）
         # 不快取檔案
         test2.css
         FALLBACK:（可選）
        # 頁面無法訪問時
          test2.css 404.html

      各行的特點：

      CACHE：

     # 在此標題下列出的檔案將在首次下載後進行緩衝

      NETWORK：
     # 在此標題下列出的檔案需要與伺服器串連，不會被緩衝
     FALLBACK：
     # 在此標題下列出的檔案規定當頁面無法訪問時的回退頁

     單行注釋：#開頭

   例如我要離線緩衝網站的一張圖片：

    

   manifest檔案

    

 這樣就能成功離線一張圖片啦

4.基本流程

  

5.可以看出離線緩衝也是有即時更新檢測

  可以用如下事件進行監聽，但第一次載入還會是原來的版本

  （1）update()：檢測更新manifest檔案

  

 （2）updateready事件：當有新的緩衝，並更新完以後，會觸發此事件

  window.applicationCache.addEventListener(‘updateready‘,function(){

   alert(‘更新完成‘)
   },false);

（3）swapCache方法：用來執行本機快取的更新操作，觸發updateready事件時調用swapCache方法

  window.applicationCache.addEventListener(‘updateready‘,function(){
      window.applicationCache.swapCache();
    },false);

（4）progress事件：當有新的緩衝，並處於正在下載的過程中時，會不斷觸發此事件

       

  是不是不知道，applicationCache.status是個什麼玩意兒？下看！

      applicationCache.status 本機快取的狀態

      0 === 未緩衝
      1 === 空閑（緩衝為最新狀態）
      2 === 檢查中
      3 === 下載中
      4 === 更新就緒
      5 === 緩衝到期

 

如有錯誤歡迎指正~~

==================the end  ========================================

 

HTML5 離線緩衝