HTML5離線緩存Manifest是什么

2020-03-24 17:58:30

字體：大中小

來源：轉載

供稿：網友

web app不比PC，有性能和流量方面的考慮，離線應用越來越重要，雖然瀏覽器有緩存機制，但是時常不靠譜，更何況普通情況下html文件是沒法緩存的，斷網之后一切over。什么是manifest?簡單來說manifest能讓你的應用在無網的情況下也能訪問。它有三大優勢：1、離線瀏覽，無網情況下也能正常訪問；2、更快的加載速度，緩存在本地訪問速度自然更快；3、減輕服務請求壓力，文件緩存后不需要再次請求，只需要請求需要更新的文件。如何使用？XML/HTML Code復制內容到剪貼板
你需要在你想要緩存的web app的每一頁中都包含 manifest 屬性。如果一個頁面沒有 manifest屬性，它將不會被緩存（除非在manifest文件中顯式指定了這個頁面）。這意味著只要用戶訪問的頁面包含manifest屬性，它都將會被加入application cache中。這樣，就不用在manifest文件中指定需要緩存哪些頁面了。Manifest屬性可以指定一個絕對URL或是一個相對路徑，但是，一個絕對URL需要和web app是同源的。一個manifest文件可以是任何擴展文件類型，但必須有正確的mime-type，比如在Apache中添加 AddType text/cache-manifest .appcache 。Manifest文件manifest 文件是簡單的文本文件，它告知瀏覽器被緩存的內容（以及不緩存的內容）。manifest 文件可分為三個部分：CACHE MANIFEST - 在此標題下列出的文件將在首次下載后進行緩存
NETWORK - 在此標題下列出的文件需要與服務器的連接，且不會被緩存
FALLBACK - 在此標題下列出的文件規定當頁面無法訪問時的回退頁面（比如 404 頁面）一個完整的manifest文件：XML/HTML Code復制內容到剪貼板
CACHE MANIFEST是必須的，#后面是注釋，下面是需要cache的文件，需要相對路徑，NETWORK是需要每次請求加載的文件。
可以使用星號來指示所有其他資源/文件都需要因特網連接：
NETWORK:
*
FALLBACK是如果無法建立因特網連接，則用 404.html 替代 /html5/ 目錄中的所有文件。更新機制
有三種方式更新manifest緩存：
1、用戶清空瀏覽器緩存；
2、manifest文件被修改，哪怕是注釋（所以可以通過修改注釋來更新文件）
3、由程序來更新緩存狀態
在程序可以通過window.applicationCache屬性來查看緩存狀態。C/C++ Code復制內容到剪貼板
caseappCache.UNCACHED://UNCACHED==0 return UNCACHED break; caseappCache.IDLE://IDLE==1 return IDLE break; caseappCache.CHECKING://CHECKING==2 return CHECKING break; caseappCache.DOWNLOADING://DOWNLOADING==3 return DOWNLOADING break; caseappCache.UPDATEREADY://UPDATEREADY==4 return UPDATEREADY break; caseappCache.OBSOLETE://OBSOLETE==5 return OBSOLETE break; default: return UKNOWNCACHESTATUS break; };
為了通過編程更新cache，首先調用 applicationCache.update()。這將會試圖更新用戶的 cache（要求manifest文件已經改變）。最后，當 applicationCache.status 處于 UPDATEREADY 狀態時，調用applicationCache.swapCache()，舊的cache就會被置換成新的。C/C++ Code復制內容到剪貼板
appCache.update();//Attempttoupdatetheuser scache. if(appCache.status==window.applicationCache.UPDATEREADY){ appCache.swapCache();//Thefetchwassuccessful,swapinthenewcache. }
注意：像這樣使用 update()和swapCache()并不會將更新后的資源呈現給用戶。這僅僅是讓瀏覽器檢查manifest文件是否發生了更新，然后下載指定的更新內容，重新填充app cache。因此，要讓用戶看到更新后的內容，需要兩次頁面下載，一次是更新app cache，一次是更新頁面內容。為了讓用戶能看到你的站點的最新版本，設置一個監聽器來監聽頁面加載時的updateready 事件。C/C++ Code復制內容到剪貼板
//Checkifanewcacheisavailableonpageload. window.addEventListener( load ,function(e){ window.applicationCache.addEventListener( updateready ,function(e){ if(window.applicationCache.status==window.applicationCache.UPDATEREADY){ //Browserdownloadedanewappcache. //Swapitinandreloadthepagetogetthenewhotness. window.applicationCache.swapCache(); window.location.reload(); }else{ //Manifestdidn tchanged.Nothingnewtoserver. } },false); },false);
//Firedafterthefirstcacheofthemanifest. appCache.addEventListener( cached ,handleCacheEvent,false); //Checkingforanupdate.Alwaysthefirsteventfiredinthesequence. appCache.addEventListener( checking ,handleCacheEvent,false); //Anupdatewasfound.Thebrowserisfetchingresources. appCache.addEventListener( downloading ,handleCacheEvent,false); //Themanifestreturns404or410,thedownloadfailed, //orthemanifestchangedwhilethedownloadwasinprogress. appCache.addEventListener( error ,handleCacheError,false); //Firedafterthefirstdownloadofthemanifest. appCache.addEventListener( noupdate ,handleCacheEvent,false); //Firedifthemanifestfilereturnsa404or410. //Thisresultsintheapplicationcachebeingdeleted. appCache.addEventListener( obsolete ,handleCacheEvent,false); //Firedforeachresourcelistedinthemanifestasitisbeingfetched. appCache.addEventListener( progress ,handleCacheEvent,false); //Firedwhenthemanifestresourceshavebeennewlyredownloaded. appCache.addEventListener( updateready ,handleCacheEvent,false);
如果manifest文件或者該文件中指定的某個資源下載失敗，那么整個更新都會失敗。在這種情況下，瀏覽器會繼續試用老的application cache。注意事項：1. 站點離線存儲的容量限制是5M
2. 如果manifest文件，或者內部列舉的某一個文件不能正常下載，整個更新過程將視為失敗，瀏覽器繼續全部使用老的緩存
3. 引用manifest的html必須與manifest文件同源，在同一個域下
4. 在manifest中使用的相對路徑，相對參照物為manifest文件
5. CACHE MANIFEST字符串應在第一行，且必不可少
6. 系統會自動緩存引用清單文件的 HTML 文件
7. manifest文件中CACHE則與NETWORK，FALLBACK的位置順序沒有關系，如果是隱式聲明需要在最前面
8. FALLBACK中的資源必須和manifest文件同源
9. 當一個資源被緩存后，該瀏覽器直接請求這個絕對路徑也會訪問緩存中的資源。
10. 站點中的其他頁面即使沒有設置manifest屬性，請求的資源如果在緩存中也從緩存中訪問
11. 當manifest文件發生改變時，資源請求本身也會觸發更新以上就是關于HTML5離線緩存Manifest的相關內容介紹，希望對大家的學習有所幫助。原文：http://www.cnblogs.com/hutuzhu/p/4871666.htmlhtml教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：總結html嵌套實例用法

下一篇：韓順平最新html基礎視頻教程的資料（源碼、課件）推薦