HTML5 applicationCache javascript Events

image

利用 manifest 可以做到 application cache 在頁面載入的時候,瀏覽器就會先確定 manifest 中每個文件是不是都已經存在 application cache 裡面,上面的畫面就是 chrome 在確認的時候 console 顯示的資訊。

appCache = window.applicationCache;
appCache.addEventListener('cached', handleCacheEvent, false);
appCache.addEventListener('checking', handleCacheEvent, false);
appCache.addEventListener('downloading', handleCacheEvent, false);
appCache.addEventListener('error', handleCacheError, false);
appCache.addEventListener('noupdate', handleCacheEvent, false);
appCache.addEventListener('obsolete', handleCacheEvent, false);
appCache.addEventListener('progress', handleCacheEvent, false);
appCache.addEventListener('updateready', handleCacheEvent, false);

IE7,8 在 addEventListener 會沒有第三個參數,不過反正 IE 7,8 也不支援 application cache ….

checking

每次重新載入頁面都會觸發這個 event ,檢查 application cache 的檔案

downloading

manifest 檔案有被修改過,開始下載前觸發

progress

下載檔案的時候觸發,注意的是每下載完一個檔案就會觸發一次喔

cached

檔案全部被 cache 了,但是這個事件是第一次進入的時候 cache 完成發生的。

noupdate

manifest 檔案沒有修改過

updateready

不是第一次進入這個頁面,manifest 有修改過,而且下載已經完成,cached,noupdate,updateready 都是 application cache 沒有發生異常的狀況下最後一個事件。

obsolete

如果 manifest 檔案回傳給你 404 或 410 就會發生這個 event

Error

就是發生錯誤的時候囉,瀏覽器在一開始確認跟最後的時候都會確認 manifest 檔案。之前就發生過一個狀況是因為我不想要每次測試都修改 manifest 檔案,所以就讓 manifest 動態產生,再給他一個 # 加上 Datetime.Now.ToString,結果每次都錯誤,因為瀏覽器在第一次 checking 跟最後確認的時候取得的 manifest 檔案是不一樣的。

另外 manifest 檔案的 MIME 必須是 text/cache-manifest 而且編碼是 UTF-8,如果適用 IIS Server 就必須在 IIS 下的 MIME 額外去設定附檔名對應,預設副檔名 manifest 對應的是 application/x-ms-manifest ,目前看起來針對 application 的 manifest 似乎也沒有公認的副檔名,各家網站設定也都不一樣,反正只要回傳的 MIME 是 text/cache-manifest 就 OK 了


6.6 Offline Web applications — HTML Standard

HTML5 Rocks – A Beginner’s Guide to Using the Application Cache

Using HTML5 Offline Application Cache Events In Javascript

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *