if (window.application Cache ) { // this browser supports offline applications }
2.在線、離線的狀態(tài)檢測(cè)和事件
// When the page loads, set the status to online or offline function loadDemo() { if (navigator.onLine) { log("Online"); } else { log("Offline"); } } // Now add event list eners to notify a change in online status window.addEventListener("online", function(e) { log("Online"); }, true); window.addEventListener("offline", function(e) { log("Offline"); }, true);
3.manifest
要使用離線功能,需要指定哪些資源離線緩存,這通過<html>標(biāo)記的manifest屬性指定一個(gè)以.manifest為擴(kuò)展名的清單文件,需要離線緩存的資源、不要緩存的資源以及失敗的請(qǐng)求替換頁都在清單文件中列出。并且,清單文件的MIME類型必須是text/cache-manifest,這個(gè)MIME類型要從服務(wù)器端進(jìn)行定義。清單的第一行不能為注釋。
失敗請(qǐng)求部分包括兩個(gè)方面,第一個(gè)是要請(qǐng)求的內(nèi)容,可以為文件夾;第二個(gè)是請(qǐng)求失敗的替換內(nèi)容。
如果需要更新緩存,只要更新清單文件,瀏覽器就會(huì)自動(dòng)更新所有緩存。但是,前提是清單文件不被緩存(默認(rèn)情況下會(huì)被緩存),可以通過修改服務(wù)器的緩存設(shè)置來解決此問題。
示例如下:
CACHE MANIFEST
# 井號(hào)行為注釋。下面的“CACHE:”可以省略
CACHE:
# file s to cache about.html html5 .css index.html happy-trails-rc.gif lake-tahoe.JPG
#do not cache signup page
#可以使用一個(gè)星號(hào)(*),這樣,所有未被顯式緩存的資源都不會(huì)被緩存
NETWORK
signup.html
FALLBACK signup.html offline.html /app/ajax/ default.html media/ images/video-fallback.jpg / /offline.html
4.applicationCache對(duì)象
window.applicationCache對(duì)象是Web離線應(yīng)用API的核心對(duì)象,它包括緩存狀態(tài)屬性 window.applicationCache.status和一些與緩存狀態(tài)相關(guān)的事件屬性。
5.緩存狀態(tài)與事件
window.applicationCache.status有六種值,如下:
?0( UNCACHED ):對(duì)應(yīng)oncached事件屬性,沒有緩存
?1( IDLE ):對(duì)應(yīng)oncached事件屬性,所有緩存清單中的資源處于緩存狀態(tài)。
?2( CHECKING ):對(duì)應(yīng)onchecking事件屬性,檢查緩存。
?3( DOWNLOADING ):對(duì)應(yīng)ondownloading事件屬性,下載緩存。
?4( UPDATEREADY ):對(duì)應(yīng)onupdateready事件屬性,準(zhǔn)備更新緩存。
?5( OBSOLETE ):對(duì)應(yīng)onobsolete事件屬性,某個(gè)資源已緩存,但清單中沒有。
另有三個(gè)事件屬性:
?onerror:產(chǎn)生錯(cuò)誤。
?onnoupdate:沒有可用更新。
?onprogress:正在更新緩存。
6.window.applicationCache.update()方法
調(diào)用該方法請(qǐng)求瀏覽器更新緩存,包括檢查新版本的清單文件和下載必要地新資源。如果沒有緩存,或緩存已廢棄,則將產(chǎn)生錯(cuò)誤。