HTML5使用ApplicationCache介面實作離線快取技術解決離線難題_html5教學技巧

簡介
離線存取對網路為基礎的應用而言越來越重要。雖然所有瀏覽器都有快取機制，但它們並不可靠，也不一定總是能起到預期的作用。 HTML5 使用 ApplicationCache 介面解決了由離線帶來的部分難題。
使用快取介面可為您的應用程式帶來以下三個優點：
離線瀏覽– 使用者可在離線時瀏覽您的完整網站
速度– 快取資源為本地資源，因此載入速度較快。
伺服器負載更少 – 瀏覽器只會從發生了變更的伺服器下載資源。

應用程式快取（又稱 AppCache）可讓開發人員指定瀏覽器應快取哪些檔案以供離線使用者存取。即使使用者在離線狀態下按了刷新按鈕，您的應用程式也會正常載入和運作。
快取清單文件
快取清單檔案是個簡單的文字文件，其中列出了瀏覽器應快取以供離線存取的資源。
引用清單檔案
要啟用某個應用程式的應用程式緩存，請在文件的html 標籤中加入manifest 屬性：

複製程式碼

代碼如下:

...

您應在要快取的網路應用程式的每個頁面上都新增manifest 屬性。如果網頁不包含 manifest 屬性，瀏覽器就不會快取該網頁（除非清單檔案中明確列出了該屬性）。這意味著使用者瀏覽的每個包含manifest 的網頁都會隱含地加入到應用程式快取。因此，您無需在清單中列出每個網頁。
manifest 屬性可指向絕對網址或相對路徑，但絕對網址必須與對應的網路套用同源。清單檔案可使用任何檔案副檔名，但必須以正確的 MIME 類型提供（請參閱下文）。

複製程式碼

程式碼如下:

...

清單檔案必須以 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: mystatdir/(. *.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'.
CAlicitly cached 'master entries'.

/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 其他 .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 played is offline
FALLBACK:
/ /offline.html
# All other resources (e.g. sites) require the user to be online.
NETWORK:
*
# Additional resources
CACHE:
images/logo1.png
images/logo2.png
images/logo3.png請注意：系統會自動快取引用清單檔案的HTML 檔案。因此您無需將其添加到清單中，但我們建議您這樣做。 請注意
：HTTP 快取標頭以及透過 SSL 提供的網頁設定的快取限制將被替換為快取清單。因此，透過 https 提供的網頁可離線運作。
更新快取

應用程式在離線後將保持快取狀態，除非發生以下某種情況：
使用者清除了瀏覽器對您網站的資料儲存。
清單檔案經過修改。請注意：更新清單中列出的某個文件並不意味著瀏覽器會重新快取該資源。清單文件本身必須進行更改。
應用程式快取透過程式設計方式進行更新。
快取狀態

window.applicationCache 物件是對瀏覽器的應用快取的程式存取方式。其 status 屬性可用於查看快取的目前狀態：

複製程式碼

程式碼如下:

var appCache = windowappliCache; 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: // WNWN
return 'DOWNLOADING';
break;
case appCache.UPDATEREADY: // UPDATEREADY == 4
return 'UPDATEREADY';
break;
//cSO appache. OBSOLETE == 5
return 'OBSOLETE';
break;
default:
return 'UKNOWN CACHE STATUS';
break;
};

要以程式設計方式更新緩存，請先呼叫applicationCache.update()。此操作將嘗試更新使用者的快取（前提是已更改清單檔案）。最後，當 applicationCache.status 處於 UPDATEREADY 狀態時，呼叫applicationCache.swapCache() 即可將原始快取換成新快取。

複製程式碼程式碼如下:

var appCache = window >appCache.update(); // Attempt to update the user's cache.
...
if (appCache.status == window.applicationCache.UPDATEREADY) {
appCache.sw(); //apCache(); // The fetch was successful, swap in the new cache.
}

請注意
：以這種方式使用update() 和swapCache() 不會提供使用者更新的資源。此流程只是讓瀏覽器檢查是否有新的清單、下載指定的更新內容以及重新填入應用程式快取。因此，還需要對網頁進行兩次重新加載才能向用戶提供新的內容，其中第一次是獲得新的應用程式緩存，第二次是刷新網頁內容。 好消息是，您可以避免重新加載兩次的麻煩。要使用戶更新到最新版網站，可設置監聽器，以監聽網頁加載時的updateready 事件：

複製代碼程式碼如下:

// 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. 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 事件

正如您所預期的那樣，附加事件會用於監聽快取的狀態。瀏覽器會對下載進度、應用程式快取更新和錯誤狀態等情況觸發對應事件。以下程式碼段為每個快取事件類型設定了事件監聽器：

複製程式碼

程式碼如下:

function handleCacheEvent(e) {
//...
}
function handleCacheError(e) {
alert('錯誤：快取更新失敗！');
};
// 在第一次快取清單後觸發。
appCache.addEventListener('快取',handleCacheEvent, false);
// 檢查更新。始終是序列中觸發的第一個事件。
appCache.addEventListener('正在檢查',handleCacheEvent, false);
// 發現更新。瀏覽器正在獲取資源。
appCache.addEventListener('正在下載', handleCacheEvent, false);
// 清單返回 404 或 410，下載失敗，
// 或在下載過程中清單已變更。
appCache.addEventListener('error', handleCacheError, false);
// 第一次下載清單後觸發。
appCache.addEventListener('noupdate', handleCacheEvent, false);
// 如果清單檔案回傳 404 或 410，則觸發。
// 這會導致應用程式快取被刪除。
appCache.addEventListener('已過時', handleCacheEvent, false);
// 在取​​得清單中列出的每個資源時觸發。
appCache.addEventListener('進度', handleCacheEvent, false);
// 當清單資源重新下載後觸發。
appCache.addEventListener('updateready', handleCacheEvent, false);

如果清單檔案或其中指定的資源無法下載，整個更新都會失敗。在這種情況下，瀏覽器將繼續使用原應用程式緩存