用到離線存儲(chǔ)的原因：越來越多的APP使用H5開發(fā)，通過瀏覽器進(jìn)行訪問，瀏覽器訪問就需要互聯(lián)網(wǎng)請(qǐng)求，在手機(jī)斷網(wǎng)的情況下，就無法使用APP，而且很多資源是不需要隨時(shí)更改的，綜合這些原因，h5提供了一個(gè)新特性–離線存儲(chǔ)。 用法：在頁(yè)面頭部加入manifest

cache.manifest文件里面寫

瀏覽器解析manifest ：在線情況下，瀏覽器會(huì)識(shí)別manifest 屬性，會(huì)請(qǐng)求manifest文件，如果是第一次訪問，瀏覽器會(huì)根據(jù)manifest 文件存儲(chǔ)資源，如果非第一次訪問，瀏覽器會(huì)使用離線資源加載頁(yè)面，然后對(duì)比manifest 文件是否改變，如果改變重新下載文件中資源。離線情況瀏覽器會(huì)直接使用離線存儲(chǔ)的資源。 注意：①如果服務(wù)器對(duì)離線的資源進(jìn)行了更新，那么必須更新manifest文件之后這些資源才能被瀏覽器重新下載，如果只是更新了資源而沒有更新manifest文件的話，瀏覽器并不會(huì)重新下載資源，也就是說還是使用原來離線存儲(chǔ)的資源。 ②對(duì)于manifest文件進(jìn)行緩存的時(shí)候需要十分小心，因?yàn)榭赡艹霈F(xiàn)一種情況就是你對(duì)manifest文件進(jìn)行了更新，但是http的緩存規(guī)則告訴瀏覽器本地緩存的manifest文件還沒過期，這個(gè)情況下瀏覽器還是使用原來的manifest文件，所以對(duì)于manifest文件最好不要設(shè)置緩存。 ③瀏覽器在下載manifest文件中的資源的時(shí)候，它會(huì)一次性下載所有資源，如果某個(gè)資源由于某種原因下載失敗，那么這次的所有更新就算是失敗的，瀏覽器還是會(huì)使用原來的資源。 ④在更新了資源之后，新的資源需要到下次再打開app才會(huì)生效，如果需要資源馬上就能生效，那么可以使用window.applicationCache.swapCache()方法來使之生效，出現(xiàn)這種現(xiàn)象的原因是瀏覽器會(huì)先使用離線資源加載頁(yè)面，然后再去檢查manifest是否有更新，所以需要到下次打開頁(yè)面才能生效。

文章參考：https://segmentfault.com/a/1190000000732617