web app不比PC，有性能和流量方面的考慮，離線應(yīng)用越來越重要，雖然瀏覽器有緩存機(jī)制，但是時(shí)常不靠譜，更何況普通情況下html文件是沒法緩存的，斷網(wǎng)之后一切over。
什么是manifest?
簡單來說manifest能讓你的應(yīng)用在無網(wǎng)的情況下也能訪問。
它有三大優(yōu)勢：
1、離線瀏覽，無網(wǎng)情況下也能正常訪問；
2、更快的加載速度，緩存在本地訪問速度自然更快；
3、減輕服務(wù)請(qǐng)求壓力，文件緩存后不需要再次請(qǐng)求，只需要請(qǐng)求需要更新的文件。
如何使用？
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <!DOCTYPE HTML>
- <html manifest="demo.appcache">
- ...
- </html>
你需要在你想要緩存的web app的每一頁中都包含 manifest 屬性。如果一個(gè)頁面沒有 manifest屬性，它將不會(huì)被緩存（除非在manifest文件中顯式指定了這 個(gè)頁面）。這意味著只要用戶訪問的頁面包含manifest屬性，它都將會(huì)被加入application cache中。這樣，就不用在manifest文件中指定需要緩存哪些頁面了。
Manifest屬性可以指定一個(gè)絕對(duì)URL或是一個(gè)相對(duì)路徑，但是，一個(gè)絕對(duì)URL需要和web app是同源的。一個(gè)manifest文件可以是任何擴(kuò)展文件類型，但必須有正確的mime-type，比如在Apache中添加
“AddType text/cache-manifest .appcache”。
Manifest文件
manifest 文件是簡單的文本文件，它告知瀏覽器被緩存的內(nèi)容（以及不緩存的內(nèi)容）。
manifest 文件可分為三個(gè)部分：
CACHE MANIFEST - 在此標(biāo)題下列出的文件將在首次下載后進(jìn)行緩存
NETWORK - 在此標(biāo)題下列出的文件需要與服務(wù)器的連接，且不會(huì)被緩存
FALLBACK - 在此標(biāo)題下列出的文件規(guī)定當(dāng)頁面無法訪問時(shí)的回退頁面（比如 404 頁面）
一個(gè)完整的manifest文件：
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- CACHE MANIFEST
- # 2012-02-21 v1.0.0
- /theme.css
- /logo.gif
- /main.js
-
- NETWORK:
- login.asp
-
- FALLBACK:
- /html5/ /404.html
-
CACHE MANIFEST是必須的，#后面是注釋，下面是需要cache的文件，需要相對(duì)路徑，NETWORK是需要每次請(qǐng)求加載的文件。
可以使用星號(hào)來指示所有其他資源/文件都需要因特網(wǎng)連接：
NETWORK:
*
FALLBACK是如果無法建立因特網(wǎng)連接，則用 "404.html" 替代 /html5/ 目錄中的所有文件。
更新機(jī)制
有三種方式更新manifest緩存：
1、用戶清空瀏覽器緩存；
2、manifest文件被修改，哪怕是注釋（所以可以通過修改注釋來更新文件）
3、由程序來更新
緩存狀態(tài)
在程序可以通過window.applicationCache屬性來查看緩存狀態(tài)。
C/C++ Code復(fù)制內(nèi)容到剪貼板
- 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，首先調(diào)用 applicationCache.update()。這將會(huì)試圖更新用戶的 cache（要求manifest文件已經(jīng)改變）。最后，當(dāng) applicationCache.status 處于 UPDATEREADY 狀態(tài)時(shí)， 調(diào)用applicationCache.swapCache()，舊的cache就會(huì)被置換成新的。
C/C++ Code復(fù)制內(nèi)容到剪貼板
- 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()并不會(huì)將更新后的資源 呈現(xiàn)給用戶。這僅僅是讓瀏覽器檢查manifest文件是否發(fā)生了更新，然后下載指定的更新內(nèi)容，重新填充app cache。因此，要讓用戶看到更新后的內(nèi)容，需要兩次頁面下載，一次是更新app cache，一次是更新頁面內(nèi)容。
為了讓用戶能看到你的站點(diǎn)的最新版本，設(shè)置一個(gè)監(jiān)聽器來監(jiān)聽頁面加載時(shí)的updateready 事件。
C/C++ Code復(fù)制內(nèi)容到剪貼板
- // 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();
- window.location.reload();
-
- } else {
-
- // Manifest didn’t changed. Nothing new to server.
-
- }
-
- }, false);
-
- }, false);
監(jiān)聽事件，對(duì)不同的狀態(tài)做出相應(yīng)處理：
C/C++ Code復(fù)制內(nèi)容到剪貼板
- var appCache = window.applicationCache;
-
- // 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文件或者該文件中指定的某個(gè)資源下載失敗，那么整個(gè)更新都會(huì)失敗。在這種情況下，瀏覽器會(huì)繼續(xù)試用老的application cache。
注意事項(xiàng)：
1. 站點(diǎn)離線存儲(chǔ)的容量限制是5M
2. 如果manifest文件，或者內(nèi)部列舉的某一個(gè)文件不能正常下載，整個(gè)更新過程將視為失敗，瀏覽器繼續(xù)全部使用老的緩存
3. 引用manifest的html必須與manifest文件同源，在同一個(gè)域下
4. 在manifest中使用的相對(duì)路徑，相對(duì)參照物為manifest文件
5. CACHE MANIFEST字符串應(yīng)在第一行，且必不可少
6. 系統(tǒng)會(huì)自動(dòng)緩存引用清單文件的 HTML 文件
7. manifest文件中CACHE則與NETWORK，F(xiàn)ALLBACK的位置順序沒有關(guān)系，如果是隱式聲明需要在最前面
8. FALLBACK中的資源必須和manifest文件同源
9. 當(dāng)一個(gè)資源被緩存后，該瀏覽器直接請(qǐng)求這個(gè)絕對(duì)路徑也會(huì)訪問緩存中的資源。
10. 站點(diǎn)中的其他頁面即使沒有設(shè)置manifest屬性，請(qǐng)求的資源如果在緩存中也從緩存中訪問
11. 當(dāng)manifest文件發(fā)生改變時(shí)，資源請(qǐng)求本身也會(huì)觸發(fā)更新
以上就是關(guān)于HTML5離線緩存Manifest的相關(guān)內(nèi)容介紹，希望對(duì)大家的學(xué)習(xí)有所幫助。
原文：http://www.cnblogs.com/hutuzhu/p/4871666.html
