流程：離線存儲(chǔ)就是在離線狀態(tài)也可以訪問之前訪問過的頁(yè)面
分析：當(dāng)有網(wǎng)的情況下，瀏覽器會(huì)訪問離線緩存的內(nèi)容，同時(shí)會(huì)潛在的向服務(wù)器發(fā)送一個(gè)請(qǐng)求，看版本號(hào)是否更新，如果更新就會(huì)將新的內(nèi)容返回到緩存中，但是此時(shí)，瀏覽器拿到的是之前的緩存內(nèi)容，并不會(huì)拿到新的更新后的數(shù)據(jù)，只有再次刷新頁(yè)面才會(huì)拿到新的上次更新后的數(shù)據(jù)。在沒有網(wǎng)的情況下，它拿到的還是緩存里的，就算發(fā)送請(qǐng)求，也是請(qǐng)求失敗的。
我們需要放在服務(wù)器環(huán)境下才會(huì)生效，用服務(wù)器的開啟和停止來(lái)模擬有網(wǎng)和斷網(wǎng)。
過程：在html文件中的<html>標(biāo)簽中
<html lang="en" manifest="manifest.manifest">
在html同級(jí)新建一個(gè)文件manifest.manifist
CACHE MANIFEST
#version 1.1124
CACHE:
index.css
index2.css
images/a.png
NETWORK:
*
實(shí)際開發(fā)過程中，后端會(huì)用工具自動(dòng)生成manifest文件
當(dāng)前頁(yè)面需要緩存的資源寫到CACHE下
只要內(nèi)容變了，版本號(hào)變，緩存的內(nèi)容才會(huì)變，不然不會(huì)變
這樣得刷新兩次，所以可以用js解決這個(gè)問題，原理就是要通過監(jiān)聽updateReady，看是否有更新，如果更新，就將原緩存換成新緩存，用reload()重新刷新頁(yè)面.
代碼如下：
<script>
window.addEventListener('load', function(e) {
window.applicationCache.addEventListener('updateready', function(e) {
if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
// 調(diào)用applicationCache.swapCache()即可將原緩存換成新緩存。
window.applicationCache.swapCache();
window.location.reload();
}
}, false);
}, false);
這樣就不用刷新兩次了，正常操作，改版本號(hào)就可以啦。
圖片的話，瀏覽器會(huì)默認(rèn)緩存，如果要設(shè)置的話，就在maifest文件里CATCH下寫圖片路徑就好了 比如：image/a.png
