H5離線快取技術Application Cache

1、離線快取技術：是瀏覽器本身的一種機制

HTML5引入Application Cache（應用程式快取）技術，離線儲存可以將站點的一些檔案儲存在本地，在沒有網路的情況下可以訪問到已快取的對應的站點頁面，這些檔案包括html、js、css、img等檔案；其實在有網路的時候，瀏覽器也會優先使用已離線儲存的檔案。而且做好相應資源的快取可以帶來更好的使用者體驗，當用戶使用自己的流量上網時，本地快取不僅可以提高使用者訪問速度，而且大大節約使用者的使用流量。

2、離線本地儲存和傳統的瀏覽器快取的區別

　　瀏覽器快取主要包含兩類：

• Last-modified,Etag

瀏覽器向伺服器詢問頁面是否被修改過，如果沒有修改就返回304，瀏覽器直接瀏覽本地快取檔案,否則伺服器返回新內容

• 徹底快取：cache-control,Expires

通過Expires設定快取失效時間，失效之前不再跟伺服器請求互動

• 離線儲存為整個web提供服務，瀏覽器快取只快取單個頁面
• 離線儲存可以指定需要快取的檔案和哪些檔案只能在線瀏覽，瀏覽器快取無法指定
• 離線儲存可以動態通知使用者進行更新

3、Application Cache帶來的三大優勢：

　　a、離線瀏覽

　　b、提升頁面載入速度

　　c、降低伺服器的壓力

4、Application Cache包括：

　　a、Manifest檔案：是一個簡單的文字檔案，副檔名任意，定義需要快取的檔案和資源，當第一次開啟時，瀏覽器會自動快取相應的資源

　　b、Application Cache檔案

　　c、特點：Manifest檔案必須有變化才更新，一次必須更新manifest檔案中的所有檔案下次才能生效

　　d、Manifest的特點：

　　　　　1>離線瀏覽：當網路斷開時，可以繼續訪問你的頁面

　　　　　2>訪問速度快：將檔案快取到本地，不需要每次都從網路上請求

　　　　   3>穩定性：做了Manifest快取，遇到突發網路故障或者伺服器故障繼續訪問本地快取

5、如何實現：

　　a、離線儲存是通過manifest檔案來管理的，需要伺服器端的支援，不同的伺服器開啟支援的方式也是不同的

CACHE MANIFEST//必須以這個開頭，在第一行
version 1.0 //最好定義版本，更新的時候只需修改版本號
CACHE:
    m.png
    test.js
    test.css
NETWORK:
    *
FALLBACK
    online.html offline.html

　　b、CACHE指定需要快取的檔案 NETWORK指定只有通過聯網才能瀏覽的檔案，*代表除了在CACHE中的檔案 FALLBACK每行分別指定線上和離線時使用的檔案(可選)

　　c、最後別忘了，這些應用需要伺服器支援

Apache伺服器開啟支援的方式是：在conf/mime.types中新增一段程式碼：

test/cache-manifest manifest

　　d、IIS伺服器開啟方式：

右鍵--HTTP---MIME對映下，單擊檔案型別---新建---副檔名輸入manifest，型別中輸入test/cache-manifest

　　e、下面的例子中，如果無法建立因特網連線，則用 “404.html” 替代 /html5/ 目錄中的所有檔案。

　　FALLBACK:
　　/html5/ /404.html

　　下面的例子中，當任何頁面無法訪問時跳轉到 “404.html”頁。

　　FALLBACK:
　　*.html /404.html

　　f、新增 manifest　 屬性的頁面會自動被瀏覽器快取，不需要再CACHE節點中再次新增。

6、瀏覽器與伺服器的互動

一般對於位址列輸入一個網址後發生：

　　1）、服務端返回baidu頁面資源，瀏覽器載入html

　　2）、瀏覽器開始解析

　　3）、發現link，傳送請求載入css檔案

　　4）、瀏覽器渲染頁面

　　5）、發現圖片，傳送請求載入圖片，並重新渲染

　　6）、傳送請求js檔案，阻塞渲染。如果js對dom進行了操作，則會進行rerender

對於支援離線儲存的頁面，瀏覽器和伺服器的互動又是如何呢？

首次載入頁面：

　　1）-6） ： 同上

　　7）：請求頁面中需要快取的頁面和資料，就算在之前的步驟中已經請求過（這是個耗能的地方）

　　8）：伺服器返回所有請求檔案，瀏覽器進行本地儲存

再次載入頁面：

　　1）：傳送請求

　　2）：使用本地儲存的離線檔案

　　3）：解析頁面

　　4）：請求服務端的manifest檔案，判斷是否有改變，返回304則表示沒有改變進入步驟6，否則進入步驟5

　　5）：進入首次載入頁面的7-8

　　6）：使用本地儲存，不重新請求

7、如何更新快取

如下三種方式，可以更新快取：

• 更新manifest檔案
• 通過javascript操作
• 清除瀏覽器快取

如何通過js動態控制更新？

applicationCache物件提供個了一些方法和事件，管理離線儲存的互動過程 通過在firefox8.0的控制檯中輸入window.applicationCache可以看到這個物件的所有屬性和事件方法

applicationCache.onchecking = function(){
   //檢查manifest檔案是否存在
}

applicationCache.ondownloading = function(){
   //檢查到有manifest或者manifest檔案
   //已更新就執行下載操作
   //即使需要快取的檔案在請求時伺服器已經返回過了
}

applicationCache.onnoupdate = function(){
   //返回304表示沒有更新，通知瀏覽器直接使用本地檔案
}

applicationCache.onprogress = function(){
   //下載的時候週期性的觸發，可以通過它
   //獲取已經下載的檔案個數
}

applicationCache.oncached = function(){
   //下載結束後觸發，表示快取成功
}

application.onupdateready = function(){
   //第二次載入，如果manifest被更新
   //在下載結束時候觸發
   //不觸發onchched
   alert("本地快取正在更新中。。。");
   if(confirm("是否重新載入已更新檔案")){
       applicationCache.swapCache();
       location.reload();
   }
}

applicationCache.onobsolete = function(){
   //未找到檔案，返回404或者401時候觸發
}

applicationCache.onerror = function(){
   //其他和離線儲存有關的錯誤
}