通過代碼示例跟我學(xué)html5相關(guān)技術(shù)——html5脫機(jī)應(yīng)用技術(shù)及實例-wenkub.com
2024-11-04 20:20 本頁面
【正文】 下面為在火狐 中的實現(xiàn)過程：進(jìn)入“工具” “選項” “高級”中選擇“網(wǎng)絡(luò)”選項卡。 } } } (online, SyncWithServer,false)。 if(allItems != ){ var items = (,)。 } // 刪除界面中的所有便簽 var list = (list)。 for(i = 0。 i++) { addDataItem(addItems[i])。 //和服務(wù)器同步添加操作 var str = (toAdd)。 } else{ str = str + , + title。 } (toAdd, str)。 function addDataItem(title){ if () { // 在線狀態(tài) addServerItem(title)。 getServerItems()函數(shù)將在后面列出。 5) “數(shù)據(jù)同步” SyncWithServer 函數(shù)是在 的最后一行注冊的，所注冊的window 的 online 事件處理函數(shù) SyncWithServer()會在 online 事件發(fā)生時將被調(diào)用。 addServerItem()將在后面列出；而如果離線，那么把數(shù)據(jù)添加到 localStorage 的“ toAdd”項中。 i++) { if([i].innerHTML == title){ ([i])。 (item)。+title+39。 // 在數(shù)據(jù)中添加 } function remove(title){ removeUIItem(title)。 function newNote(){ var title = (請輸入你所需要增加的信息 )。 4) addUIItem 函數(shù)在頁面列表中添加一項，并指明 ondblclick 事件的處理函數(shù)是 remove，使得雙擊操作可以刪除便簽。本示例的“ Cache Manifest”文件 中的內(nèi)容定義如下： CACHE MANIFEST 用戶界面代碼定義在 中 中的代碼包含添加便簽和刪除便簽的界面操作的邏輯，其中的“添加便簽”的主要流程如下： 1) 用戶點擊“增加信息”按鈕， newNote 函數(shù)被調(diào)用。 本系統(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 在頁面中聲明了一個按鈕和一個無序列表，當(dāng)按下“ New Note”按鈕時將觸發(fā)對newNote()函數(shù)的調(diào)用，它用來添加一條新的便簽。因此，開發(fā)者可以通過監(jiān)聽它們的 online/offline 事件來獲悉網(wǎng)絡(luò)狀態(tài)。因此，開發(fā) 者可以通過讀取該屬性的值來獲取網(wǎng)絡(luò)的當(dāng)前連接狀態(tài) —— 在狀態(tài)查詢的代碼中不斷地識別。 因此，為了實現(xiàn)這個功能，開發(fā)者首先必須知道瀏覽器是否在線。 在線狀態(tài)檢測 如果 Web 應(yīng)用程序僅僅是一些靜態(tài)頁面的組合，那么通過“ Cache Manifest”文件定義需要的各個緩存資源文件后， Web 系統(tǒng)就可以支持離線訪問了。是否需要重新加載更新后的版本？ 39。updateready39。 （ 3）注冊 updateready 事件的代碼示例 在 Web 頁面加載后就注冊 updateready 事件，然后在 updateready 事件的響應(yīng)函數(shù)中識別當(dāng)前的更新過程是否成功，然后提示用戶是否需要重新加載更新后的 Web 頁面?？赡艹霈F(xiàn)的錯誤如下： 1) 緩存名單返回一個 HTTP404 錯誤（頁面未找到）或者 410 錯誤（永久消失） 2) 緩存名單被找到且沒有更改，但指向名單的 HTML 頁面沒有正確下載 3) 緩存名單被找到且被更改，但瀏覽器沒有下載某個緩存名單中列出的資源 應(yīng)用 updateready 事件自動地更新本地緩存 （ 1） updateready 事件的觸發(fā)機(jī)制 如果與頁面綁定的存儲在 Web 服務(wù)器端的 manifest 文件的內(nèi)容發(fā)生變化時，并且把manifest 文件中所定義的要求更新的各個資源文件都下載到本地后將引起本地緩存的更新，從而觸發(fā) updateready 事件。 function handleCacheError(e) { alert(39。 （ 2）主要的相關(guān)事件 applicationCache 對象的更新過程所觸發(fā)的事件主要是： 1) onchecking（檢查 manifest 文件是否存在） 2) onerror（其他和離線存儲有關(guān)的錯誤） 3) onnoupdate（返回 304 表示緩存名單沒有被更改，通知瀏覽器直接使用本地文件） 4) ondownloading（檢查到有 manifest 或者 manifest 文件已更新就執(zhí)行下載操作，開始重新下載緩存名單中列出的每個資源文件） 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 10/19 頁 10 5) onprogress（下載的時候周期性的觸發(fā)，可以通過它獲取已經(jīng)下載的文件個數(shù)和多少文件仍然處于下載隊列等信息） 6) onupdateready（緩存名單中所有列出的資源被成功重新下載后，新版本的離線網(wǎng)絡(luò)應(yīng)用程序被完整緩存并以備離線使用的標(biāo)志） 7) oncached（離線網(wǎng)絡(luò)應(yīng)用程序被完整緩存成功，可以在離線狀態(tài)下被使用） 8) onobsolete（未找到文件，返回 404 或者 401 時候觸發(fā)） （ 3）對更新過程進(jìn)行監(jiān)控和處理各種異常 var appCache = 。因此可以使用 . swapCache()函數(shù)更新到最新的緩存，這個不會使得之前加載的資源突然被重新加載。示例代碼如下： if( == )｛ “ Cache Manifest”文件的存儲位置 的擴(kuò)展名 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 9/19 頁 9 ()。 （ 1）自動更新 瀏覽器除了在第一次訪問 Web 應(yīng)用時緩存資源外，只會在“ Cache Manifest”文件本身的內(nèi)容發(fā)生變化時才會更新緩存中的對應(yīng)的資源文件；但如果僅僅是“ Cache Manifest”文件中的相關(guān)資源文件發(fā)生變化瀏覽器并不會立即觸發(fā)更新行為 —— 比如開發(fā)人員修改了系統(tǒng)中的相關(guān)圖片資源或更改了 JavaScript 程序代碼，這些更改不會導(dǎo)致重新緩存，此時則需要在應(yīng)用程序中通過代碼等方式手動 觸發(fā)更新或者通過修改“ Cache Man
教學(xué)課件相關(guān)推薦
鄂ICP備17016276號-1