這篇文章主要介紹“HTML5的離線緩存Manifest是什么”，在日常操作中，相信很多人在HTML5的離線緩存Manifest是什么問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”HTML5的離線緩存Manifest是什么”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

成都創(chuàng)新互聯(lián)公司堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿(mǎn)足客戶(hù)于互聯(lián)網(wǎng)時(shí)代的雙柏網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

什么是manifest?

簡(jiǎn)單來(lái)說(shuō)manifest能讓你的應(yīng)用在無(wú)網(wǎng)的情況下也能訪問(wèn)。

它有三大優(yōu)勢(shì)：

1、離線瀏覽，無(wú)網(wǎng)情況下也能正常訪問(wèn)；

2、更快的加載速度，緩存在本地訪問(wèn)速度自然更快；

3、減輕服務(wù)請(qǐng)求壓力，文件緩存后不需要再次請(qǐng)求，只需要請(qǐng)求需要更新的文件。

如何使用？

XML/HTML Code復(fù)制內(nèi)容到剪貼板

1.   

2.   

3. ...   

4.   

你需要在你想要緩存的web app的每一頁(yè)中都包含 manifest 屬性。如果一個(gè)頁(yè)面沒(méi)有 manifest屬性，它將不會(huì)被緩存（除非在manifest文件中顯式指定了這 個(gè)頁(yè)面）。這意味著只要用戶(hù)訪問(wèn)的頁(yè)面包含manifest屬性，它都將會(huì)被加入application cache中。這樣，就不用在manifest文件中指定需要緩存哪些頁(yè)面了。

Manifest屬性可以指定一個(gè)絕對(duì)URL或是一個(gè)相對(duì)路徑，但是，一個(gè)絕對(duì)URL需要和web app是同源的。一個(gè)manifest文件可以是任何擴(kuò)展文件類(lèi)型，但必須有正確的mime-type，比如在Apache中添加

“AddType text/cache-manifest .appcache”。

Manifest文件

manifest 文件是簡(jiǎn)單的文本文件，它告知瀏覽器被緩存的內(nèi)容（以及不緩存的內(nèi)容）。

manifest 文件可分為三個(gè)部分：

CACHE MANIFEST -在此標(biāo)題下列出的文件將在首次下載后進(jìn)行緩存
NETWORK -在此標(biāo)題下列出的文件需要與服務(wù)器的連接，且不會(huì)被緩存
FALLBACK -在此標(biāo)題下列出的文件規(guī)定當(dāng)頁(yè)面無(wú)法訪問(wèn)時(shí)的回退頁(yè)面（比如 404 頁(yè)面）

一個(gè)完整的manifest文件：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

1. CACHE MANIFEST   

2. # 2012-02-21 v1.0.0   

3. /theme.css   

4. /logo.gif   

5. /main.js   

6.   

7. NETWORK:   

8. login.asp   

9.   

10. FALLBACK:   

11. /html5/ /404.html   

12.   

CACHE MANIFEST是必須的，#后面是注釋?zhuān)旅媸切枰猚ache的文件，需要相對(duì)路徑，NETWORK是需要每次請(qǐng)求加載的文件。
可以使用星號(hào)來(lái)指示所有其他資源/文件都需要因特網(wǎng)連接：
NETWORK:
*
FALLBACK是如果無(wú)法建立因特網(wǎng)連接，則用 "404.html" 替代 /html5/ 目錄中的所有文件。

更新機(jī)制
有三種方式更新manifest緩存：
1、用戶(hù)清空瀏覽器緩存；
2、manifest文件被修改，哪怕是注釋?zhuān)ㄋ钥梢酝ㄟ^(guò)修改注釋來(lái)更新文件）
3、由程序來(lái)更新

緩存狀態(tài)
在程序可以通過(guò)window.applicationCache屬性來(lái)查看緩存狀態(tài)。

C/C++ Code復(fù)制內(nèi)容到剪貼板

1. var appCache = window.applicationCache;   

2.     

3. switch (appCache.status) {   

4.     

5.   case appCache.UNCACHED: // UNCACHED == 0  

6.     

7.     return ‘UNCACHED’;   

8.     

9.     break;   

10.     

11.   case appCache.IDLE: // IDLE == 1  

12.     

13.     return ‘IDLE’;   

14.     

15.     break;   

16.     

17.   case appCache.CHECKING: // CHECKING == 2  

18.     

19.     return ‘CHECKING’;   

20.     

21.     break;   

22.     

23.   case appCache.DOWNLOADING: // DOWNLOADING == 3  

24.     

25.     return ‘DOWNLOADING’;   

26.     

27.     break;   

28.     

29.   case appCache.UPDATEREADY:  // UPDATEREADY == 4  

30.     

31.     return ‘UPDATEREADY’;   

32.     

33.     break;   

34.     

35.   case appCache.OBSOLETE: // OBSOLETE == 5  

36.     

37.     return ‘OBSOLETE’;   

38.     

39.     break;   

40.     

41.   default:   

42.     

43.     return ‘UKNOWN CACHE STATUS’;   

44.     

45.     break;   

46.     

47. };   

48.   

為了通過(guò)編程更新cache，首先調(diào)用 applicationCache.update()。這將會(huì)試圖更新用戶(hù)的 cache（要求manifest文件已經(jīng)改變）。最后，當(dāng) applicationCache.status 處于 UPDATEREADY 狀態(tài)時(shí)， 調(diào)用applicationCache.swapCache()，舊的cache就會(huì)被置換成新的。

C/C++ Code復(fù)制內(nèi)容到剪貼板

1. var appCache = window.applicationCache;   

2.     

3. appCache.update(); // Attempt to update the user’s cache.  

4.     

5. …   

6.     

7. if (appCache.status == window.applicationCache.UPDATEREADY) {   

8.     

9.   appCache.swapCache();  // The fetch was successful, swap in the new cache.  

10.     

11. }   

12.   

注意：像這樣使用 update()和swapCache()并不會(huì)將更新后的資源 呈現(xiàn)給用戶(hù)。這僅僅是讓瀏覽器檢查manifest文件是否發(fā)生了更新，然后下載指定的更新內(nèi)容，重新填充app cache。因此，要讓用戶(hù)看到更新后的內(nèi)容，需要兩次頁(yè)面下載，一次是更新app cache，一次是更新頁(yè)面內(nèi)容。

為了讓用戶(hù)能看到你的站點(diǎn)的最新版本，設(shè)置一個(gè)監(jiān)聽(tīng)器來(lái)監(jiān)聽(tīng)頁(yè)面加載時(shí)的updateready 事件。

C/C++ Code復(fù)制內(nèi)容到剪貼板

1. // Check if a new cache is available on page load.  

2.     

3. window.addEventListener(‘load’, function(e) {   

4.     

5.   window.applicationCache.addEventListener(‘updateready’, function(e) {   

6.     

7.     if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {   

8.     

9.       // Browser downloaded a new app cache.  

10.     

11.       // Swap it in and reload the page to get the new hotness.  

12.     

13.       window.applicationCache.swapCache();   

14.         window.location.reload();   

15.     

16.     } else {   

17.     

18.       // Manifest didn’t changed. Nothing new to server.  

19.     

20.     }   

21.     

22.   }, false);   

23.     

24. }, false);   

監(jiān)聽(tīng)事件，對(duì)不同的狀態(tài)做出相應(yīng)處理：

C/C++ Code復(fù)制內(nèi)容到剪貼板

1. var appCache = window.applicationCache;   

2.   

3. // Fired after the first cache of the manifest.  

4.   

5. appCache.addEventListener(‘cached’, handleCacheEvent, false);   

6.     

7. // Checking for an update. Always the first event fired in the sequence.  

8.     

9. appCache.addEventListener(‘checking’, handleCacheEvent, false);   

10.     

11. // An update was found. The browser is fetching resources.  

12.     

13. appCache.addEventListener(‘downloading’, handleCacheEvent, false);   

14.     

15. // The manifest returns 404 or 410, the download failed,  

16.     

17. // or the manifest changed while the download was in progress.  

18.     

19. appCache.addEventListener(‘error’, handleCacheError, false);   

20.     

21. // Fired after the first download of the manifest.  

22.     

23. appCache.addEventListener(‘noupdate’, handleCacheEvent, false);   

24.     

25. // Fired if the manifest file returns a 404 or 410.  

26.     

27. // This results in the application cache being deleted.  

28.     

29. appCache.addEventListener(‘obsolete’, handleCacheEvent, false);   

30.     

31. // Fired for each resource listed in the manifest as it is being fetched.  

32.     

33. appCache.addEventListener(‘progress’, handleCacheEvent, false);   

34.     

35. // Fired when the manifest resources have been newly redownloaded.  

36.     

37. 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è)更新過(guò)程將視為失敗，瀏覽器繼續(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的位置順序沒(méi)有關(guān)系，如果是隱式聲明需要在最前面
8. FALLBACK中的資源必須和manifest文件同源
9. 當(dāng)一個(gè)資源被緩存后，該瀏覽器直接請(qǐng)求這個(gè)絕對(duì)路徑也會(huì)訪問(wèn)緩存中的資源。
10. 站點(diǎn)中的其他頁(yè)面即使沒(méi)有設(shè)置manifest屬性，請(qǐng)求的資源如果在緩存中也從緩存中訪問(wèn)
11. 當(dāng)manifest文件發(fā)生改變時(shí)，資源請(qǐng)求本身也會(huì)觸發(fā)更新

到此，關(guān)于“HTML5的離線緩存Manifest是什么”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！