簡介
離線訪問對基于網絡的應用而言越來越重要。雖然所有瀏覽器都有緩存機制，但它們并不可靠，也不一定總能起到預期的作用。HTML5 使用 ApplicationCache 接口解決了由離線帶來的部分難題。
使用緩存接口可為您的應用帶來以下三個優勢：
離線瀏覽 – 用戶可在離線時瀏覽您的完整網站
速度 – 緩存資源為本地資源，因此加載速度較快。
服務器負載更少 – 瀏覽器只會從發生了更改的服務器下載資源。
應用緩存（又稱 AppCache）可讓開發人員指定瀏覽器應緩存哪些文件以供離線用戶訪問。即使用戶在離線狀態下按了刷新按鈕，您的應用也會正常加載和運行。
緩存清單文件
緩存清單文件是個簡單的文本文件，其中列出了瀏覽器應緩存以供離線訪問的資源。
引用清單文件
要啟用某個應用的應用緩存，請在文檔的html 標記中添加manifest 屬性：
復制代碼 代碼如下:www.CuoXIn.com
<html manifest="example.appcache">
...
</html>
您應在要緩存的網絡應用的每個頁面上都添加 manifest 屬性。如果網頁不包含 manifest 屬性，瀏覽器就不會緩存該網頁（除非清單文件中明確列出了該屬性）。這就意味著用戶瀏覽的每個包含manifest 的網頁都會隱式添加到應用緩存。因此，您無需在清單中列出每個網頁。
manifest 屬性可指向絕對網址或相對路徑，但絕對網址必須與相應的網絡應用同源。清單文件可使用任何文件擴展名，但必須以正確的 MIME 類型提供（參見下文）。
復制代碼 代碼如下:www.CuoXIn.com
<html manifest="http://www.example.com/example.mf">
...
</html>
清單文件必須以 text/cache-manifest MIME 類型提供。您可能需要向網絡服務器或 .htaccess 配置添加自定義文件類型。
例如，要在 Apache 中提供此 MIME 類型，請在您的配置文件中添加下面一行內容：
AddType text/cache-manifest .appcache要在 Google App Engine 的 app.yaml 文件中提供此 MIME 類型，則添加以下內容：
- url: /mystaticdir/(.*/.appcache)
static_files: mystaticdir//1
mime_type: text/cache-manifest
upload: mystaticdir/(.*/.appcache)清單文件結構
簡單的清單格式如下：
CACHE MANIFEST
index.html
stylesheet.css
images/logo.png
scripts/main.js該示例將在指定此清單文件的網頁上緩存四個文件。
您需要注意以下幾點：
CACHE MANIFEST 字符串應在第一行，且必不可少。
網站的緩存數據量不得超過 5 MB。不過，如果您要編寫的是針對 Chrome 網上應用店的應用，可使用 unlimitedStorage 取消該限制。
如果清單文件或其中指定的資源無法下載，就無法進行整個緩存更新進程。在這種情況下，瀏覽器將繼續使用原應用緩存。
我們再來看看更復雜的示例：
CACHE MANIFEST
# 2010-06-18:v2
# Explicitly cached 'master entries'.
CACHE:
/favicon.ico
index.html
stylesheet.css
images/logo.png
scripts/main.js
# Resources that require the user to be online.
NETWORK:
login.php
/myapi
http://api.twitter.com
# static.html will be served if main.py is inaccessible
# offline.jpg will be served in place of all images in images/large/
# offline.html will be served in place of all other .html files
FALLBACK:
/main.py /static.html
images/large/ images/offline.jpg
*.html /offline.html以“#”開頭的行是注釋行，但也可用于其他用途。應用緩存只在其清單文件發生更改時才會更新。例如，如果您修改了圖片資源或更改了 JavaScript 函數，這些更改不會重新緩存。您必須修改清單文件本身才能讓瀏覽器刷新緩存文件。使用生成的版本號、文件哈希值或時間戳創建注釋行，可確保用戶獲得您的軟件的最新版。您還可以在出現新版本后，以編程方式更新緩存，如更新緩存部分中所述。
清單可包括以下三個不同部分：CACHE、NETWORK 和 FALLBACK。
CACHE：
這是條目的默認部分。系統會在首次下載此標頭下列出的文件（或緊跟在 CACHE MANIFEST 后的文件）后顯式緩存這些文件。
NETWORK：
此部分下列出的文件是需要連接到服務器的白名單資源。無論用戶是否處于離線狀態，對這些資源的所有請求都會繞過緩存?？墒褂猛ㄅ浞?。
FALLBACK：
此部分是可選的，用于指定無法訪問資源時的后備網頁。其中第一個 URI 代表資源，第二個代表后備網頁。兩個 URI 必須相關，并且必須與清單文件同源?？墒褂猛ㄅ浞?。
請注意：這些部分可按任意順序排列，且每個部分均可在同一清單中重復出現。
以下清單定義了用戶嘗試離線訪問網站的根時顯示的“綜合性”網頁 (offline.html)，也表明了其他所有資源（例如遠程網站上的資源）均需要互聯網連接。
CACHE MANIFEST
# 2010-06-18:v3
# Explicitly cached entries
index.html
css/style.css
# offline.html will be displayed if the user is offline
FALLBACK:
/ /offline.html
# All other resources (e.g. sites) require the user to be online.
NETWORK:
*
# Additional resources to cache
CACHE:
images/logo1.png
images/logo2.png
images/logo3.png請注意：系統會自動緩存引用清單文件的 HTML 文件。因此您無需將其添加到清單中，但我們建議您這樣做。
請注意：HTTP 緩存標頭以及對通過 SSL 提供的網頁設置的緩存限制將被替換為緩存清單。因此，通過 https 提供的網頁可實現離線運行。
更新緩存
應用在離線后將保持緩存狀態，除非發生以下某種情況：
用戶清除了瀏覽器對您網站的數據存儲。
清單文件經過修改。請注意：更新清單中列出的某個文件并不意味著瀏覽器會重新緩存該資源。清單文件本身必須進行更改。
應用緩存通過編程方式進行更新。
緩存狀態
window.applicationCache 對象是對瀏覽器的應用緩存的編程訪問方式。其 status 屬性可用于查看緩存的當前狀態：
復制代碼 代碼如下:www.CuoXIn.com
var appCache = window.applicationCache;
switch (appCache.status) {
case appCache.UNCACHED: // UNCACHED == 0
return 'UNCACHED';
break;
case appCache.IDLE: // IDLE == 1
return 'IDLE';
break;
case appCache.CHECKING: // CHECKING == 2
return 'CHECKING';
break;
case appCache.DOWNLOADING: // DOWNLOADING == 3
return 'DOWNLOADING';
break;
case appCache.UPDATEREADY: // UPDATEREADY == 4
return 'UPDATEREADY';
break;
case appCache.OBSOLETE: // OBSOLETE == 5
return 'OBSOLETE';
break;
default:
return 'UKNOWN CACHE STATUS';
break;
};
要以編程方式更新緩存，請先調用 applicationCache.update()。此操作將嘗試更新用戶的緩存（前提是已更改清單文件）。最后，當 applicationCache.status 處于 UPDATEREADY 狀態時，調用applicationCache.swapCache() 即可將原緩存換成新緩存。
復制代碼 代碼如下:www.CuoXIn.com
var appCache = window.applicationCache;
appCache.update(); // Attempt to update the user's cache.
...
if (appCache.status == window.applicationCache.UPDATEREADY) {
appCache.swapCache(); // The fetch was successful, swap in the new cache.
}
請注意：以這種方式使用 update() 和 swapCache() 不會向用戶提供更新的資源。此流程只是讓瀏覽器檢查是否有新的清單、下載指定的更新內容以及重新填充應用緩存。因此，還需要對網頁進行兩次重新加載才能向用戶提供新的內容，其中第一次是獲得新的應用緩存，第二次是刷新網頁內容。
好消息是，您可以避免重新加載兩次的麻煩。要使用戶更新到最新版網站，可設置監聽器，以監聽網頁加載時的 updateready 事件：
復制代碼 代碼如下:www.CuoXIn.com
// Check if a new cache is available on page load.
window.addEventListener('load', function(e) {
window.applicationCache.addEventListener('updateready', function(e) {
if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
// Browser downloaded a new app cache.
// Swap it in and reload the page to get the new hotness.
window.applicationCache.swapCache();
if (confirm('A new version of this site is available. Load it?')) {
window.location.reload();
}
} else {
// Manifest didn't changed. Nothing new to server.
}
}, false);
}, false);
APPCACHE 事件
正如您所預期的那樣，附加事件會用于監聽緩存的狀態。瀏覽器會對下載進度、應用緩存更新和錯誤狀態等情況觸發相應事件。以下代碼段為每種緩存事件類型設置了事件監聽器：
復制代碼 代碼如下:www.CuoXIn.com
function handleCacheEvent(e) {
//...
}
function handleCacheError(e) {
alert('Error: Cache failed to update!');
};
// Fired after the first cache of the manifest.
appCache.addEventListener('cached', handleCacheEvent, false);
// Checking for an update. Always the first event fired in the sequence.
appCache.addEventListener('checking', handleCacheEvent, false);
// An update was found. The browser is fetching resources.
appCache.addEventListener('downloading', handleCacheEvent, false);
// The manifest returns 404 or 410, the download failed,
// or the manifest changed while the download was in progress.
appCache.addEventListener('error', handleCacheError, false);
// Fired after the first download of the manifest.
appCache.addEventListener('noupdate', handleCacheEvent, false);
// Fired if the manifest file returns a 404 or 410.
// This results in the application cache being deleted.
appCache.addEventListener('obsolete', handleCacheEvent, false);
// Fired for each resource listed in the manifest as it is being fetched.
appCache.addEventListener('progress', handleCacheEvent, false);
// Fired when the manifest resources have been newly redownloaded.
appCache.addEventListener('updateready', handleCacheEvent, false);
如果清單文件或其中指定的資源無法下載，整個更新都將失敗。在這種情況下，瀏覽器將繼續使用原應用緩存
