通過代碼示例跟我學html5相關技術——html5脫機應用技術及實例(編輯修改稿)
2024-12-14 20:20 本頁面
【文章內容簡介】 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權所有，盜版必究 ， 8/19 頁 8 xmlns= xmlns:web= xsi:schemaLocation= version= mimemapping extensionmanifest /extension mimetypetext/cachemanifest/mimetype /mimemapping welefilelist welefile/welefile /welefilelist /webapp 更新緩存 應用程序可以等待瀏覽器自動更新緩存，也可以使用 Javascript 接口手動觸發(fā)更新。 （ 1）自動更新 瀏覽器除了在第一次訪問 Web 應用時緩存資源外，只會在“ Cache Manifest”文件本身的內容發(fā)生變化時才會更新緩存中的對應的資源文件；但如果僅僅是“ Cache Manifest”文件中的相關資源文件發(fā)生變化瀏覽器并不會立即觸發(fā)更新行為 —— 比如開發(fā)人員修改了系統(tǒng)中的相關圖片資源或更改了 JavaScript 程序代碼，這些更改不會導致重新緩存，此時則需要在應用程序中通過代碼等方式手動 觸發(fā)更新或者通過修改“ Cache Manifest”文件的內容而產生自動觸發(fā)更新的效果。 比如，可以在“ Cache Manifest”文件添加注釋文件的版本或者修改其中的版本號達到“ Cache Manifest”文件被修改的效果。該方法不僅可以很明確地區(qū)分離線 Web 應用的版本，而且還可以輕易地通知瀏覽器更新緩存中的相關資源文件 —— 要表明一個新的清單文件，只需更改現有清單文件的部分或全部內容。 （ 2）手動更新 開發(fā)者可以使用 的接口更新緩存，此時需要檢測其中的一 個status 屬性的值 （ ），如果其值是 UPDATEREADY，那么可以調用 ()函數更新緩存。示例代碼如下： if( == )｛ “ Cache Manifest”文件的存儲位置 的擴展名 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權所有，盜版必究 ， 9/19 頁 9 ()。 ｝ 通過調用 ()函數使得瀏覽器開始嘗試更新的行為，但前提是“ Cache Manifest”文件是更新過的（比如前面所說的修改版本號）。其中的 status 有五種無符號的短整型值的狀態(tài)： 1) UNCACHED = 0，此時 applicationCache 對象的緩存宿主與應用緩存無關聯(lián)； 2) IDLE = 1，應用緩存已經是最新的，并且沒有標記為 obsolet； 3) CHECKING = 2， applicationCache 對象的緩存宿主已經和一個應用緩存關聯(lián)，并且該緩存的更新狀態(tài)是 checkin； 4) DOWNLOADING = 3， applicationCache 對象的緩存宿主已經和一個應用緩存關聯(lián)，并且該緩存的更新狀態(tài)是 downloadin； 5) UPDATEREADY = 4， applicationCache 對象的緩存宿主已經和一個應用緩存關聯(lián)，并且該緩存的更新狀態(tài)是 idle，并且沒有標記為 obsolete，但是緩存不是最新的； 6) OBSOLETE = 5， applicationCache 對象的緩存宿主已經和一個應用緩存關聯(lián)，并且該緩存的更新狀態(tài)是 obsolete。 但 update()函數會調用當前應用資源下載的過程，可能會出現重復下載資源文 件。因此可以使用 . swapCache()函數更新到最新的緩存，這個不會使得之前加載的資源突然被重新加載。圖片不會重新加載，樣式和腳本也不會重新渲染或解析，唯一的變化是在此之后發(fā)出請求頁面的資源是最新的。 緩存更新過程中的相關事件 （ 1）緩存新過程中的相關事件 applicationCache 對象再更新緩存的過程中會觸發(fā)各種事件。從而可以實現對更新過程進行監(jiān)控和處理各種異常、提示等待狀態(tài)等行為以提高用戶的體驗。 （ 2）主要的相關事件 applicationCache 對象的更新過程所觸發(fā)的事件主要是： 1) onchecking（檢查 manifest 文件是否存在） 2) onerror（其他和離線存儲有關的錯誤） 3) onnoupdate（返回 304 表示緩存名單沒有被更改，通知瀏覽器直接使用本地文件） 4) ondownloading（檢查到有 manifest 或者 manifest 文件已更新就執(zhí)行下載操作，開始重新下載緩存名單中列出的每個資源文件） 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權所有，盜版必究 ， 10/19 頁 10 5) onprogress（下載的時候周期性的觸發(fā)，可以通過它獲取已經下載的文件個數和多少文件仍然處于下載隊列等信息） 6) onupdateready（緩存名單中所有列出的資源被成功重新下載后，新版本的離線網絡應用程序被完整緩存并以備離線使用的標志） 7) oncached（離線網絡應用程序被完整緩存成功，可以在離線狀態(tài)下被使用） 8) onobsolete（未找到文件，返回 404 或者 401 時候觸發(fā)） （ 3）對更新過程進行監(jiān)控和處理各種異常 var appCache = 。 /** 請求 manifest 文件時返回 404 或 410 下載失敗或 manifest 文件在下載過程中源文件被修改會觸發(fā) error 事件 */ (39。error39。, handleCacheError, false)。 function handleCacheError(e) { alert(39。不能正確地更新緩存！ 39。)。 } 不管是 manifest 文件還是它所羅列的資源文件下載失敗，整個更新過程就終止了，瀏覽器會使用上一個最新的緩存?？赡艹霈F的錯誤如下： 1) 緩存名單返回一個 HTTP404 錯誤（頁面未找到）或者 410 錯誤（永久消失） 2) 緩存名單被找到且沒有更改，但指向名單的 HTML 頁面沒有正確下載 3) 緩存名單被找到且被更改，但瀏覽器沒有下載某個緩存名單中列出的資源 應用 updateready 事件自動地更新本地緩存 （ 1） updateready 事件的觸發(fā)機制 如果與頁面綁定的存儲在 Web 服務器端的 manifest 文件的內容發(fā)生變化時，并且把manifest 文件中所定義的要求更新的各個資源文件都下載到本地后將引起本地緩存的更新，從而觸發(fā) updateready 事件。因此，可以在 updateready 事件中編寫代碼，實時監(jiān)測本地緩存是否完成更新的信息。 （ 2）如何定義 updateready 事件 當 Web 頁面加載時，可以為
教學課件相關推薦
鄂ICP備17016276號-1