HTML5離(lí)線緩存又(yòu)名Application Cache，是從浏覽器的緩存中(zhōng)分(fēn)出來的一(yī)塊緩存區，要想在這個緩存中(zhōng)保存數據，可以使用一(yī)個描述文件（manifest file），列出要下(xià)載和緩存的資(zī)源。src="static/picture/20170711122112.jpg"src="static/picture/20170711122112.jpg"src="static/picture/20170711122112.jpg"
Manifest 文件
manifest 文件是簡單的文本文件，它告知(zhī)浏覽器被緩存的内容（以及不緩存的内容）。
manifest 文件可分(fēn)爲三個部分(fēn)：
CACHE MANIFEST - 在此标題下(xià)列出的文件将在首次下(xià)載後進行緩存
NETWORK - 在此标題下(xià)列出的文件需要與服務器的連接，且不會被緩存
FALLBACK - 在此标題下(xià)列出的文件規定當頁面無法訪問時的回退頁面（比如 404 頁面）
相關JavaScript API
核心是applicationCache對象，有個status屬性，表示應用緩存的當前狀态：
0（UNCACHED） : 無緩存， 即沒有與頁面相關的應用緩存
1（IDLE） : 閑置，即應用緩存未得到更新
2 （CHECKING） : 檢查中(zhōng)，即正在下(xià)載描述文件并檢查更新
3 （DOWNLOADING） : 下(xià)載中(zhōng)，即應用緩存正在下(xià)載描述文件中(zhōng)指定的資(zī)源
4 （UPDATEREADY） : 更新完成，所有資(zī)源都已下(xià)載完畢
5 （IDLE） : 廢棄，即應用緩存的描述文件已經不存在了，因此頁面無法再訪問應用緩存
相關的事件
表示應用緩存狀态的改變：
checking : 在浏覽器爲應用緩存查找更新時觸發
error : 在檢查更新或下(xià)載資(zī)源期間發送錯誤時觸發
noupdate : 在檢查描述文件發現文件無變化時觸發
downloading : 在開(kāi)始下(xià)載應用緩存資(zī)源時觸發
progress：在文件下(xià)載應用緩存的過程中(zhōng)持續不斷地下(xià)載地觸發
updateready : 在頁面新的應用緩存下(xià)載完畢觸發
cached : 在應用緩存完整可用時觸發
浏覽器支持
IE10+、Firefox3+、Safari4+、Opera10.6、Chrome、iOS3.2+、Android Webkit
注意事項
1. manifest文件需要配置正确的MIME-type，即 "text/cache-manifest"，必須在web服務器上進行配置
例如Tomcat，需要修改web.xml文件，添加如下(xià)：
<mime-mapping>
<extension>manifest</extension>
<mime-type>text/cache-manifest</mime-type>
</mime-mapping>
2. 更新完版本後，必須刷新一(yī)次才會啓動新版本（會出現重刷一(yī)次頁面的情況）
所以頁面需要加上這js，監聽(tīng)到版本更新後，刷新頁面：
applicationCache.addEventListener('updateready', function(e) {
if (applicationCache.status == applicationCache.UPDATEREADY) {
applicationCache.swapCache(); //使用新版本資(zī)源
window.location.reload(); //刷新頁面
}
}, false);
3. 浏覽器對緩存數據的容量限制可能不太一(yī)樣（某些浏覽器設置的限制是每個站點 5MB）。
4. 浏覽器會自動緩存引用manifest文件的HTML文件，這就導緻如果改了HTML内容，也需要更新版本才能做到更新。
5. 當一(yī)個資(zī)源被緩存後，該浏覽器直接請求這個絕對路徑也會訪問緩存中(zhōng)的資(zī)源，其他頁面即使沒有設置manifest屬性，請求的資(zī)源如果在緩存中(zhōng)也從緩存中(zhōng)訪問。
6. 如果manifest文件，或者内部列舉的某一(yī)個文件不能正常下(xià)載，整個更新過程将視爲失敗，浏覽器繼續全部使用老的緩存。
離(lí)線緩存優點
1. 減少服務器負載，提高資(zī)源加載速度
2. 離(lí)線浏覽，用戶可在應用離(lí)線時使用
離(lí)線緩存缺點
1. 更新完版本後，必須刷新一(yī)次才會啓動新版本（會出現重刷一(yī)次頁面的情況）
2. 進入離(lí)線存儲的頁面，如果不更新版本，是會将其當成靜态頁面不請求。
3. 無法進行灰度發布等策略。
PS：灰度發布，一(yī)部分(fēn)使用舊(jiù)版，一(yī)部分(fēn)人用新版。
4. 無法增量更新。
PS：少量代碼修改，全量更新。
離(lí)線緩存與傳統浏覽器緩存區别
1. 離(lí)線緩存是針對整個應用，浏覽器緩存是單個文件
2. 離(lí)線緩存斷網了還是可以打開(kāi)頁面，浏覽器緩存不行
3. 離(lí)線緩存可以主動通知(zhī)浏覽器更新資(zī)源
離(lí)線緩存示例
manifest
CACHE MANIFEST
#v1.0.1
CACHE:
js/app.js
css/app.css
NETWORK:
*
FALLBACK:
404.html
demo.html
<!DOCTYPE html>
<html manifest="app.manifest">
<head>
<title>Demo</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/app.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/demo.js"></script>
</head>
<script>
applicationCache.addEventListener('updateready', function(e) {
if (applicationCache.status == applicationCache.UPDATEREADY) {
applicationCache.swapCache(); //使用新版本資(zī)源
window.location.reload(); //刷新頁面
}
}, false);
</script>
<body>
俯首江左有梅郎~
</body>
</html>
app.css
body {color: blue;}
demo.css
body {font-size: 60px;}
app.js
alert('我(wǒ)(wǒ)是app.js');
demo.js
alert('我(wǒ)(wǒ)是demo.js');
示例效果
本地直接打開(kāi)沒有效果的，離(lí)線緩存是無效的。
部署在Web服務器，第一(yī)次訪問：
第二次訪問：
Manifest 文件
manifest 文件是簡單的文本文件，它告知(zhī)浏覽器被緩存的内容（以及不緩存的内容）。
manifest 文件可分(fēn)爲三個部分(fēn)：
CACHE MANIFEST - 在此标題下(xià)列出的文件将在首次下(xià)載後進行緩存
NETWORK - 在此标題下(xià)列出的文件需要與服務器的連接，且不會被緩存
FALLBACK - 在此标題下(xià)列出的文件規定當頁面無法訪問時的回退頁面（比如 404 頁面）
相關JavaScript API
核心是applicationCache對象，有個status屬性，表示應用緩存的當前狀态：
0（UNCACHED） : 無緩存， 即沒有與頁面相關的應用緩存
1（IDLE） : 閑置，即應用緩存未得到更新
2 （CHECKING） : 檢查中(zhōng)，即正在下(xià)載描述文件并檢查更新
3 （DOWNLOADING） : 下(xià)載中(zhōng)，即應用緩存正在下(xià)載描述文件中(zhōng)指定的資(zī)源
4 （UPDATEREADY） : 更新完成，所有資(zī)源都已下(xià)載完畢
5 （IDLE） : 廢棄，即應用緩存的描述文件已經不存在了，因此頁面無法再訪問應用緩存
相關的事件
表示應用緩存狀态的改變：
checking : 在浏覽器爲應用緩存查找更新時觸發
error : 在檢查更新或下(xià)載資(zī)源期間發送錯誤時觸發
noupdate : 在檢查描述文件發現文件無變化時觸發
downloading : 在開(kāi)始下(xià)載應用緩存資(zī)源時觸發
progress：在文件下(xià)載應用緩存的過程中(zhōng)持續不斷地下(xià)載地觸發
updateready : 在頁面新的應用緩存下(xià)載完畢觸發
cached : 在應用緩存完整可用時觸發
浏覽器支持
IE10+、Firefox3+、Safari4+、Opera10.6、Chrome、iOS3.2+、Android Webkit
注意事項
1. manifest文件需要配置正确的MIME-type，即 "text/cache-manifest"，必須在web服務器上進行配置
例如Tomcat，需要修改web.xml文件，添加如下(xià)：
<mime-mapping>
<extension>manifest</extension>
<mime-type>text/cache-manifest</mime-type>
</mime-mapping>
2. 更新完版本後，必須刷新一(yī)次才會啓動新版本（會出現重刷一(yī)次頁面的情況）
所以頁面需要加上這js，監聽(tīng)到版本更新後，刷新頁面：
applicationCache.addEventListener('updateready', function(e) {
if (applicationCache.status == applicationCache.UPDATEREADY) {
applicationCache.swapCache(); //使用新版本資(zī)源
window.location.reload(); //刷新頁面
}
}, false);
3. 浏覽器對緩存數據的容量限制可能不太一(yī)樣（某些浏覽器設置的限制是每個站點 5MB）。
4. 浏覽器會自動緩存引用manifest文件的HTML文件，這就導緻如果改了HTML内容，也需要更新版本才能做到更新。
5. 當一(yī)個資(zī)源被緩存後，該浏覽器直接請求這個絕對路徑也會訪問緩存中(zhōng)的資(zī)源，其他頁面即使沒有設置manifest屬性，請求的資(zī)源如果在緩存中(zhōng)也從緩存中(zhōng)訪問。
6. 如果manifest文件，或者内部列舉的某一(yī)個文件不能正常下(xià)載，整個更新過程将視爲失敗，浏覽器繼續全部使用老的緩存。
離(lí)線緩存優點
1. 減少服務器負載，提高資(zī)源加載速度
2. 離(lí)線浏覽，用戶可在應用離(lí)線時使用
離(lí)線緩存缺點
1. 更新完版本後，必須刷新一(yī)次才會啓動新版本（會出現重刷一(yī)次頁面的情況）
2. 進入離(lí)線存儲的頁面，如果不更新版本，是會将其當成靜态頁面不請求。
3. 無法進行灰度發布等策略。
PS：灰度發布，一(yī)部分(fēn)使用舊(jiù)版，一(yī)部分(fēn)人用新版。
4. 無法增量更新。
PS：少量代碼修改，全量更新。
離(lí)線緩存與傳統浏覽器緩存區别
1. 離(lí)線緩存是針對整個應用，浏覽器緩存是單個文件
2. 離(lí)線緩存斷網了還是可以打開(kāi)頁面，浏覽器緩存不行
3. 離(lí)線緩存可以主動通知(zhī)浏覽器更新資(zī)源
離(lí)線緩存示例
manifest
CACHE MANIFEST
#v1.0.1
CACHE:
js/app.js
css/app.css
NETWORK:
*
FALLBACK:
404.html
demo.html
<!DOCTYPE html>
<html manifest="app.manifest">
<head>
<title>Demo</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/app.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/demo.js"></script>
</head>
<script>
applicationCache.addEventListener('updateready', function(e) {
if (applicationCache.status == applicationCache.UPDATEREADY) {
applicationCache.swapCache(); //使用新版本資(zī)源
window.location.reload(); //刷新頁面
}
}, false);
</script>
<body>
俯首江左有梅郎~
</body>
</html>
app.css
body {color: blue;}
demo.css
body {font-size: 60px;}
app.js
alert('我(wǒ)(wǒ)是app.js');
demo.js
alert('我(wǒ)(wǒ)是demo.js');
示例效果
本地直接打開(kāi)沒有效果的，離(lí)線緩存是無效的。
部署在Web服務器，第一(yī)次訪問：
第二次訪問：
475003427