1. 程式人生 > >HTML5應用程式快取(Application Cache)

HTML5應用程式快取(Application Cache)

最近做專案的時候,需要將web頁面快取到本地,經過調查,決定使用HTML5的應用程式快取功能。
使用HTML5,通過建立 manifest 檔案,可以輕鬆地建立 web 應用的離線版本。
請注意,根據MDN文件,該特性已經從 Web 標準中刪除。推薦使用Service Workers代替,但是目前Service Workers 仍然有相容性問題,所以應用程式快取(ApplicationCache)仍然是目前進行離線儲存的最好的方式。

應用程式快取的優點

HTML5 提供一種應用程式快取機制,使得基於web的應用程式可以離線執行。開發者可以使用 Application Cache (AppCache) 介面設定瀏覽器應該快取的資源並使得離線使用者可用。 在處於離線狀態時,即使使用者點選重新整理按鈕,應用也能正常載入與工作。
- 離線瀏覽: 使用者可以在離線狀態下瀏覽網站內容。
- 更快的速度: 因為資料被儲存在本地,所以速度會更快。
- 減輕伺服器的負載: 瀏覽器只會下載在伺服器上發生改變的資源。

例項

index.html

<html manifest="cache.appcache"> 
  ...
</html>

cache.appcache

CACHE MANIFEST
#v1.0.18

/xxx.js
/js/jquery.min.js
/xxxx.js
/xxxxx.js

NETWORK:
*

FALLBACK:
404.html

注:
1.快取清單檔案可以使用任意副檔名,但傳輸它的 MIME 型別必須為 text/cache-manifest。
2.manifest 檔案的建議的副檔名是:”.appcache”.
3.在快取清單檔案中列出的所有記錄必須擁有相同的協議、主機名與埠號。
4.不要在清單檔案中指定清單檔案本身,否則將無法讓瀏覽器得知清單檔案有新版本出現。

應用程式快取appcache檔案配置

manifest 檔案是簡單的文字檔案,它告知瀏覽器被快取的內容(以及不快取的內容)。
manifest 檔案可分為三個部分:
CACHE MANIFEST - 在此標題下列出的檔案將在首次下載後進行快取。
NETWORK - 在此標題下列出的檔案需要與伺服器的連線,且不會被快取。可以使用萬用字元。
FALLBACK - 在此標題下列出的檔案規定當頁面無法訪問時的回退頁面(比如 404 頁面)

注:
1.快取清單檔案的第一行必須包含字串 CACHE MANIFEST,本行的其他文字會被忽略。
2.註釋只能在所在行起作用,不能追加到其他行上。
3.CACHE, NETWORK, 和 FALLBACK 段落可以以任意順序出現在快取清單檔案中,並且每個段落可以在同一清單檔案中出現多次。而且段落允許為空。
4.段落標題指定了快取檔案即將操作的段落。有三個可選的標題:

段落標題 解釋
CACHE: 切換到快取清單的顯式段落(預設段落)。
NETWORK: 切換到快取清單的線上白名單段落。
FALLBACK: 切換到快取清單的後備資源段落。

段落標題所在的行可以包含空白字元,段落名後的冒號 (:) 不可省略。
5.1在預設 (CACHE:) 段落,每行都是一個合法的 URI 或 IRI ,與一個要快取的資源相關聯(本段落內不允許萬用字元)。
5.2在 Network 段落內,每行都是一個合法的 URI 或 IRI,關聯一個需要通過網路獲取的資源(本段落內可以使用萬用字元 *)。
5.3在 Fallback 段落內,每行都是一個合法的 URI 或 IRI(與一個資源關聯),緊跟著一個後備資源,用於當無法與伺服器建立連線時訪問。
5.4相對 URI 是指相對於快取清單的 URI,而不是包含清單的文件的 URI。

使用manifest後加載過程

application cache的使用會修改文件的載入過程:

1.如果應用快取存在,瀏覽器直接從快取中載入文件與相關資源,不會訪問網路。這會提升文件載入速度。
2.瀏覽器檢查清單檔案列出的資源是否在伺服器上被修改。
3.如果清單檔案被更新了, 瀏覽器會下載新的清單檔案和相關的資源。 這都是在後臺執行的,基本不會影響到webapp的效能。
下面詳細描述了載入文件與更新應用快取的流程:

1.當瀏覽器訪問一個包含 manifest 特性的文件時,如果應用快取不存在,瀏覽器會載入文件,然後獲取所有在清單檔案中列出的檔案,生成應用快取的第一個版本。
2.對該文件的後續訪問會使瀏覽器直接從應用快取(而不是伺服器)中載入文件與其他在清單檔案中列出的資源。此外,瀏覽器還會向 window.applicationCache 物件傳送一個 checking 事件,在遵循合適的 HTTP 快取規則前提下,獲取清單檔案。
3.如果當前快取的清單副本是最新的,瀏覽器將向 applicationCache 物件傳送一個 noupdate 事件,到此,更新過程結束。注意,如果你在伺服器修改了任何快取資源,同時也應該修改清單檔案,這樣瀏覽器才能知道它需要重新獲取資源。
4.如果清單檔案已經改變,檔案中列出的所有檔案—也包括通過呼叫 applicationCache.add() 方法新增到快取中的那些檔案—會被獲取並放到一個臨時快取中,遵循適當的 HTTP 快取規則。對於每個加入到臨時快取中的檔案,瀏覽器會向 applicationCache 物件傳送一個 progress 事件。如果出現任何錯誤,瀏覽器會發送一個 error 事件,並暫停更新。
5.一旦所有檔案都獲取成功,它們會自動移送到真正的離線快取中,並向 applicationCache 物件傳送一個 cached 事件。鑑於文件早已經被從快取載入到瀏覽器中,所以更新後的文件不會重新渲染,直到頁面重新載入(可以手動或通過程式).

快取狀態

UNCACHED(未快取)

一個特殊的值,用於表明一個應用快取物件還沒有完全初始化。

IDLE(空閒)

應用快取此時未處於更新過程中。

CHECKING(檢查)

清單已經獲取完畢並檢查更新。

DOWNLOADING(下載中)

下載資源並準備加入到快取中,這是由於清單變化引起的。

UPDATEREADY(更新就緒)

一個新版本的應用快取可以使用。有一個對應的事件updateready,當下載完畢一個更新,並且還未使用 swapCache() 方法啟用更新時,該事件觸發,而不會是 cached 事件。

OBSOLETE(廢棄)

應用快取現在被廢棄。

更新快取的時機

一旦應用被快取,它就會保持快取直到發生下列情況:
使用者清空瀏覽器快取
manifest 檔案被修改(包括更改註釋)
由程式來更新應用快取

快取中的事件

已知的applicationCache中的事件如下所示:

事件名稱 解釋
oncached 當離線資源儲存完成後觸發
onchecking 當瀏覽器對離線儲存資源進行檢查的時候觸發
ondownloading 當瀏覽器開始下載離線資源的時候觸發
onerror 當快取資源失敗的時候觸發
onnoupdate 瀏覽器檢查manifest檔案沒有更新時觸發
onobsolete 過時的
onprogress 當瀏覽器快取每一個資源的時候都會觸發一次
onupdateready 瀏覽器更新離線資源完成的時候觸發

例項如下所示

// 離線資源儲存完成之後觸發
window.applicationCache.addEventListener('cached', function () {
    console.log('cached');
});

// 離線儲存資源進行更新檢查的時候會觸發
window.applicationCache.addEventListener('checking', function () {
    console.log('checking');
});

// 開始下載離線資源的時候會觸發
window.applicationCache.addEventListener('downloading', function () {
    console.log('downloading');
});

// 下載每一個資源的時候會觸發
window.applicationCache.addEventListener('progress', function () {
    console.log('progress');
});

// 離線資源更新完成之後
window.applicationCache.addEventListener('updateready', function () {
    console.log('updateready');
});

// 檢查更新之後發現沒有資源更新的時候觸發
window.applicationCache.addEventListener('noupdate', function () {
    console.log('noupdate');
});

// obsolete
window.applicationCache.addEventListener('obsolete', function () {
    console.log('obsolete');
});

// error
window.applicationCache.addEventListener('error', function () {
    console.log('error');
});

結果

第一次載入後log:
第一次載入
快取後再次開啟log:
這裡寫圖片描述
更新manifest檔案後log:
這裡寫圖片描述
將manifest檔案中第五個檔案設定為不存在的檔案後的log:
這裡寫圖片描述
斷網後的log(chrome下):
這裡寫圖片描述
上圖是chrome瀏覽器模擬斷網時的log,在手機瀏覽器真實斷網的情況下觸發以下兩個事件:
1.onchecking
2.onerror

注:
1.onchecking事件每次重新整理頁面都會被觸發,包括第一次載入。
2.onnoupdate事件觸發的時機應該為manifest檔案被更新之後,而不是快取的資源被更新之後。
3.應用快取可以變成廢棄的。如果從伺服器上移除一個應用的清單檔案,瀏覽器將會清除所有清單中列出的應用快取,並向 applicationCache 物件傳送一個「obsolete」事件。這將使得應用快取的狀態變為 OBSOLETE。

載入完成後重新整理

當manifest檔案更新之後,瀏覽器下載完成之後會觸發onupdateready事件,但是頁面並沒有被重新整理,即新的檔案並沒有執行,需要程式控制重新整理一下。

window.applicationCache.addEventListener('updateready', function () {
    if(window.applicationCache.status === window.applicationCache.UPDATEREADY) {
        window.applicationCache.swapCache();
        window.location.reload();
    }
});

注意事項

  • 在快取清單檔案中列出的所有記錄必須擁有相同的協議、主機名與埠號。
  • 一旦檔案被快取,瀏覽器會使用快取的檔案,即使伺服器檔案被修改也不會重新下載。為了確保瀏覽器更新快取,請更新manifest檔案。
  • 引入manifest的頁面,即使不在快取列表裡,也會被快取,也就是說在伺服器修改了這個html頁面,重新整理瀏覽器也不會生效,必須更新manifest檔案,原因請看上一條。
  • 當瀏覽器開啟多個頁面被快取的頁面的時候,重新整理其中一個頁面,其他幾個頁面也會收到快取事件(比如說onchecking等),也會更新快取。
  • 站點離線快取的預設容量限制是5M。(待確認)
  • 站點中的所有頁面,只會快取一份資源。
  • 站點中的其他頁面,即使沒有引用manifest檔案,如果請求了快取中的資源,也會從快取中讀取。
  • 當manifest檔案被更新之後,雖然本次訪問下載了資源並觸發了onupdateready方法,但是新的資源並不會被執行,需要手動重新整理執行新的檔案。
  • 直接請求被快取的資源,也會從快取中讀取。
  • 該特性已從web標準中廢棄,未來瀏覽器可能不再支援,MDN推薦使用Service Workers代替。(根據調查,截止到目前,瀏覽器仍未完全支援Service Workers,如果要相容移動端,暫時還不能使用Service Workers)

注:
本文主要參考了MDN上的文章,謹在此對開源文件開發編寫人員表示敬意。
如果您有任何疑問或本文侵犯了您的著作權,請聯絡我。 mail to kylin

相關推薦

HTML5應用程式快取(Application Cache)

最近做專案的時候,需要將web頁面快取到本地,經過調查,決定使用HTML5的應用程式快取功能。 使用HTML5,通過建立 manifest 檔案,可以輕鬆地建立 web 應用的離線版本。 請注意,根據MDN文件,該特性已經從 Web 標準中刪除。推薦使用Se

HTML5 應用程式快取--manifest

HTML5 引入了應用程式快取,這意味著 web 應用可進行快取,並可在沒有因特網連線時進行訪問。 應用程式快取為應用帶來三個優勢: - 離線瀏覽 - 使用者可在應用離線時使用它們 - 速度 - 已快取資源載入得更快 - 減少伺服器負載 - 瀏覽器

從零開始學 Web 之 HTML5(三)網路監聽,全屏,檔案讀取,地理定位介面,應用程式快取

一、網路監聽介面 ononline:網路連通時觸發 onoffline:網路斷開時觸發 window.addEventListener("online", function(){}); window.addEventListener("offline", function(){}); 二、全屏介面 全

html5 web應用程式快取

話說到web應用程式快取,這個東西,我覺得挺有用的。以前,個人看到網頁版的美圖秀秀,而自己的電腦本地也安裝了美圖秀秀,就覺得這兩者沒必要在網頁版上也實現吧。不過,後來覺得,還是網頁版的方便多了,因為不需要自己安裝程式啊,至少自己的電腦裡面不會因多一個應用程式,而很亂。但是,

Android實現清除應用程式快取

我使用的是反射的方法來獲取某個應用程式的快取大小,但是沒能實現通過反射的方法來清除該應用快取,所以我只能呼叫系統的設定意圖來清除快取。而且在真機上沒什麼問題,模擬器上就有些問題了。 1.需要三個AIDL檔案 注意:在新增三個aidl檔案後一定要Rebuild Proje

安卓開發之清理手機應用程式快取

清理手機應用程式快取。    拿到模組後,先實現UI介面。介面實現後開始思考整個模組要實現的功能,然後是要使用的API。    第一步:先拿到包管理器    PackageManager pm=getPackageManager();    第二步:利用包管理器拿到所有安裝

清理應用程式快取

1、獲取應用程式快取資訊 2、清理快取(也可以不用步驟1,直接清理,步驟1只是為了知道哪些程式有快取) 1) Method getPackageSizeInfo = pm.getClass().getMethod("getPackageSizeInfo", String.c

應用程式見解 Application Insights】Application Insights 使用 Application Maps 構建請求鏈路檢視

Applicaotn  Insigths 使用 Application Maps 構建請求鏈路檢視  構建系統時,請求的邏輯操作大多數情況下都需要在不同的服務,或介面中完成整個請求鏈路。一個請求可以經歷多個元件,極有可能出現客戶端請求站點1,站點1請求站點2, … 站點N才是最終處理資料然

在ASP.NET中使用Session、CacheApplication時注意IIS應用程式池的空閒超時

在.NET的ASP.NET、ASP.NET MVC與WebService等應用中,常常使用Session、Cache或Application儲存伺服器端共享資料,如果沒有使用SqlServer儲存這些緩衝區資料,那麼就存在超時與過期問題:超時後Session和Cache就過期

Fiddler監聽Java應用程式http請求方法(Configure a Java Application to Use Fiddler)

Fiddler官網:http://docs.telerik.com/fiddler/Configure-Fiddler/Tasks/ConfigureJavaApp Configure a Java Application to Use Fiddler 要配置Java應用程式以向Fiddle

H5離線快取技術Application Cache

H5離線快取技術Application Cache 1、離線快取技術:是瀏覽器本身的一種機制 HTML5引入Application Cache(應用程式快取)技術,離線儲存可以將站點的一些檔案儲存在本地,在沒有網路的情況下可以訪問到已快取的對應的站點頁面,這些檔案包括html、js、css、img等檔案;

Application應用程式 u3d學習總結筆記本

1.Application屬性 2.Application方法 //====================================== 1.Application屬性 print(Application.companyName);//返回應用程式公司名稱(只讀)。 prin

錯誤: 在類 com.js.sort.ArraySort 中找不到 main 方法, 請將 main 方法定義為: public static void main(String[] args) 否則 JavaFX 應用程式類必須擴充套件javafx.application.Application

https://blog.csdn.net/liu1340308350/article/details/80746671 開啟: eclipse ->window->preference->run and debug->Lunching    將第一行Sav

Eclipse建立Enterprise Application企業應用程式

J2EE Enterprise Application企業應用程式包含EJB、WEB EJB:Eclipse+Wildfly10 建立第一個EJB專案 WEB:同時部署在wildfly下的Web訪問EJB 使用Eclipse(IDE是 Red Hat JBos

Flink分散式快取Distributed Cache應用案例實戰-Flink牛刀小試

版權宣告:本套技術專欄是作者(秦凱新)平時工作的總結和昇華,通過從真實商業環境抽取案例進行總結和分享,並給出商業應用的調優建議和叢集環境容量規劃等內容,請持續關注本套部落格。版權宣告:禁止轉載,歡迎學習。QQ郵箱地址:[email protected],如有任何問題,可隨時聯絡。 1 分散式快取

Single Page Application - 下一代的Web應用程式 Single Page Application - 下一代的Web應用程式

Single Page Application - 下一代的Web應用程式 在Web Service, Ajax, Web 2.0,REST等Web應用與技術話題熱潮

求解一元二次方程,編制一個java application應用程式,求3X2+4X-1=0的根。

一、題目要求:  編制一個java application應用程式,求3X2+4X-1=0的根。 解析: 求解一元二次方程我們需要根據判別式來判斷方程是否有解,本次我用“i”來作為判別式,j和k分別是方程在有解情況下的兩個解(兩個相同解和兩個不同

使用快取計算來提高應用程式效能

問題:       如何減少重複複雜的和CPU消耗大的計算的需要,優化js應用程式和庫。 解決方案       使用中間函式memoization來快取複雜計算的結果。 舉例 <!DOCTYPE html> <html> <head&g

深入理解Flash Player的應用程式域(Application Domains)

轉:http://riaoo.com/?p=1970 深入理解Flash Player的應用程式域(Application Domains) 作者: Y.Boy  2010年12月1日  分類: ActionScrip

用Java進行基於瀏覽器的桌面應用程式開發(Browser-based desktop application development with java)

http://blog.terac.com/andy/e_329.html關於嵌入式網站伺服器(Embedded web server):我這幾天試用了Jetty和Tomcat。總以為Jetty很小呢,最適合做BBDA呢