2018-4-19 seo達(dá)人
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
HTML5引入了應(yīng)用程序緩存，意味web應(yīng)用可以進(jìn)行緩存，在沒(méi)有網(wǎng)絡(luò)的情況下使用
應(yīng)用程序緩存為應(yīng)用帶來(lái)的三大優(yōu)勢(shì)：
離線訪問(wèn)應(yīng)用
速度更快——已緩存資源加載的更快
減少服務(wù)器負(fù)載——瀏覽器只從服務(wù)器下載更新過(guò)或更改過(guò)的資源
瀏覽器支持情況：主流瀏覽器都支持，IE要10以上的版本
HTML5通過(guò)在html文件添加manifest屬性，啟用應(yīng)用程序緩存
例子：
<!DOCTYPE HTML>
<htmlmanifest="demo.appcache">
...
</html>
每個(gè)指定了 manifest 的頁(yè)面在用戶(hù)對(duì)其訪問(wèn)時(shí)都會(huì)被緩存。如果未指定 manifest 屬性，則頁(yè)面不會(huì)被緩存（除非在 manifest 文件中直接指定了該頁(yè)面）。
manifest 文件的建議的文件擴(kuò)展名是：".appcache"。
manifest 文件需要配置正確的 MIME-type，即 "text/cache-manifest"。必須在 web 服務(wù)器上進(jìn)行配置。
Mainifest文件
manifest 文件是簡(jiǎn)單的文本文件，它告知瀏覽器被緩存的內(nèi)容（以及不緩存的內(nèi)容）。
例子：
CACHE MANIFEST
# 2012-02-21 v1.0.0
CACHE:
cached.js
cached.css
NETWORK:
uncached.js
uncached.css
FALLBACK:
index.html 404.html
CACHE MANIFEST 寫(xiě)在manifest文件開(kāi)頭，是必須的
CACHE作用是標(biāo)識(shí)出哪些文件需要緩存，可以是相對(duì)路徑也可以是絕對(duì)路徑
NETWORK可選，這一部分是要直接讀取的文件，可以使用通配符 * 。
FALLBACK可選，指定了一個(gè)后備頁(yè)面，當(dāng)資源無(wú)法訪問(wèn)時(shí)，瀏覽器會(huì)使用該頁(yè)面。
在線的情況下，瀏覽器發(fā)現(xiàn)html頭部有manifest屬性,會(huì)請(qǐng)求manifest文件，如果是第一次訪問(wèn)應(yīng)用，瀏覽器就會(huì)根據(jù)manifest文件的內(nèi)容下載相應(yīng)的資源并且進(jìn)行離線存儲(chǔ)。如果已經(jīng)訪問(wèn)過(guò)應(yīng)用并且資源已經(jīng)離線存儲(chǔ)了，那么瀏覽器就會(huì)使用離線的資源加載頁(yè)面，然后瀏覽器會(huì)對(duì)比新的manifest文件與舊的manifest文件，如果文件沒(méi)有發(fā)生改變，就不做任何操作，如果文件改變了，那么就會(huì)重新下載文件中的資源并進(jìn)行離線存儲(chǔ)。
離線的情況下，瀏覽器就直接使用離線存儲(chǔ)的資源。
注意：
1.服務(wù)器對(duì)離線的資源進(jìn)行了更新，那么必須更新manifest文件之后這些資源才能被瀏覽器重新下載，如果只是更新了資源而沒(méi)有更新manifest文件的話(huà)，瀏覽器并不會(huì)重新下載資源，也就是說(shuō)還是使用原來(lái)離線存儲(chǔ)的資源。
2.manifest文件進(jìn)行緩存的時(shí)候需要十分小心，因?yàn)榭赡艹霈F(xiàn)一種情況就是你對(duì)manifest文件進(jìn)行了更新，但是http的緩存規(guī)則告訴瀏覽器本地緩存的manifest文件還沒(méi)過(guò)期，這個(gè)情況下瀏覽器還是使用原來(lái)的manifest文件，所以對(duì)于manifest文件最好不要設(shè)置緩存。
3.如果更新中某個(gè)資源下載失敗，則整個(gè)更新就視作失敗，瀏覽器會(huì)依舊采用原來(lái)的資源
4.站點(diǎn)離線存儲(chǔ)的容量限制是5M
瀏覽器在下載manifest文件中的資源的時(shí)候，它會(huì)一次性下載所有資源，如果某個(gè)資源由于某種原因下載失敗，那么這次的所有更新就算是失敗的，瀏覽器還是會(huì)使用原來(lái)的資源。
window.applicationCache對(duì)象常用事件
1. oncached:當(dāng)離線資源存儲(chǔ)完成之后觸發(fā)這個(gè)事件
2. onchecking:當(dāng)瀏覽器對(duì)離線存儲(chǔ)資源進(jìn)行更新檢查的時(shí)候會(huì)觸發(fā)這個(gè)事件
3. ondownloading:當(dāng)瀏覽器開(kāi)始下載離線資源的時(shí)候會(huì)觸發(fā)這個(gè)事件
4. onprogress:當(dāng)瀏覽器在下載每一個(gè)資源的時(shí)候會(huì)觸發(fā)這個(gè)事件，每下載一個(gè)資源就會(huì)觸發(fā)一次。
5. onupdateready:當(dāng)瀏覽器對(duì)離線資源更新完成之后會(huì)觸發(fā)這個(gè)事件
6. onnoupdate:當(dāng)瀏覽器檢查更新之后發(fā)現(xiàn)沒(méi)有資源更新的時(shí)候觸發(fā)這個(gè)事件
最后一點(diǎn)是該特性已經(jīng)從web標(biāo)準(zhǔn)刪除，可能在未來(lái)某個(gè)時(shí)間停止，推薦使用Service Workers 代替。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.payeee.cn