相信大部分人對cpuHTML5新特性之離線緩存技術(shù)不了解，為了讓大家更加了解cpuHTML5新特性之離線緩存技術(shù)，小編給大家總結(jié)了以下詳細內(nèi)容，一起漲知識吧。

創(chuàng)新互聯(lián)建站主營濱江網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,重慶APP軟件開發(fā),濱江h(huán)5微信小程序開發(fā)搭建,濱江網(wǎng)站營銷推廣歡迎濱江等地區(qū)企業(yè)咨詢

一、離線緩存的起因。

HTML5之前的網(wǎng)頁，都是無連接，必須聯(lián)網(wǎng)才能訪問，這其實也是web的特色，這其實對于PC是時代問題并不大，但到了移動互聯(lián)網(wǎng)時代，

設(shè)備終端位置不再固定，依賴無線信號，網(wǎng)絡(luò)的可靠性變得降低，比如坐在火車上，過了一個隧道（15分鐘），便無法訪問網(wǎng)站，十分不便。

而離線web應用允許我們在脫機時與網(wǎng)站進行交互。

二、什么是離線Web應程序？為什么要開發(fā)離線的Web應用程序？

離線web應用程序是指：當客戶端本地與web應用程序的服務器沒有建立連接時，也能正常在客戶端本地使用該web應用程序進行有關(guān)操作。

Web應用程序已經(jīng)變的越來越復雜，很多領(lǐng)域都在利用Web應用程序。但是，它有一個致命的缺點：如果用戶沒有和Internet建立連接，他就

不能利用這個web應用程序了。因此H5新增了一個API，它使用一個本地緩存機制很好的解決了這個問題，使離線應用程序的開發(fā)成為了可能。

要想使web應用程序在離線狀態(tài)的時候也能正常工作，就必須把所有構(gòu)成web應用程序的資源文件，如HTML文件、CSS文件、JavaScript腳本

文件等放在本地緩存中，當服務器沒有和Internet建立連接時，也可以利用本地緩存中的資源文件正常運行web應用程序。

三、什么是本地緩存，本地緩存與瀏覽器網(wǎng)頁緩存的區(qū)別。

Web應用程序的本地緩存與瀏覽器的網(wǎng)頁緩存有許多方面都存在著明顯的區(qū)別。

1.本地緩存為整個web應用程序服務的，而瀏覽器的網(wǎng)頁緩存只服務于單個網(wǎng)頁。任何網(wǎng)頁都具有網(wǎng)頁緩存。而本地緩存至緩存那些指定的緩存

的頁面。

2.網(wǎng)頁緩存不安全不可靠，因為我們不知道在網(wǎng)站中到底緩存了哪些網(wǎng)頁，以及緩存了網(wǎng)頁上的哪些資源。而本地緩存可靠，我們可以控制對

哪些內(nèi)容進行緩存，

不對哪些內(nèi)容進行緩存，開發(fā)人員還可以利用編程的手段來控制緩存的更新，利用緩存對象的各種屬性、狀態(tài)和事件來開發(fā)出更加強大的離線

應用程序。

3.（有些）瀏覽器會主動保存自己的緩存文件以加快網(wǎng)站加載速度。但是要實現(xiàn)瀏覽器緩存必須要滿足一個前提，那就是網(wǎng)絡(luò)必須要保持連接

。如果網(wǎng)絡(luò)沒有連接，

即使瀏覽器啟用了對一個站點的緩存，依然無法打開這個站點。只會收到一條錯誤信息。而使用離線web應用，我們可以主動告訴瀏覽器應該

從網(wǎng)站服務器中獲取或緩存哪些文件，并且在網(wǎng)絡(luò)離線狀態(tài)下依然能夠訪問這個網(wǎng)站。

四、如何實現(xiàn)HTML5應用程序緩存？什么是manifest文件，在文件中制定什么內(nèi)容需要進行本地緩存，哪些內(nèi)容不需要？

實現(xiàn)HTML5應用程序緩存非常簡單，只需三步，并且不需要任何API。只需要告訴瀏覽器需要離線緩存的文件，并對服務器和網(wǎng)頁做一些

簡單的設(shè)置即可實現(xiàn)。

4-1、創(chuàng)建一個 cache.manifest 文件，并確保文件具有正確的內(nèi)容。

4-2、在服務器上設(shè)置內(nèi)容類型。

4-3、所有的HTML文件都指向 cache.manifest。

具體實現(xiàn)：

4-1:首先我們建立一個名為cache.manifest的文件，Windows平臺下用記事本即可（也可用其他的IDE）。文件內(nèi)容如下：

注意事項：

1、第一行必須是”CACHE DMANIFEST”文字，以把本文件的作用告知瀏覽器，即對本地緩存中的資源文件進行具體設(shè)置。

2、在manifest文件中，可以加上注釋來進行一些必要說明或解釋。注釋行以”#”文字開頭。

3、在CACHE之后的部分為列出我們需要緩存的文件。

4、在FALLBACK之后的部分每一行中指定兩個資源文件，第一個資源文件為能夠在線訪問時使用的資源文件，第二個資源文件為

不能在線訪問時使用的備用資源文件。

5、在NETWORK之后可以指定在線白名單，即列出我們不希望離線存儲的文件，因為通常它們的內(nèi)容需要互聯(lián)網(wǎng)訪問才有意義。

另外，在此部分我們可以使用快捷方式：通配符*。這將告訴瀏覽器，應用服務器中獲取沒有在顯示部分中提到的任何文件或URL。

4-2：服務器上設(shè)置內(nèi)容類型。

真正運行或測試離線web應用程序的時候，需要對服務器進行配置，讓服務器支持text/cache-manifest這個MIME類型（在h6中規(guī)定

manifest文件的MIME類型是text/cache-manifest）。例如對Apache服務器進行配置的時候，需要找到

｛apache_home｝/conf/mime.type這個文件(.htaccess)，并在文件最后添加如下所示代碼：

text/cache-manifest .manifest 。在微軟的IIS服務器中的步驟如下所示：

(1).右鍵選擇默認網(wǎng)站或需要添加類型的網(wǎng)站，彈出屬性對話框

(2).選擇”http頭”標簽

(3).在MIME映射下，單擊文件類型按鈕

(4).在打開的MIME類型對話框中單擊新建按鈕

(5).在關(guān)聯(lián)擴展名文本中輸入”manifest”，在內(nèi)容類型文本框中輸入”text/cache-manifest”,然后點擊確定按鈕。

4-3:設(shè)置HTML文件的指向。

完成這一步后，就完成了web離線緩存的所有步驟。由于瀏覽的文件內(nèi)容都沒有更改且存儲在本地，因此現(xiàn)在網(wǎng)頁的打開速度會更快

（即使是在線狀態(tài)也如此）。

注意事項：

1、網(wǎng)站的每一個html頁面都必須設(shè)置html元素的manifest屬性。Must to do；

2、在你的整個網(wǎng)站應用中，只能有一個cache.manifest文件（建議放在網(wǎng)站根目錄下）；

3、部分瀏覽器（如IE8-）不支持HTML5離線緩存；

4、“#” 開頭的注釋行可滿足其他用途。應用的緩存會在其 manifest 文件更改時被更新。如果您編輯了一幅圖片，或者修改了一個 JavaScript 函數(shù)，

這些改變都不會被重新緩存。更新注釋行中的日期和版本號是一種使瀏覽器重新緩存文件的辦法。

五、掌握進行本地緩存的applicationCache對象及其屬性和事件：

（1）緩存的更新：

當一個web應用從緩存中載入的時候，所有與之相關(guān)的文件也是直接從緩存中獲取。在線狀態(tài)下，瀏覽器會異步地檢查清單文件是否有更新。

如果有更新，新的清單文件以及清單中的列舉的所有文件都會下載下來重新保存到程序緩存中。但要注意瀏覽器只是檢查清單文件，而不會

檢查緩存的文件是否有更新，如果修改一個緩存的js文件，并且要想讓該文件生效，就必須去更新下清單文件。由于應用程序依賴的文件列

表其實并沒有變化，因此最簡單的方式就是更新版本。

代碼如下：

CHCHE MANIFEST
CACHE:
#version2 (更改這個數(shù)字以便讓瀏覽器重新下載)
myapp.html
 myapp.css
 myapp.js

同樣“卸載“，就要在服務器端刪除清單文件，使得請求該文件的時候返回404，同時，修改html文件以便他們與該清單列表”斷開鏈接“。

注意：

①、瀏覽器檢查清單文件以及更新緩存的操作是異步的，可能是在從緩存中載入應用之前，也有可能是同時進行。因此對于簡單的web應用

而言，在更新清單文件之后，用戶必須載入應用兩次才能保證最新的版本生效：第一次是從緩存中載入老版本隨后更新緩存；第二次才是從

緩存中載入最新的版本。

②、瀏覽器在更新緩存過程中會觸發(fā)一系列事件，可以通過注冊處理程序來跟蹤這個過程同時提供反饋用戶。

代碼如下：

  applicationCache.onupdateready= function(){
  var reload = confirm(“A new version of this application is available\n and will be used the next time you reload.\n”);
  if(reload)  location.reload();
}

該事件注冊在ApplicationCache對象上的，該對象是window的applicationCache屬性的值。支持應用程序緩存的瀏覽器會定義該屬性。

（2）處理應用緩存相關(guān)事件：

//下面所有的事件處理程序都使用此函數(shù)來顯示狀態(tài)消息
//由于都是通過調(diào)用status函數(shù)來顯示狀態(tài)，因此所有處理程序都返回false來阻止瀏覽器顯示其默認狀態(tài)消息
  function status(msg){
 doucment.getElementById(“statusline”).innerHTML= msg;
  console.log(msg); //同時在控制臺輸出此消息，便于調(diào)試
 }
   //每當應用程序載入的時候，都會檢查該清單文件
   //也總會首先觸發(fā)“checking”事件
   window.applicationCache.onchecking = function(){
      status(“checking for a new version.”);
     return false;
   }
   //如果沒有改動，同時應用程序也已經(jīng)緩存了
   //”noupdate”事件被觸發(fā)，整個過程結(jié)束
  window.applicationCache.onnoupdate = function(){
   }
    //如果還未緩存應用程序，或者清單文件有改動
    //那么瀏覽器會下載并緩存清單中的所有資源
    //觸發(fā)”downloading”事件，同時意味著下載過程開始
   window.applicationCache.ondownloading = function(){
        status(“Downloading new version”);
        window.progresscount = 0;
       return false;
   }
   //在下載過程中會間斷性觸發(fā)“progress“事件
   //通常是在每個文件下載完畢的時候
   window.applicationCache.onprogress = function(e){
        varprogress = “”;
        if(e && e.lengthComputable)
           progress = “ ”+Math.round(100*e.loaded/e.total)+”%”
       else
            progress = “(“+(++progresscount)+”)”
       return false;
  }
    //當下載完成并且首次將應用程序下載到緩存中時，瀏覽器會觸發(fā)“cached“事件
  window.applicationCache.oncached = function(e){
       status(“Thisapplication is now cached locally”);
        return false;
  }
 
    //當下載完成并將緩存中的應用程序更新后，瀏覽器會觸發(fā)”updaterady”事件
    //要注意的是：觸發(fā)此事件的時候，用戶任然可以看到老版本的應用程序
   window.applicationCache.onupdateready = function(e){
        status(“Anew version has been downloaded. Reload to run it”);
        return false;
   }
 
   //如果瀏覽器處于離線狀態(tài)，檢查清單列表失敗，則會觸發(fā)“error“事件
   //當一個未緩存的應用程序引用一個不存在的清單文件，也會觸發(fā)此事件
   window.applicationCache.onerror = function(e){
        status(“Couldn’tload manifest or cache application”);
        return false;
  }
    //如果一個緩存的應用程序引用一個不存在的清單文件，會觸發(fā)“obsolete“
   //同時將應用從緩存中移除之后不會從緩存而是通過網(wǎng)絡(luò)加載資源
   window.applicationCache.onobsolete = function(e){
        status(“Thisapplication is no longer cached. Reload to get the latest version from thenetwork.”);
        return false;
   }

每次載入一個設(shè)置了manifest屬性的html文件，瀏覽器都會觸發(fā)”checking”事件。并通過網(wǎng)絡(luò)載入該清單文件。不過之后，會隨著

不同的情況觸發(fā)不同的事件。

事件列表：

(1).沒有可用更新

如果應用程序已經(jīng)緩存并且清單文件沒有動，則瀏覽器會觸發(fā)noupdate事件

(2).有可用更新

如果應用程序已經(jīng)緩存并且清單元件有改動，則瀏覽器會觸發(fā)downloading事件并開始下載和緩存清單文件中列舉的所有資源。

隨著下載過程的進行瀏覽器還會觸發(fā)”progress”事件，在下載完成后，會觸發(fā)”updateready”事件。

(3).首次載入新的應用程序

如果還未緩存應用程序，如上所述downloading，progress事件都會觸發(fā)。但是，當下載完成后，瀏覽器會觸發(fā)”cached”事件

而不是updateready事件

(4).瀏覽器處于離線狀態(tài)

如果瀏覽器處于離線狀態(tài)，它無法檢查清單文件，同時它會觸發(fā)“error”事件。

如果一個未緩存的應用程序引用了不存的清單文件，瀏覽器也會觸發(fā)該事件

(5).清單文件不存在

如果瀏覽器處理在線狀態(tài)，應用程序也已經(jīng)緩存起來，但是清單文件不存在，瀏覽器會觸發(fā)obsolete事件，并將該應用程序

從緩存中移除。

緩存狀態(tài):

緩存的狀態(tài)可以通過window.applicationCache.status獲得，其狀態(tài)主要包括如下6種：

const unsigned short UNCACHED=0;//未緩存(應用程序沒有設(shè)置manifest屬性：未緩存)
const unsigned short IDLE=1;//空閑狀態(tài)(清單文件已經(jīng)檢查完畢，并且已經(jīng)緩存了最新的應用程序)  
const unsigned short CHECKING=2;//檢查中(瀏覽器正在檢查清單文件)  
const unsigned short DOWNLOADING=3;//下載中(瀏覽器正在下載并緩存清單中列舉的所有文件)
const unsigned short UPDATEREADY=4;//更新準備中(已經(jīng)下載和緩存了最新版的應用程序)
const unsigned short OBSOLETE =5;//過期狀態(tài)(清單文件不存在，緩存將被清除)  
readonly attribute unsigned short status;

六、ApplicationCache對象還定義了兩個方法update()和swapCache()：

(1).update

顯式調(diào)用了更新緩存算法以檢測是否有最新版本的的應用程序。這導致瀏覽器檢測同一個清單文件（并觸發(fā)相同的事件），

這和第一次載入應用程序時的效果是一樣的。

(2).swapCache

它告訴瀏覽器可以棄用老緩存，所有的請求都從新緩存中獲取。注意，這并不會重新載入應用程序：所有已經(jīng)載入的html文件

、圖片、腳本等資源都不會改變。但是，之后的請求將從最新的緩存中獲取。這會導致“版本錯亂”的問題，因此一般不推薦使用

，除非應用程序設(shè)計得很好，確保這樣的方式?jīng)]有問題。只有ApplicationCache.UPDATEREADY和

ApplicationCache.ABSOLETE 時調(diào)用 swapCache()才有意義（當狀態(tài)OBSOLETE時，調(diào)用它可以立即棄用廢棄的緩存，

讓之后所有的請求都通過網(wǎng)絡(luò)獲?。Ｈ绻麪顟B(tài)屬性是其他數(shù)值的時候調(diào)用swapCache()方法，它就會拋出異常。

七、如何判斷在線還是離線狀態(tài)？

離線web應用指的是將自己“安裝”在應用程序緩存中的程序，使得哪怕在瀏覽器處于離線狀態(tài)時依然可訪問它。為了在離線狀態(tài)可用，

Web應用需要可以告知別人自己是離線還是在線，同時當網(wǎng)絡(luò)連接的狀態(tài)發(fā)生改變時候也能“感知”到。通過navigator.onLine屬性，

navigator.onLine是HTML5定義用來檢測設(shè)備是在線還是離線。對應的值為false或true。但是不同瀏覽器表現(xiàn)并不一致。

IE 6+和Safari 5+能夠正確的檢測到網(wǎng)絡(luò)已斷開，并將navigator.onLine設(shè)為flase。

Firefox 3+和Opera 10.6+也支持navigator.onLine。但需要手動講瀏覽器設(shè)置為脫機模式才能讓瀏覽器正常工作。

Chrome 11及以上版本始終將navigator.onLine設(shè)為true。(不過作者的Chrome 21已經(jīng)能正常使用了)

HTML5定義了online&offline事件用于監(jiān)聽網(wǎng)絡(luò)狀態(tài)變化。

window.addEventListener('online', callback); // 離線到上線

window.addEventListener('offline', callback); // 上線到離線

目前除了IE（IE只支持navigator.onLine屬性）外，其他最新瀏覽器都支持這個事件。

八、離線Web應用實戰(zhàn)。

通過一個簡單的記事本程序——PermaNote，來解釋如何使用。程序?qū)⒂脩舻奈谋颈４娴絣ocalStorage中，并且在網(wǎng)絡(luò)連接可用的時候，

將其上傳到服務器，PermaNote只允許用戶編輯單個筆記。

PermaNote應用包含3個文件，一個應用清單文件、一個html頁面文件，一個實現(xiàn)邏輯的js文件。

Demo: http://xuanfengge.com/demo/201506/appcache/permanote.html

①.premanote.appcache部分：

 CACHE MANIFEST
#  PermaNote v8
permanote.html
permanote.js
NETWORK:
note

②.permanote.html部分：

save
SyncNote
UpdateApplication

③.permanote.js部分

status()函數(shù)用于顯示狀態(tài)欄消息，save()函數(shù)將筆記本保存到服務器，sync()用于確保本地與服務器文本的同步。

應用程序的時間處理程序解釋：

(1).onload

嘗試和服務器同步，一旦有新版本的筆記并且完成同步后，就啟用編輯器窗口。

save()和sync()函數(shù)發(fā)出HTTP請求，并在XMLHttpRequest對象上注冊一個onload時間處理程序來獲取上傳或者

下載完成的提醒。

(2).onbeforeunload

在未上傳前，把當前版本的筆記數(shù)據(jù)保存到服務器上。

(3).oninput

每當textarea輸入框內(nèi)容發(fā)生變化時，都將其內(nèi)容保存到localStorage中，并啟動一個計時器。當用戶停止編輯超過5秒

，將自動把數(shù)據(jù)保存到服務器。

(4).onoffline

當瀏覽器進入離線狀態(tài)時，在狀態(tài)欄顯示離線消息。

(5).ononline
當瀏覽器回到在線狀態(tài)時，同步服務器，檢查是否有新版本的數(shù)據(jù)，并且保存當前版本的數(shù)據(jù)。

(6).onupdateready

如果新版本的應用已緩存，則在狀態(tài)欄展示消息告知用戶。

(7).onnoupdate

如果應用程序緩存沒有發(fā)生變化，則同時用戶仍在運行當前版本。

看完上訴內(nèi)容，你們對cpuHTML5新特性之離線緩存技術(shù)大概了解了嗎？如果想了解更多，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道哦！