通過代碼示例跟我學(xué)html5相關(guān)技術(shù)——html5脫機(jī)應(yīng)用技術(shù)及實(shí)例-文庫吧在線文庫
【正文】 Manifest”文件定義需要的各個(gè)緩存資源文件后， Web 系統(tǒng)就可以支持離線訪問了。因此，開發(fā) 者可以通過讀取該屬性的值來獲取網(wǎng)絡(luò)的當(dāng)前連接狀態(tài) —— 在狀態(tài)查詢的代碼中不斷地識(shí)別。 本系統(tǒng)的首頁面的源文件是 ，代碼示例如下： 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 13/19 頁 13 html manifest= head titleNote List/title /head body onload = SyncWithServer() input type=button value=增加信息 onclick=newNote() ul id=list/ul /body /html 在頁面中聲明了一個(gè)按鈕和一個(gè)無序列表，當(dāng)按下“ New Note”按鈕時(shí)將觸發(fā)對(duì)newNote()函數(shù)的調(diào)用，它用來添加一條新的便簽。 4) addUIItem 函數(shù)在頁面列表中添加一項(xiàng)，并指明 ondblclick 事件的處理函數(shù)是 remove，使得雙擊操作可以刪除便簽。 // 在數(shù)據(jù)中添加 } function remove(title){ removeUIItem(title)。 (item)。 addServerItem()將在后面列出；而如果離線，那么把數(shù)據(jù)添加到 localStorage 的“ toAdd”項(xiàng)中。 getServerItems()函數(shù)將在后面列出。 } (toAdd, str)。 //和服務(wù)器同步添加操作 var str = (toAdd)。 for(i = 0。 if(allItems != ){ var items = (,)。下面為在火狐 中的實(shí)現(xiàn)過程：進(jìn)入“工具” “選項(xiàng)” “高級(jí)”中選擇“網(wǎng)絡(luò)”選項(xiàng)卡。 } } } (online, SyncWithServer,false)。 } // 刪除界面中的所有便簽 var list = (list)。 i++) { addDataItem(addItems[i])。 } else{ str = str + , + title。 function addDataItem(title){ if () { // 在線狀態(tài) addServerItem(title)。 5) “數(shù)據(jù)同步” SyncWithServer 函數(shù)是在 的最后一行注冊(cè)的，所注冊(cè)的window 的 online 事件處理函數(shù) SyncWithServer()會(huì)在 online 事件發(fā)生時(shí)將被調(diào)用。 i++) { if([i].innerHTML == title){ ([i])。+title+39。 function newNote(){ var title = (請(qǐng)輸入你所需要增加的信息 )。本示例的“ Cache Manifest”文件 中的內(nèi)容定義如下： CACHE MANIFEST 用戶界面代碼定義在 中 中的代碼包含添加便簽和刪除便簽的界面操作的邏輯，其中的“添加便簽”的主要流程如下： 1) 用戶點(diǎn)擊“增加信息”按鈕， newNote 函數(shù)被調(diào)用。因此，開發(fā)者可以通過監(jiān)聽它們的 online/offline 事件來獲悉網(wǎng)絡(luò)狀態(tài)。 因此，為了實(shí)現(xiàn)這個(gè)功能，開發(fā)者首先必須知道瀏覽器是否在線。是否需要重新加載更新后的版本？ 39。 （ 3）注冊(cè) updateready 事件的代碼示例 在 Web 頁面加載后就注冊(cè) updateready 事件，然后在 updateready 事件的響應(yīng)函數(shù)中識(shí)別當(dāng)前的更新過程是否成功，然后提示用戶是否需要重新加載更新后的 Web 頁面。 function handleCacheError(e) { alert(39。因此可以使用 . swapCache()函數(shù)更新到最新的緩存，這個(gè)不會(huì)使得之前加載的資源突然被重新加載。 （ 1）自動(dòng)更新 瀏覽器除了在第一次訪問 Web 應(yīng)用時(shí)緩存資源外，只會(huì)在“ Cache Manifest”文件本身的內(nèi)容發(fā)生變化時(shí)才會(huì)更新緩存中的對(duì)應(yīng)的資源文件；但如果僅僅是“ Cache Manifest”文件中的相關(guān)資源文件發(fā)生變化瀏覽器并不會(huì)立即觸發(fā)更新行為 —— 比如開發(fā)人員修改了系統(tǒng)中的相關(guān)圖片資源或更改了 JavaScript 程序代碼，這些更改不會(huì)導(dǎo)致重新緩存，此時(shí)則需要在應(yīng)用程序中通過代碼等方式手動(dòng) 觸發(fā)更新或者通過修改“ Cache Manifest”文件的內(nèi)容而產(chǎn)生自動(dòng)觸發(fā)更新的效果。 如果在頁面的 html標(biāo)簽內(nèi)不包含有 manifest 屬性，瀏覽器就不會(huì)緩存該頁面（除非該頁面已經(jīng)在“ Cache Manifest”清單文件中明確定義了）。 （ 6）引用 清單文件 要啟用某個(gè)應(yīng)用的應(yīng)用緩存，請(qǐng)?jiān)谖臋n的 html 標(biāo)記中添加 manifest 屬性以引用 清單文件。 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 6/19 頁 6 在本示例的 中聲明了本示例中 3 個(gè)需要緩存的資源文件：“ ”、“ ”和“ ”。 （ 2） 頁面文件中的內(nèi)容 !DOCTYPE HTML html head titleClock/title link rel=stylesheet href= /head body pThe time is: output id=clock/output/p /body /html （ 3） 樣式單文件中的內(nèi)容 output{ font:2em sansserif。其后的每一行包含兩個(gè) URI 并由空格分隔，當(dāng)?shù)谝粋€(gè) URI 不可訪問時(shí)，瀏覽器將嘗試使用第二個(gè) URI。 （ 3）本地?cái)?shù)據(jù)存儲(chǔ) 離線時(shí)，需要能夠把數(shù)據(jù)存儲(chǔ)到本地（客戶所在的計(jì)算機(jī)中），以便在線時(shí)同步到服務(wù)器上。 （ 3）使用 HTML5 離線緩存技術(shù)的主要優(yōu)點(diǎn) 1) 離線瀏覽：用戶可在離線時(shí)瀏覽您的完整網(wǎng)站 2) 速度：緩存資源為本地資源，因此加載速度較快。目前所有的主流的瀏覽器都有緩存機(jī)制，但它們?cè)趯?shí)際應(yīng)用中表現(xiàn)出很不可靠，也不一定總能起到預(yù)期的作用。 這種機(jī)制不僅提高了瀏覽的速度，而且也有助于減少服務(wù)器的負(fù)載，因?yàn)殡x線應(yīng)用只加載被修改過的資源。在 HTML5 中，主要通過在“ Cache Manifest”文件中指明需要緩存的資源文件名稱。 （ 2）“ Cache Manifest”文件的 語法格式要求 1) 首行必須是 CACHE MANIFEST，它標(biāo)識(shí)這是 manifest 的配置文件； 2) 其后，每一行列出一個(gè)需要緩存的資源文件名，而且文件名是區(qū)分大小寫的； 3) 可根據(jù)應(yīng)用的需要列出在線訪問的白名單（也就是只能在網(wǎng)絡(luò)連接的狀態(tài)下才能使用的資源文件名單），但白名單中的所有資源不會(huì)被緩存，在使用時(shí)將直接在線訪問。 imag
教學(xué)課件相關(guān)推薦
鄂ICP備17016276號(hào)-1