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

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

而離線web應(yīng)用允許我們?cè)诿摍C(jī)時(shí)與網(wǎng)站進(jìn)行交互。

二、什么是離線Web應(yīng)程序？為什么要開發(fā)離線的Webhtml' target='_blank'>應(yīng)用程序？

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

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

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

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

文件等放在本地緩存中，當(dāng)服務(wù)器沒有和Internet建立連接時(shí)，也可以利用本地緩存中的資源文件正常運(yùn)行web應(yīng)用程序。

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

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

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

的頁面。

2.網(wǎng)頁緩存不安全不可靠，因?yàn)槲覀儾恢涝诰W(wǎng)站中到底緩存了哪些網(wǎng)頁，以及緩存了網(wǎng)頁上的哪些資源。而本地緩存可靠，我們可以控制對(duì)

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

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

應(yīng)用程序。

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

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

即使瀏覽器啟用了對(duì)一個(gè)站點(diǎn)的緩存，依然無法打開這個(gè)站點(diǎn)。只會(huì)收到一條錯(cuò)誤信息。而使用離線web應(yīng)用，我們可以主動(dòng)告訴瀏覽器應(yīng)該

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

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

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

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

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

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

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

具體實(shí)現(xiàn)：

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

注意事項(xiàng)：

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

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

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

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

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

5、在NETWORK之后可以指定在線白名單，即列出我們不希望離線存儲(chǔ)的文件，因?yàn)橥ǔＫ鼈兊膬?nèi)容需要互聯(lián)網(wǎng)訪問才有意義。

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

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

真正運(yùn)行或測(cè)試離線web應(yīng)用程序的時(shí)候，需要對(duì)服務(wù)器進(jìn)行配置，讓服務(wù)器支持text/cache-manifest這個(gè)MIME類型（在h5中規(guī)定

manifest文件的MIME類型是text/cache-manifest）。例如對(duì)Apache服務(wù)器進(jìn)行配置的時(shí)候，需要找到

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

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

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

(2).選擇”http頭”標(biāo)簽

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

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

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

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

 html manifest=”/cache.manifest” 

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

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

注意事項(xiàng)：

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

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

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

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

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

五、掌握進(jìn)行本地緩存的applicationCache對(duì)象及其屬性和事件：

（1）緩存的更新：

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

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

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

表其實(shí)并沒有變化，因此最簡(jiǎn)單的方式就是更新版本。

代碼如下：

CHCHE MANIFESTCACHE:#version span >
同樣“卸載“，就要在服務(wù)器端刪除清單文件，使得請(qǐng)求該文件的時(shí)候返回404，同時(shí)，修改html文件以便他們與該清單列表”斷開鏈接“。
注意：
①、瀏覽器檢查清單文件以及更新緩存的操作是異步的，可能是在從緩存中載入應(yīng)用之前，也有可能是同時(shí)進(jìn)行。因此對(duì)于簡(jiǎn)單的web應(yīng)用
而言，在更新清單文件之后，用戶必須載入應(yīng)用兩次才能保證最新的版本生效：第一次是從緩存中載入老版本隨后更新緩存；第二次才是從
緩存中載入最新的版本。
②、瀏覽器在更新緩存過程中會(huì)觸發(fā)一系列事件，可以通過注冊(cè)處理程序來跟蹤這個(gè)過程同時(shí)提供反饋用戶。
代碼如下：
 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();}
該事件注冊(cè)在ApplicationCache對(duì)象上的，該對(duì)象是window的applicationCache屬性的值。支持應(yīng)用程序緩存的瀏覽器會(huì)定義該屬性。 
（2）處理應(yīng)用緩存相關(guān)事件：
//下面所有的事件處理程序都使用此函數(shù)來顯示狀態(tài)消息//由于都是通過調(diào)用status函數(shù)來顯示狀態(tài)，因此所有處理程序都返回false來阻止瀏覽器顯示其默認(rèn)狀態(tài)消息 function status(msg){ doucment.getElementById(“statusline”).innerHTML= msg; console.log(msg); //同時(shí)在控制臺(tái)輸出此消息，便于調(diào)試 //每當(dāng)應(yīng)用程序載入的時(shí)候，都會(huì)檢查該清單文件 //也總會(huì)首先觸發(fā)“checking”事件 window.applicationCache.onchecking = function(){ status(“checking for a new version.”); return false; //如果沒有改動(dòng)，同時(shí)應(yīng)用程序也已經(jīng)緩存了 //”noupdate”事件被觸發(fā)，整個(gè)過程結(jié)束 window.applicationCache.onnoupdate = function(){ //如果還未緩存應(yīng)用程序，或者清單文件有改動(dòng) //那么瀏覽器會(huì)下載并緩存清單中的所有資源 //觸發(fā)”downloading”事件，同時(shí)意味著下載過程開始 window.applicationCache.ondownloading = function(){ status(“Downloading new version”); window.progresscount = 0; return false; //在下載過程中會(huì)間斷性觸發(fā)“progress“事件 //通常是在每個(gè)文件下載完畢的時(shí)候 window.applicationCache.onprogress = function(e){ varprogress = “”; if(e e.lengthComputable) progress = “ ”+Math.round(100*e.loaded/e.total)+”%” else progress = “(“+(++progresscount)+”)” return false; //當(dāng)下載完成并且首次將應(yīng)用程序下載到緩存中時(shí)，瀏覽器會(huì)觸發(fā)“cached“事件 window.applicationCache.oncached = function(e){ status(“Thisapplication is now cached locally”); return false; //當(dāng)下載完成并將緩存中的應(yīng)用程序更新后，瀏覽器會(huì)觸發(fā)”updaterady”事件 //要注意的是：觸發(fā)此事件的時(shí)候，用戶任然可以看到老版本的應(yīng)用程序 window.applicationCache.onupdateready = function(e){ status(“Anew version has been downloaded. Reload to run it”); return false; //如果瀏覽器處于離線狀態(tài)，檢查清單列表失敗，則會(huì)觸發(fā)“error“事件 //當(dāng)一個(gè)未緩存的應(yīng)用程序引用一個(gè)不存在的清單文件，也會(huì)觸發(fā)此事件 window.applicationCache.onerror = function(e){ status(“Couldn’tload manifest or cache application”); return false; //如果一個(gè)緩存的應(yīng)用程序引用一個(gè)不存在的清單文件，會(huì)觸發(fā)“obsolete“ //同時(shí)將應(yīng)用從緩存中移除之后不會(huì)從緩存而是通過網(wǎng)絡(luò)加載資源 window.applicationCache.onobsolete = function(e){ status(“Thisapplication is no longer cached. Reload to get the latest version from thenetwork.”); return false; }
每次載入一個(gè)設(shè)置了manifest屬性的html文件，瀏覽器都會(huì)觸發(fā)”checking”事件。并通過網(wǎng)絡(luò)載入該清單文件。不過之后，會(huì)隨著
不同的情況觸發(fā)不同的事件。
事件列表：
(1).沒有可用更新
如果應(yīng)用程序已經(jīng)緩存并且清單文件沒有動(dòng)，則瀏覽器會(huì)觸發(fā)noupdate事件
(2).有可用更新
如果應(yīng)用程序已經(jīng)緩存并且清單元件有改動(dòng)，則瀏覽器會(huì)觸發(fā)downloading事件并開始下載和緩存清單文件中列舉的所有資源。
隨著下載過程的進(jìn)行瀏覽器還會(huì)觸發(fā)”progress”事件，在下載完成后，會(huì)觸發(fā)”updateready”事件。
(3).首次載入新的應(yīng)用程序
如果還未緩存應(yīng)用程序，如上所述downloading，progress事件都會(huì)觸發(fā)。但是，當(dāng)下載完成后，瀏覽器會(huì)觸發(fā)”cached”事件
而不是updateready事件
(4).瀏覽器處于離線狀態(tài)
如果瀏覽器處于離線狀態(tài)，它無法檢查清單文件，同時(shí)它會(huì)觸發(fā)“error”事件。
如果一個(gè)未緩存的應(yīng)用程序引用了不存的清單文件，瀏覽器也會(huì)觸發(fā)該事件
(5).清單文件不存在
如果瀏覽器處理在線狀態(tài)，應(yīng)用程序也已經(jīng)緩存起來，但是清單文件不存在，瀏覽器會(huì)觸發(fā)obsolete事件，并將該應(yīng)用程序
從緩存中移除。

緩存狀態(tài):
緩存的狀態(tài)可以通過window.applicationCache.status獲得，其狀態(tài)主要包括如下6種：
const unsigned short UNCACHED=0;//未緩存(應(yīng)用程序沒有設(shè)置manifest屬性：未緩存)const unsigned short IDLE=1;//空閑狀態(tài)(清單文件已經(jīng)檢查完畢，并且已經(jīng)緩存了最新的應(yīng)用程序) const unsigned short CHECKING=2;//檢查中(瀏覽器正在檢查清單文件) const unsigned short DOWNLOADING=3;//下載中(瀏覽器正在下載并緩存清單中列舉的所有文件)const unsigned short UPDATEREADY=4;//更新準(zhǔn)備中(已經(jīng)下載和緩存了最新版的應(yīng)用程序)const unsigned short OBSOLETE =5;//過期狀態(tài)(清單文件不存在，緩存將被清除) readonly attribute unsigned short status;
六、ApplicationCache對(duì)象還定義了兩個(gè)方法update()和swapCache()：
(1).update
顯式調(diào)用了更新緩存算法以檢測(cè)是否有最新版本的的應(yīng)用程序。這導(dǎo)致瀏覽器檢測(cè)同一個(gè)清單文件（并觸發(fā)相同的事件），
這和第一次載入應(yīng)用程序時(shí)的效果是一樣的。
(2).swapCache
它告訴瀏覽器可以棄用老緩存，所有的請(qǐng)求都從新緩存中獲取。注意，這并不會(huì)重新載入應(yīng)用程序：所有已經(jīng)載入的html文件
、圖片、腳本等資源都不會(huì)改變。但是，之后的請(qǐng)求將從最新的緩存中獲取。這會(huì)導(dǎo)致“版本錯(cuò)亂”的問題，因此一般不推薦使用
，除非應(yīng)用程序設(shè)計(jì)得很好，確保這樣的方式?jīng)]有問題。只有ApplicationCache.UPDATEREADY和
ApplicationCache.ABSOLETE 時(shí)調(diào)用 swapCache()才有意義（當(dāng)狀態(tài)OBSOLETE時(shí)，調(diào)用它可以立即棄用廢棄的緩存，
讓之后所有的請(qǐng)求都通過網(wǎng)絡(luò)獲?。?。如果狀態(tài)屬性是其他數(shù)值的時(shí)候調(diào)用swapCache()方法，它就會(huì)拋出異常。
七、如何判斷在線還是離線狀態(tài)？
離線web應(yīng)用指的是將自己“安裝”在應(yīng)用程序緩存中的程序，使得哪怕在瀏覽器處于離線狀態(tài)時(shí)依然可訪問它。為了在離線狀態(tài)可用，
Web應(yīng)用需要可以告知?jiǎng)e人自己是離線還是在線，同時(shí)當(dāng)網(wǎng)絡(luò)連接的狀態(tài)發(fā)生改變時(shí)候也能“感知”到。通過navigator.onLine屬性，
navigator.onLine是HTML5定義用來檢測(cè)設(shè)備是在線還是離線。對(duì)應(yīng)的值為false或true。但是不同瀏覽器表現(xiàn)并不一致。
IE 6+和Safari 5+能夠正確的檢測(cè)到網(wǎng)絡(luò)已斷開，并將navigator.onLine設(shè)為flase。
Firefox 3+和Opera 10.6+也支持navigator.onLine。但需要手動(dòng)講瀏覽器設(shè)置為脫機(jī)模式才能讓瀏覽器正常工作。
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屬性）外，其他最新瀏覽器都支持這個(gè)事件。
八、離線Web應(yīng)用實(shí)戰(zhàn)。
通過一個(gè)簡(jiǎn)單的記事本程序——PermaNote，來解釋如何使用。程序?qū)⒂脩舻奈谋颈４娴絣ocalStorage中，并且在網(wǎng)絡(luò)連接可用的時(shí)候，
將其上傳到服務(wù)器，PermaNote只允許用戶編輯單個(gè)筆記。
PermaNote應(yīng)用包含3個(gè)文件，一個(gè)應(yīng)用清單文件、一個(gè)html頁面文件，一個(gè)實(shí)現(xiàn)邏輯的js文件。
Demo: http://xuanfengge.com/demo/201506/appcache/permanote.html
①.premanote.appcache部分：
 CACHE MANIFEST# PermaNote v8permanote.htmlpermanote.jsNETWORK: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  /body  /html 

③.permanote.js部分
status()函數(shù)用于顯示狀態(tài)欄消息，save()函數(shù)將筆記本保存到服務(wù)器，sync()用于確保本地與服務(wù)器文本的同步。
應(yīng)用程序的時(shí)間處理程序解釋：
(1).onload
嘗試和服務(wù)器同步，一旦有新版本的筆記并且完成同步后，就啟用編輯器窗口。
save()和sync()函數(shù)發(fā)出HTTP請(qǐng)求，并在XMLHttpRequest對(duì)象上注冊(cè)一個(gè)onload時(shí)間處理程序來獲取上傳或者
下載完成的提醒。
(2).onbeforeunload
在未上傳前，把當(dāng)前版本的筆記數(shù)據(jù)保存到服務(wù)器上。
(3).oninput
每當(dāng)textarea輸入框內(nèi)容發(fā)生變化時(shí)，都將其內(nèi)容保存到localStorage中，并啟動(dòng)一個(gè)計(jì)時(shí)器。當(dāng)用戶停止編輯超過5秒
，將自動(dòng)把數(shù)據(jù)保存到服務(wù)器。
(4).onoffline
當(dāng)瀏覽器進(jìn)入離線狀態(tài)時(shí)，在狀態(tài)欄顯示離線消息。
(5).ononline
當(dāng)瀏覽器回到在線狀態(tài)時(shí)，同步服務(wù)器，檢查是否有新版本的數(shù)據(jù)，并且保存當(dāng)前版本的數(shù)據(jù)。
(6).onupdateready
如果新版本的應(yīng)用已緩存，則在狀態(tài)欄展示消息告知用戶。
(7).onnoupdate
如果應(yīng)用程序緩存沒有發(fā)生變化，則同時(shí)用戶仍在運(yùn)行當(dāng)前版本。
 
 
 
 
以上就是HTML5新特性之離線緩存技術(shù)-php 的詳細(xì)內(nèi)容，html教程        
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。