HTML5離線應用

本地緩存與瀏覽器緩存

• 本地緩存是爲整個web應用程序服務的而網頁緩存值服務與單個網頁
• 本地緩存是爲你指定的資源進行緩存，而咱們不知道網頁緩存會春初哪些內容，他是不安全不可靠的
• 在沒有網絡的時候仍是能夠訪問到以緩存的對應的站點頁面，其中這些文件能夠包括html，js，css，img等等文件，但其實即便在有網絡的時候，瀏覽器也會優先使用已離線存儲的文件，返回一個200（from cache）頭。

manifest文件

web應用程序的本地緩存是經過每一個頁面的manifest文件來管理的，這個文件是一個簡單的文本文件，能夠在這個裏面指定要緩存的資源文件的資源名稱。能夠爲單獨頁面指定也能夠對整個web應用程序指定一個總的manifest文件。同時也要對服務器進行設置，讓服務器支持text/cache-manifest這個MIME類型。
manifest的大概寫法

• CACHE MANIFEST

  CACHE MANIFEST // 這一行是必須的是必須的，告知瀏覽器須要進行本地緩存

  /theme.css

  /logo.gif

  /main.js

以此告訴瀏覽器對本地服務器的一些資源進行具體設置,上面的 manifest 文件列出了三個資源：一個 CSS 文件，一個 GIF 圖像，以及一個 JavaScript 文件。當 manifest 文件加載後，瀏覽器會從網站的根目錄下載這三個文件。而後，不管用戶什麼時候與因特網斷開鏈接，這些資源依然是可用的。

• NETWORK

  白名單，使用通配符"*". 則會進入白名單的open狀態. 這種狀態下.全部不在相關Cache區域出現的url都默認使 用HTTP相關緩存頭策略.或者寫出不須要緩存的文件，這 些文件都不會進行本地緩存。
• FALLBACK
  每行指定兩個資源文件，第一個資源文件爲可以在線訪問時使用的資源文件，第二個資源文件爲不能在線訪問時使用的備用文件。

• 指定上述文件，能夠用相對路徑，也能夠用絕對路徑，都是ok的。可是絕對路徑要加上http://

瀏覽器和服務器交互過程要點

1. 當瀏覽器處理manifest文件時，會向服務器請求你的manifest中指定的文件，即便你剛剛已經請求過了，這裏還須要進行重複的請求
2. 瀏覽器接收到服務器發送來的文件以後會對本，存入包括頁面自己在內的全部要求本地緩存的資源文件，而且觸發一個時間代表更新完畢，HTML5 的更新策略與HTTP緩存策略一致，咱們能夠點擊，須要注意的是，修改了一些文件之後想要讓離線存儲更新，就必須改動manifest清單文件。（由於manifest文件還足夠新鮮，不須要與服務器進行新鮮度驗證）
3. 當資源被修改過以後，瀏覽器會向服務端請求新的manifest文集，而後對資源進行更新存入新的資源並觸發更新完成事件，須要注意的是既是文件資源被修改過了已經裝入頁面的文件不會忽然變爲新的文件資源，也就是說當你再次加載的時候纔會看到新的資源。

經過JS動態控制更新

applicationCache對象表明了本地緩存，它提供個了一些方法和事件，管理離線存儲的交互過程。經過在firefox8.0的控制檯中輸入window.applicationCache能夠看到這個對象的全部屬性和事件方法。
當咱們不適用applicationCache的時候頁面內容更新是在下一次打開本頁面的時候更新嗎若是使用了applicationCache的時候能夠當即被更新。下面咱們來看一下它的一些屬性和方法。

• 當文件資源更新完畢的時候會觸發onUpdateReady事件
  applicationCache.onUpdateReady = function(){ //第二次載入，若是manifest被更新 //在下載結束時候觸發 //不觸發onchched alert("本地緩存已經更新，您能夠刷新頁面來獲得本程序的最新版本"); }

• swapCache方法，該方法用來手工執行本地緩存

  applicationCache.onUpdateReady = function(){
   //第二次載入，若是manifest被更新
   //在下載結束時候觸發
   //不觸發onchched
   alert("本地緩存正在更新中。。。");
   if(confirm("是否從新載入已更新文件")){
       applicationCache.swapCache();
       location.reload();
   }
  }

  也就是說若是不調用該方法，用戶須要手動刷新頁面才能看到更新後的方法
  ```
• 另外還有其餘的方法以下

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(){
   //其餘和離線存儲有關的錯誤
}