溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
相信大部分人對cpuHTML5新特性之離線緩存技術不了解，為了讓大家更加了解cpuHTML5新特性之離線緩存技術，小編給大家總結了以下詳細內容，一起漲知識吧。
一、離線緩存的起因。
HTML5之前的網頁，都是無連接，必須聯網才能訪問，這其實也是web的特色，這其實對于PC是時代問題并不大，但到了移動互聯網時代，
設備終端位置不再固定，依賴無線信號，網絡的可靠性變得降低，比如坐在火車上，過了一個隧道（15分鐘），便無法訪問網站，十分不便。
而離線web應用允許我們在脫機時與網站進行交互。
二、什么是離線Web應程序？為什么要開發離線的Web應用程序？
離線web應用程序是指：當客戶端本地與web應用程序的服務器沒有建立連接時，也能正常在客戶端本地使用該web應用程序進行有關操作。
Web應用程序已經變的越來越復雜，很多領域都在利用Web應用程序。但是，它有一個致命的缺點：如果用戶沒有和Internet建立連接，他就
不能利用這個web應用程序了。因此H5新增了一個API，它使用一個本地緩存機制很好的解決了這個問題，使離線應用程序的開發成為了可能。
要想使web應用程序在離線狀態的時候也能正常工作，就必須把所有構成web應用程序的資源文件，如HTML文件、CSS文件、JavaScript腳本
文件等放在本地緩存中，當服務器沒有和Internet建立連接時，也可以利用本地緩存中的資源文件正常運行web應用程序。
三、什么是本地緩存，本地緩存與瀏覽器網頁緩存的區別。
Web應用程序的本地緩存與瀏覽器的網頁緩存有許多方面都存在著明顯的區別。
1.本地緩存為整個web應用程序服務的，而瀏覽器的網頁緩存只服務于單個網頁。任何網頁都具有網頁緩存。而本地緩存至緩存那些指定的緩存
的頁面。
2.網頁緩存不安全不可靠，因為我們不知道在網站中到底緩存了哪些網頁，以及緩存了網頁上的哪些資源。而本地緩存可靠，我們可以控制對
哪些內容進行緩存，
不對哪些內容進行緩存，開發人員還可以利用編程的手段來控制緩存的更新，利用緩存對象的各種屬性、狀態和事件來開發出更加強大的離線
應用程序。
3.（有些）瀏覽器會主動保存自己的緩存文件以加快網站加載速度。但是要實現瀏覽器緩存必須要滿足一個前提，那就是網絡必須要保持連接
。如果網絡沒有連接，
即使瀏覽器啟用了對一個站點的緩存，依然無法打開這個站點。只會收到一條錯誤信息。而使用離線web應用，我們可以主動告訴瀏覽器應該
從網站服務器中獲取或緩存哪些文件，并且在網絡離線狀態下依然能夠訪問這個網站。
四、如何實現HTML5應用程序緩存？什么是manifest文件，在文件中制定什么內容需要進行本地緩存，哪些內容不需要？
實現HTML5應用程序緩存非常簡單，只需三步，并且不需要任何API。只需要告訴瀏覽器需要離線緩存的文件，并對服務器和網頁做一些
簡單的設置即可實現。
4-1、創建一個 cache.manifest 文件，并確保文件具有正確的內容。
4-2、在服務器上設置內容類型。
4-3、所有的HTML文件都指向 cache.manifest。
具體實現：
4-1:首先我們建立一個名為cache.manifest的文件，Windows平臺下用記事本即可（也可用其他的IDE）。文件內容如下：
注意事項：
1、第一行必須是”CACHE DMANIFEST”文字，以把本文件的作用告知瀏覽器，即對本地緩存中的資源文件進行具體設置。
2、在manifest文件中，可以加上注釋來進行一些必要說明或解釋。注釋行以”#”文字開頭。
3、在CACHE之后的部分為列出我們需要緩存的文件。
4、在FALLBACK之后的部分每一行中指定兩個資源文件，第一個資源文件為能夠在線訪問時使用的資源文件，第二個資源文件為
不能在線訪問時使用的備用資源文件。
5、在NETWORK之后可以指定在線白名單，即列出我們不希望離線存儲的文件，因為通常它們的內容需要互聯網訪問才有意義。
另外，在此部分我們可以使用快捷方式：通配符*。這將告訴瀏覽器，應用服務器中獲取沒有在顯示部分中提到的任何文件或URL。
4-2：服務器上設置內容類型。
真正運行或測試離線web應用程序的時候，需要對服務器進行配置，讓服務器支持text/cache-manifest這個MIME類型（在h6中規定
manifest文件的MIME類型是text/cache-manifest）。例如對Apache服務器進行配置的時候，需要找到
｛apache_home｝/conf/mime.type這個文件(.htaccess)，并在文件最后添加如下所示代碼：
text/cache-manifest .manifest 。在微軟的IIS服務器中的步驟如下所示：
(1).右鍵選擇默認網站或需要添加類型的網站，彈出屬性對話框
(2).選擇”http頭”標簽
(3).在MIME映射下，單擊文件類型按鈕
(4).在打開的MIME類型對話框中單擊新建按鈕
(5).在關聯擴展名文本中輸入”manifest”，在內容類型文本框中輸入”text/cache-manifest”,然后點擊確定按鈕。
4-3:設置HTML文件的指向。
<html manifest=”/cache.manifest” >
完成這一步后，就完成了web離線緩存的所有步驟。由于瀏覽的文件內容都沒有更改且存儲在本地，因此現在網頁的打開速度會更快
（即使是在線狀態也如此）。
注意事項：
1、網站的每一個html頁面都必須設置html元素的manifest屬性。Must to do；
2、在你的整個網站應用中，只能有一個cache.manifest文件（建議放在網站根目錄下）；
3、部分瀏覽器（如IE8-）不支持HTML5離線緩存；
4、“#” 開頭的注釋行可滿足其他用途。應用的緩存會在其 manifest 文件更改時被更新。如果您編輯了一幅圖片，或者修改了一個 JavaScript 函數，
這些改變都不會被重新緩存。更新注釋行中的日期和版本號是一種使瀏覽器重新緩存文件的辦法。
五、掌握進行本地緩存的applicationCache對象及其屬性和事件：
（1）緩存的更新：
當一個web應用從緩存中載入的時候，所有與之相關的文件也是直接從緩存中獲取。在線狀態下，瀏覽器會異步地檢查清單文件是否有更新。
如果有更新，新的清單文件以及清單中的列舉的所有文件都會下載下來重新保存到程序緩存中。但要注意瀏覽器只是檢查清單文件，而不會
檢查緩存的文件是否有更新，如果修改一個緩存的js文件，并且要想讓該文件生效，就必須去更新下清單文件。由于應用程序依賴的文件列
表其實并沒有變化，因此最簡單的方式就是更新版本。
代碼如下：
CHCHE MANIFEST CACHE: #version<span style="color:#cc0000;">2</span> (更改這個數字以便讓瀏覽器重新下載) myapp.html myapp.css myapp.js
同樣“卸載“，就要在服務器端刪除清單文件，使得請求該文件的時候返回404，同時，修改html文件以便他們與該清單列表”斷開鏈接“。
注意：
①、瀏覽器檢查清單文件以及更新緩存的操作是異步的，可能是在從緩存中載入應用之前，也有可能是同時進行。因此對于簡單的web應用
而言，在更新清單文件之后，用戶必須載入應用兩次才能保證最新的版本生效：第一次是從緩存中載入老版本隨后更新緩存；第二次才是從
緩存中載入最新的版本。
②、瀏覽器在更新緩存過程中會觸發一系列事件，可以通過注冊處理程序來跟蹤這個過程同時提供反饋用戶。
代碼如下：
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）處理應用緩存相關事件：
//下面所有的事件處理程序都使用此函數來顯示狀態消息
//由于都是通過調用status函數來顯示狀態，因此所有處理程序都返回false來阻止瀏覽器顯示其默認狀態消息
function status(msg){
doucment.getElementById(“statusline”).innerHTML= msg;
console.log(msg); //同時在控制臺輸出此消息，便于調試
}
//每當應用程序載入的時候，都會檢查該清單文件
//也總會首先觸發“checking”事件
window.applicationCache.onchecking = function(){
status(“checking for a new version.”);
return false;
}
//如果沒有改動，同時應用程序也已經緩存了
//”noupdate”事件被觸發，整個過程結束
window.applicationCache.onnoupdate = function(){
}
//如果還未緩存應用程序，或者清單文件有改動
//那么瀏覽器會下載并緩存清單中的所有資源
//觸發”downloading”事件，同時意味著下載過程開始
window.applicationCache.ondownloading = function(){
status(“Downloading new version”);
window.progresscount = 0;
return false;
}
//在下載過程中會間斷性觸發“progress“事件
//通常是在每個文件下載完畢的時候
window.applicationCache.onprogress = function(e){
varprogress = “”;
if(e && e.lengthComputable)
progress = “ ”+Math.round(100*e.loaded/e.total)+”%”
else
progress = “(“+(++progresscount)+”)”
return false;
}
//當下載完成并且首次將應用程序下載到緩存中時，瀏覽器會觸發“cached“事件
window.applicationCache.oncached = function(e){
status(“Thisapplication is now cached locally”);
return false;
}
//當下載完成并將緩存中的應用程序更新后，瀏覽器會觸發”updaterady”事件
//要注意的是：觸發此事件的時候，用戶任然可以看到老版本的應用程序
window.applicationCache.onupdateready = function(e){
status(“Anew version has been downloaded. Reload to run it”);
return false;
}
//如果瀏覽器處于離線狀態，檢查清單列表失敗，則會觸發“error“事件
//當一個未緩存的應用程序引用一個不存在的清單文件，也會觸發此事件
window.applicationCache.onerror = function(e){
status(“Couldn’tload manifest or cache application”);
return false;
}
//如果一個緩存的應用程序引用一個不存在的清單文件，會觸發“obsolete“
//同時將應用從緩存中移除之后不會從緩存而是通過網絡加載資源
window.applicationCache.onobsolete = function(e){
status(“Thisapplication is no longer cached. Reload to get the latest version from thenetwork.”);
return false;
}每次載入一個設置了manifest屬性的html文件，瀏覽器都會觸發”checking”事件。并通過網絡載入該清單文件。不過之后，會隨著
不同的情況觸發不同的事件。
事件列表：
(1).沒有可用更新
如果應用程序已經緩存并且清單文件沒有動，則瀏覽器會觸發noupdate事件
(2).有可用更新
如果應用程序已經緩存并且清單元件有改動，則瀏覽器會觸發downloading事件并開始下載和緩存清單文件中列舉的所有資源。
隨著下載過程的進行瀏覽器還會觸發”progress”事件，在下載完成后，會觸發”updateready”事件。
(3).首次載入新的應用程序
如果還未緩存應用程序，如上所述downloading，progress事件都會觸發。但是，當下載完成后，瀏覽器會觸發”cached”事件
而不是updateready事件
(4).瀏覽器處于離線狀態
如果瀏覽器處于離線狀態，它無法檢查清單文件，同時它會觸發“error”事件。
如果一個未緩存的應用程序引用了不存的清單文件，瀏覽器也會觸發該事件
(5).清單文件不存在
如果瀏覽器處理在線狀態，應用程序也已經緩存起來，但是清單文件不存在，瀏覽器會觸發obsolete事件，并將該應用程序
從緩存中移除。
緩存狀態:
緩存的狀態可以通過window.applicationCache.status獲得，其狀態主要包括如下6種：
const unsigned short UNCACHED=0;//未緩存(應用程序沒有設置manifest屬性：未緩存) const unsigned short IDLE=1;//空閑狀態(清單文件已經檢查完畢，并且已經緩存了最新的應用程序) const unsigned short CHECKING=2;//檢查中(瀏覽器正在檢查清單文件) const unsigned short DOWNLOADING=3;//下載中(瀏覽器正在下載并緩存清單中列舉的所有文件) const unsigned short UPDATEREADY=4;//更新準備中(已經下載和緩存了最新版的應用程序) const unsigned short OBSOLETE =5;//過期狀態(清單文件不存在，緩存將被清除) readonly attribute unsigned short status;
六、ApplicationCache對象還定義了兩個方法update()和swapCache()：
(1).update
顯式調用了更新緩存算法以檢測是否有最新版本的的應用程序。這導致瀏覽器檢測同一個清單文件（并觸發相同的事件），
這和第一次載入應用程序時的效果是一樣的。
(2).swapCache
它告訴瀏覽器可以棄用老緩存，所有的請求都從新緩存中獲取。注意，這并不會重新載入應用程序：所有已經載入的html文件
、圖片、腳本等資源都不會改變。但是，之后的請求將從最新的緩存中獲取。這會導致“版本錯亂”的問題，因此一般不推薦使用
，除非應用程序設計得很好，確保這樣的方式沒有問題。只有ApplicationCache.UPDATEREADY和
ApplicationCache.ABSOLETE 時調用 swapCache()才有意義（當狀態OBSOLETE時，調用它可以立即棄用廢棄的緩存，
讓之后所有的請求都通過網絡獲取）。如果狀態屬性是其他數值的時候調用swapCache()方法，它就會拋出異常。
七、如何判斷在線還是離線狀態？
離線web應用指的是將自己“安裝”在應用程序緩存中的程序，使得哪怕在瀏覽器處于離線狀態時依然可訪問它。為了在離線狀態可用，
Web應用需要可以告知別人自己是離線還是在線，同時當網絡連接的狀態發生改變時候也能“感知”到。通過navigator.onLine屬性，
navigator.onLine是HTML5定義用來檢測設備是在線還是離線。對應的值為false或true。但是不同瀏覽器表現并不一致。
IE 6+和Safari 5+能夠正確的檢測到網絡已斷開，并將navigator.onLine設為flase。
Firefox 3+和Opera 10.6+也支持navigator.onLine。但需要手動講瀏覽器設置為脫機模式才能讓瀏覽器正常工作。
Chrome 11及以上版本始終將navigator.onLine設為true。(不過作者的Chrome 21已經能正常使用了)
HTML5定義了online&offline事件用于監聽網絡狀態變化。
window.addEventListener('online', callback); // 離線到上線
window.addEventListener('offline', callback); // 上線到離線
目前除了IE（IE只支持navigator.onLine屬性）外，其他最新瀏覽器都支持這個事件。
八、離線Web應用實戰。
通過一個簡單的記事本程序——PermaNote，來解釋如何使用。程序將用戶的文本保存到localStorage中，并且在網絡連接可用的時候，
將其上傳到服務器，PermaNote只允許用戶編輯單個筆記。
PermaNote應用包含3個文件，一個應用清單文件、一個html頁面文件，一個實現邏輯的js文件。
Demo: http://xuanfengge.com/demo/201506/appcache/permanote.html
①.premanote.appcache部分：
CACHE MANIFEST # PermaNote v8 permanote.html permanote.js NETWORK: note
②.permanote.html部分：
<!DOCTYPEHTML>
<html manifest= permanote.appcache”>
<head>
<title>PermaNote Editor</title>
<script src=” permanote.js”></script>
<style type=”text/css”>
#editor {width:100%;height:250px}
#statusline{width:100%}
</style>
</head>
<body>
<p id=”toobar”>
<button id=”savebutton”onclick = “save()”>save</button>
<button onclick = “sync()”>SyncNote</button>
<button onclick = “applicationCache.update()”>UpdateApplication</button>
<textarea id=”editor”></textarea>
<p id=”statusline”></p>
</p>
</body>
</html>③.permanote.js部分
status()函數用于顯示狀態欄消息，save()函數將筆記本保存到服務器，sync()用于確保本地與服務器文本的同步。
應用程序的時間處理程序解釋：
(1).onload
嘗試和服務器同步，一旦有新版本的筆記并且完成同步后，就啟用編輯器窗口。
save()和sync()函數發出HTTP請求，并在XMLHttpRequest對象上注冊一個onload時間處理程序來獲取上傳或者
下載完成的提醒。
(2).onbeforeunload
在未上傳前，把當前版本的筆記數據保存到服務器上。
(3).oninput
每當textarea輸入框內容發生變化時，都將其內容保存到localStorage中，并啟動一個計時器。當用戶停止編輯超過5秒
，將自動把數據保存到服務器。
(4).onoffline
當瀏覽器進入離線狀態時，在狀態欄顯示離線消息。
(5).ononline
當瀏覽器回到在線狀態時，同步服務器，檢查是否有新版本的數據，并且保存當前版本的數據。
(6).onupdateready
如果新版本的應用已緩存，則在狀態欄展示消息告知用戶。
(7).onnoupdate
如果應用程序緩存沒有發生變化，則同時用戶仍在運行當前版本。
看完上訴內容，你們對cpuHTML5新特性之離線緩存技術大概了解了嗎？如果想了解更多，歡迎關注億速云行業資訊頻道哦！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
