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、Cache與Application時注意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呢