溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“初學者怎么使用Application Cache”，在日常操作中，相信很多人在初學者怎么使用Application Cache問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”初學者怎么使用Application Cache”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
對于web app來說，離線應用功能已經越來越重要。誠然，瀏覽器本身就有緩存機制，但是，這些緩存機制不夠可靠，可能并不會按你所想要的方式運行。HTML5則通過ApplicationCache接口處理了離線應用中的一些問題。
使用這個接口讓你的應用擁有三方面的優勢：
◆ 離線瀏覽——用戶在不能聯網的時候依然能瀏覽整個站點
◆ 高速——緩存資源是存儲在本地的，因此能更快加載。
◆ 更小的服務器負載——瀏覽器只需要從服務器端下載有改變的資源即可，相同資源不需要重復下載。
Application Cache(或 AppCache)讓一個開發者可以指定瀏覽器需要保存哪個文件。當用戶在離線情況下時，即使他們按了刷新按鈕，你的應用也能正確加載和工作。
CACHE MANIFEST 文件
cache manifest文件是一個簡單的文本文件，其中列出了瀏覽器需要緩存的資源。
引用一個MANIFEST文件
為了讓一個應用能啟用application cache，需要在文檔的html標簽中包含manifest屬性，如下所示：
<html manifest=”example.appcache”> … </html>
你需要在你想要緩存的web app的每一頁中都包含 manifest 屬性。如果一個頁面沒有 manifest屬性，它將不會被緩存(除非在manifest文件中顯式指定了這個頁面)。這意味著只要用戶訪問的頁面包含manifest屬性，它都將會被加入application cache中。這樣，就不用在manifest文件中指定需要緩存哪些頁面了。
Manifest屬性可以指定一個絕對URL或是一個相對路徑，但是，一個絕對URL需要和web app是同源的。一個manifest文件可以是任何擴展文件類型，但必須有正確的mime-type。如下所示：
<html manifest=”http://www.example.com/example.mf”> … </html>
一個manifest文件需要正確的mime-type，即text/cache-manifest。你可以在你的web服務器中加入一個定制文件類型(a custom file type)，或者加入一個 .htaccess 配置。
例如，為了在Apache中能夠解析這種mime-type，可以在你的配置文件中加入如下代碼：
AddType text/cache-manifest .appcache
或者，如果你的應用是在Google App Engine中，那么在app.yaml文件中加入代碼：
- url: /mystaticdir/(.*\.appcache) static_files: mystaticdir/\1 mime_type: text/cache-manifest upload: mystaticdir/(.*\.appcache)
MANIFEST FILE的結構
一個簡單的manifest文件看起來可能是下面這樣的：
CACHE MANIFEST
index.html
stylesheet.css
images/logo.png
scripts/main.js
這個示例將會緩存指定使用這個manifest的頁面中的四個文件。
有幾點是需要注意的：
◆ 必須在***行包括 CACHE MANIFEST 字符串。
◆ 站點所能緩存的數據上限是5MB 。但是，如果你是在為Chrome Web Store做開發的話，你可以使用unlimitedStorage 來去除這個限制。
◆ 如果manifest文件或者是其中指定的某個資源下載失敗的話，整個cache的更新都會失敗。在這種情況下，瀏覽器將會使用老的application cache。
下面來看一個更復雜的例子：
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
以“#”開頭的都是注釋，這些注釋還可以起到另外的作用。一個應用只有在manifest文件發生變化時才會更新cache。例如，如果你編輯了圖像或是改寫了一個Javascript函數，cache并不會發生更新。你必須改寫manifest文件本身來通知瀏覽器需要更新cache文件了。通過在manifest文件中添加一行注釋，在其中寫上版本號，或者文件hash值，或者時間戳，你都可以確保用戶擁有你的軟件的***版本。如果有新版本出現，你同樣可以以編程的方式更新cache，就跟在Updating the cache 中所討論的那樣。
一個manifest文件可能包括三個部分：CACHE, NETWORK 以及 FALLBACK.
CACHE:
這是默認部分，列在這個條目下的文件(或者緊跟在CACHE MANIFEST字符串之后的)都會在***次被下載后進入cache。
NETWORK:
這一部分中所列出的資源都是需要聯網使用的資源。它們都不會進入cache中，即使用戶處于離線狀態。這部分可能會使用Wildcards。
FALLBACK:
可選部分，指定了如果資源獲取失敗，將會呈現怎樣的頁面。***個URL是資源，第二個就是fallback頁面。兩個URL都必須是相對地址，并且由同一個manifest文件指定。可以使用Wildcards。
注意：這三部分可以以任何順序在manifest文件中出現，并且每部分都可以在一個manifest文件中出現多次。
下面的manifest文件定義了一個“catch-all”頁面(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
注意：引用了你的manifest文件的HTML文件都會自動被緩存，因此，沒有必要在你的manifest文件中再指定這個文件，但是，在manifest文件中指定這個文件是一種更好的做法。
注意：頁面上基于SSL的HTTP cache headers以及caching restrictions都會被cache manifests重寫。因此，基于https的頁面也能離線工作。
更新緩存(CACHE)
如果一個應用是在離線情況下，那么它會保持它的緩存狀態，除非有以下事件發生：
◆ 用戶清除了瀏覽器中存儲有你的站點的數據。
◆ manifest file 被修改了。注意：修改了在manifest文件中列出的某個文件并不會讓瀏覽器重新緩存資源。必須是manifest文件本身改變了，才會重新進行緩存。
◆ app cache通過編程更新了。
緩存狀態CACHE STATUS
在程序中，你可以通過window.applicationCache 對象來訪問瀏覽器的app cache。你可以查看 status 屬性來獲取cache的當前狀態：
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; };為了通過編程更新cache，首先調用 applicationCache.update()。這將會試圖更新用戶的cache(要求manifest文件已經改變)。***，當 applicationCache.status 處于 UPDATEREADY 狀態時，調用applicationCache.swapCache()，舊的cache就會被置換成新的。
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()并不會將更新后的資源呈現給用戶。這僅僅是讓瀏覽器檢查manifest文件是否發生了更新，然后下載指定的更新內容，重新填充app cache。因此，要讓用戶看到更新后的內容，需要兩次頁面下載，一次是更新app cache，一次是更新頁面內容。
好消息是，你可以避免兩次頁面下載帶來的麻煩。為了讓用戶能看到你的站點的***版本，設置一個監聽器來監聽頁面加載時的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. // 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事件(APPCACHE EVENTS)
也許你已經想到了，還有更多事件可以反映出cache的狀態。在諸如下載、app cache更新、出現錯誤等事件都會讓瀏覽器觸發相應事件。下面的代碼片段為每一類cache event都設置了監聽器：
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);如果manifest文件或者該文件中指定的某個資源下載失敗，那么整個更新都會失敗。在這種情況下，瀏覽器會繼續試用老的application cache。
到此，關于“初學者怎么使用Application Cache”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
