離線快取是html5新特性之一,簡單理解就是第一次載入後將資料快取,在沒有清除快取前提下,下一次沒有網路也可以載入,用在靜態資料的網頁或遊戲比較好用。當然,html5新的特性都不是所有瀏覽器都能支援的,離線快取也一樣。反正ie9(包括)及ie9以下的瀏覽器目前是不支援的。如果用在移動端,應該都能支援。檢測是否支援離線快取也是比較簡單的。
使用起來也很簡單。①:首先要引入manifest檔案。
doctype html②:引入完了之後,接下來就是test.mainfest檔案**的編寫了。>
//就是在這裡引入,注意引入也是講究路勁跟檔名的,這裡檔名是test,字尾是mainfest,路勁在當前的html下面(一般放在html當前資料夾下面也沒什麼問題,我是這麼放的)
<
head
>
<
meta
charset
="utf-8"
>
<
title
>document
title
>
head
>
<
body
>
body
>
html
>
解析一下:以#開頭的行表示的是注釋。cache下面的都是快取的檔案,network表示每次都從網路請求,然後快取,指定的檔案總是從網路上請求最新的。fallback:指定的檔案若是找不到,會被重定向到新的位址。規範都是大寫。
目前為止就實現了離線快取,再也不用擔心第二次開啟還耗費流量了,用在靜態的手機網頁或是遊戲比較好用。
0 === 未快取
1 === 空閒(快取為最新狀態)
2 === 檢查中
4 === 更新就緒
5 === 快取過期
switch
uncached == 0
return 'uncached';
break
;
idle == 1
return 'idle';
break
;
checking == 2
return 'checking';
break
;
downloading == 3
return 'downloading';
break
;
updateready == 4
return 'updateready';
break
;
obsolete == 5
return 'obsolete';
break
;
default
:
return 'uknown cache status';
break
; };
⑤:介紹一下快取相關的事件。1、updateready事件:當有新的快取,並更新完以後,會觸發此事件。
例如**:
(),false);
(),false);
3、其他事件:
checking事件:正在檢查
updatereadey事件:更新完成
obsolete事件:快取過期
cached事件:空閒,快取為最新狀態
error事件:報錯
noupdate事件:檢查更新結束,沒有需要更新。
HTML5離線快取
它的優勢在於 ie10以下不支援,其餘的瀏覽器都支援。補充瀏覽器及其核心 ie trident ff gecko chrome blink opera blink 曾經使用presto safari webkit timepara getdatetime 獲取日期和時間 logo.png width...
html5 離線快取
本文將介紹離線快取的方方面面,並在最後會介紹一下關於自動化的問題。html5之前的網頁,都是無連線,必須聯網才能訪問,這其實也是web的特色,這其實對於pc是時代問題並不大,但到了移動網際網路時代,裝置終端位置不再固定,依賴無線訊號,網路的可靠性變得降低,比如坐在火車上,過了乙個隧道 15分鐘 便無...
html5的離線快取
html5 引入了應用程式快取,這意味著web應用可以進行快取,並且可以在沒有網路連線的時候進行訪問。1 離線瀏覽 使用者可以在應用離線時使用它們 2 速度更快 已快取資源,載入得更快 有乙個web應用有三個檔案index.html,a.js,b.css,現在需要把js和css檔案快取起來 1.在i...