資訊專欄INFORMATION COLUMN
摘要：簡(jiǎn)稱是一套針對(duì)緩存應(yīng)用資源的接口，通過此套接口，可以實(shí)現(xiàn)網(wǎng)頁(yè)的離線訪問，或者在網(wǎng)速較慢的情況下也能快速打開頁(yè)面。的狀態(tài)為以下幾種網(wǎng)頁(yè)未緩存閑置檢查中下載中更新已準(zhǔn)備完畢更新失敗內(nèi)主動(dòng)更新的流程
HTML Application Cache （簡(jiǎn)稱 HAC）是一套針對(duì)緩存應(yīng)用資源的接口，通過此套接口，可以實(shí)現(xiàn)網(wǎng)頁(yè)的離線訪問，或者在網(wǎng)速較慢的情況下也能快速打開頁(yè)面。
使用 HAC 之后，瀏覽器在請(qǐng)求網(wǎng)站的時(shí)候首先會(huì)去 cache 內(nèi)查找，如果命中，則會(huì)加載命中的資源，如果沒有，則向服務(wù)端請(qǐng)求，再加載。
HAC 與瀏覽器傳統(tǒng)的緩存（304 的那種）不同的是，HAC 是將整套資源作為一個(gè)集合緩存下來(lái)，緩存的鍵是入口頁(yè)面的 url，而不是針對(duì)單個(gè)文件緩存。
一個(gè) HAC 網(wǎng)站所需要的資源是通過緩存清單( manifest) 來(lái)告知瀏覽器的，在清單里聲明的資源將會(huì)被瀏覽器加入頁(yè)面的 HAC 。
manifest 的聲明方法如下:
頁(yè)面入口 index.html
/app.manifest 文件
CACHE MANIFEST /index.html /app.js
之后瀏覽器就會(huì)將 index.html 和 app.js 作為一整套資源加入到 HAC。
在瀏覽器第二次打開頁(yè)面的時(shí)候，就會(huì)在 HAC 中找到緩存，并加載。
但同時(shí)瀏覽器還會(huì)嘗試去請(qǐng)求 /app.manifest 文件，如果請(qǐng)求成功，就會(huì)拿新舊兩個(gè)版本的 manifest 去對(duì)比，如果發(fā)現(xiàn)文件內(nèi)容有更改，則會(huì)按照新版 manifest 中列出的文件重新請(qǐng)求一遍資源，并更新到 HAC 里。如果這時(shí)有一個(gè)文件訪問出錯(cuò)，就會(huì)導(dǎo)致 HAC 停止更新。但是默認(rèn) chrome 會(huì)限制 5MB 的緩存大小，如果是 chrome 應(yīng)用，并想要更多緩存空間的話，則需要聲明 unlimitedStorage。
在瀏覽器內(nèi)也可以手動(dòng)的運(yùn)行 applicationCache.update() 去觸發(fā)檢查。然后通過 applicationCache.status 去判斷是否需要更新 HAC。
applicationCache.status 的狀態(tài)為以下幾種 :
appCache.UNCACHED = 0; // 網(wǎng)頁(yè)未緩存 appCache.IDLE = 1; // 閑置 appCache.CHECKING = 2; // 檢查中 appCache.DOWNLOADING = 3; // 下載中 appCache.UPDATEREADY = 4; // 更新已準(zhǔn)備完畢 appCache.OBSOLETE = 5; // 更新失敗
// js 內(nèi)主動(dòng)更新的流程
var appCache = window.applicationCache;
window.applicationCache.addEventListener("updateready", function(e) {
if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
window.applicationCache.swapCache();
if (confirm("A new version of this site is available. Load it?")) {
window.location.reload();
}
}
});
appCache.update(); // Attempt to update the user"s cache.
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/54363.html
摘要：在文檔中，可以指定清單文件的相對(duì)路徑和絕對(duì)。具體做法是在中嵌入一個(gè)，中的頁(yè)面的標(biāo)簽包含屬性引用文件，里面定義了需要緩存的文件。這比較適合一些頁(yè)面上的應(yīng)用以及靜態(tài)的不經(jīng)常變更的頁(yè)面。其會(huì)緩存載體頁(yè)面也是由于其機(jī)制。 正巧看到在送書，于是乎找了找自己博客上記錄過的一些東西來(lái)及其無(wú)恥的蹭書了~~~ 小廣告：更多內(nèi)容可以看我的博客 之前在segmentfault上刷問題看到一個(gè)關(guān)于mani...
摘要：使用離線應(yīng)用構(gòu)建應(yīng)用服務(wù)端服務(wù)器配置創(chuàng)建文件客戶端構(gòu)建，并在標(biāo)簽上添加屬性，屬性值是服務(wù)器上配置的緩存資源列表的文件名配置相關(guān)事件，創(chuàng)建離線文件內(nèi)容將狀態(tài)代碼轉(zhuǎn)化成狀態(tài)離線應(yīng)用創(chuàng)建即使沒有互聯(lián)網(wǎng)連接也可以使用的應(yīng)用程序。 HTML5新增了localstroage和application cache做離線緩存，兩種緩存各有應(yīng)用的場(chǎng)景，今天我們說(shuō)說(shuō)application cache這種方案...
摘要：使用離線應(yīng)用構(gòu)建應(yīng)用服務(wù)端服務(wù)器配置創(chuàng)建文件客戶端構(gòu)建，并在標(biāo)簽上添加屬性，屬性值是服務(wù)器上配置的緩存資源列表的文件名配置相關(guān)事件，創(chuàng)建離線文件內(nèi)容將狀態(tài)代碼轉(zhuǎn)化成狀態(tài)離線應(yīng)用創(chuàng)建即使沒有互聯(lián)網(wǎng)連接也可以使用的應(yīng)用程序。 HTML5新增了localstroage和application cache做離線緩存，兩種緩存各有應(yīng)用的場(chǎng)景，今天我們說(shuō)說(shuō)application cache這種方案...
閱讀 1389·2021-09-24 10:26
閱讀 1700·2019-08-30 14:14
閱讀 2113·2019-08-29 16:54
閱讀 371·2019-08-29 14:09
閱讀 1482·2019-08-29 12:55
閱讀 936·2019-08-28 18:13
閱讀 1587·2019-08-26 13:39
閱讀 2573·2019-08-26 11:43
