HTML Application Cache 離線應用

lavnFan 發布于2019-08-02 15:55 / 1286人閱讀

摘要：簡稱是一套針對緩存應用資源的接口，通過此套接口，可以實現網頁的離線訪問，或者在網速較慢的情況下也能快速打開頁面。的狀態為以下幾種網頁未緩存閑置檢查中下載中更新已準備完畢更新失敗內主動更新的流程

HTML Application Cache （簡稱 HAC）是一套針對緩存應用資源的接口，通過此套接口，可以實現網頁的離線訪問，或者在網速較慢的情況下也能快速打開頁面。
使用 HAC 之后，瀏覽器在請求網站的時候首先會去 cache 內查找，如果命中，則會加載命中的資源，如果沒有，則向服務端請求，再加載。

HAC 與瀏覽器傳統的緩存（304 的那種）不同的是，HAC 是將整套資源作為一個集合緩存下來，緩存的鍵是入口頁面的 url，而不是針對單個文件緩存。
一個 HAC 網站所需要的資源是通過緩存清單( manifest) 來告知瀏覽器的，在清單里聲明的資源將會被瀏覽器加入頁面的 HAC 。
manifest 的聲明方法如下:

頁面入口 index.html

/app.manifest 文件

CACHE MANIFEST
/index.html
/app.js

之后瀏覽器就會將 index.html 和 app.js 作為一整套資源加入到 HAC。

在瀏覽器第二次打開頁面的時候，就會在 HAC 中找到緩存，并加載。
但同時瀏覽器還會嘗試去請求 /app.manifest 文件，如果請求成功，就會拿新舊兩個版本的 manifest 去對比，如果發現文件內容有更改，則會按照新版 manifest 中列出的文件重新請求一遍資源，并更新到 HAC 里。如果這時有一個文件訪問出錯，就會導致 HAC 停止更新。但是默認 chrome 會限制 5MB 的緩存大小，如果是 chrome 應用，并想要更多緩存空間的話，則需要聲明 unlimitedStorage。
在瀏覽器內也可以手動的運行 applicationCache.update() 去觸發檢查。然后通過 applicationCache.status 去判斷是否需要更新 HAC。
applicationCache.status 的狀態為以下幾種 :

appCache.UNCACHED = 0; // 網頁未緩存
appCache.IDLE = 1; // 閑置
appCache.CHECKING = 2; // 檢查中
appCache.DOWNLOADING = 3; // 下載中
appCache.UPDATEREADY = 4; // 更新已準備完畢
appCache.OBSOLETE = 5; // 更新失敗

// js 內主動更新的流程
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.

云服務器 GPU云服務器 application-cache 離線應用離線應用功能 Application

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/54363.html

前端性能優化（Application Cache篇）

摘要：在文檔中，可以指定清單文件的相對路徑和絕對。具體做法是在中嵌入一個，中的頁面的標簽包含屬性引用文件，里面定義了需要緩存的文件。這比較適合一些頁面上的應用以及靜態的不經常變更的頁面。其會緩存載體頁面也是由于其機制。正巧看到在送書，于是乎找了找自己博客上記錄過的一些東西來及其無恥的蹭書了~~~ 小廣告：更多內容可以看我的博客之前在segmentfault上刷問題看到一個關于mani...

mj 2019-08-19 14:42 評論0 收藏0
構建離線WEB應用

摘要：使用離線應用構建應用服務端服務器配置創建文件客戶端構建，并在標簽上添加屬性，屬性值是服務器上配置的緩存資源列表的文件名配置相關事件，創建離線文件內容將狀態代碼轉化成狀態離線應用創建即使沒有互聯網連接也可以使用的應用程序。 HTML5新增了localstroage和application cache做離線緩存，兩種緩存各有應用的場景，今天我們說說application cache這種方案...

shleyZ 2019-08-26 13:48 評論0 收藏0
構建離線WEB應用

摘要：使用離線應用構建應用服務端服務器配置創建文件客戶端構建，并在標簽上添加屬性，屬性值是服務器上配置的緩存資源列表的文件名配置相關事件，創建離線文件內容將狀態代碼轉化成狀態離線應用創建即使沒有互聯網連接也可以使用的應用程序。 HTML5新增了localstroage和application cache做離線緩存，兩種緩存各有應用的場景，今天我們說說application cache這種方案...

lk20150415 2019-08-30 10:55 評論0 收藏0