復制代碼代碼如下: 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 提供的網頁可實現離線運行。
復制代碼代碼如下: 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. }
復制代碼代碼如下: // 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);
復制代碼代碼如下: 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);
