搜索
热搜： 编程 Python Microsoft 编程语言 C++
首页> 前端开发 > Html > 正文

HTML5离线缓存Manifest是什么

发布时间：2023-01-16 04:41:16 来源：网络
.
在岁月中跋涉，每个人都有自己的故事，看淡心境才会秀丽，看开心情才会明媚。累时歇一歇，随清风漫舞，烦时静一静，与花草凝眸，急时缓一缓，和自己微笑。

web app不比PC，有性能和流量方面的考虑，离线应用越来越重要，虽然浏览器有缓存机制，但是时常不靠谱，更何况普通情况下html文件是没法缓存的，断网之后一切over。

什么是manifest?

简单来说manifest能让你的应用在无网的情况下也能访问。

它有三大优势：

1、离线浏览，无网情况下也能正常访问；

2、更快的加载速度，缓存在本地访问速度自然更快；

3、减轻服务请求压力，文件缓存后不需要再次请求，只需要请求需要更新的文件。

如何使用？

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPEHTML>
  2. <htmlmanifest="demo.appcache">
  3. ...
  4. </html>

你需要在你想要缓存的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复制内容到剪贴板
  1. CACHEMANIFEST
  2. #2012-02-21v1.0.0
  3. /theme.css
  4. /logo.gif
  5. /main.js
  7. NETWORK:
  8. login.asp
  10. FALLBACK:
  11. /html5//404.html

CACHE MANIFEST是必须的，#后面是注释，下面是需要cache的文件，需要相对路径，NETWORK是需要每次请求加载的文件。
可以使用星号来指示所有其他资源/文件都需要因特网连接：
NETWORK:
*
FALLBACK是如果无法建立因特网连接，则用 "404.html" 替代 /html5/ 目录中的所有文件。

更新机制
有三种方式更新manifest缓存：
1、用户清空浏览器缓存；
2、manifest文件被修改，哪怕是注释（所以可以通过修改注释来更新文件）
3、由程序来更新

缓存状态
在程序可以通过window.applicationCache属性来查看缓存状态。

C/C++ Code复制内容到剪贴板
  1. varappCache=window.applicationCache;
  3. switch(appCache.status){
  5. caseappCache.UNCACHED://UNCACHED==0
  7. return‘UNCACHED’;
  9. break;
  11. caseappCache.IDLE://IDLE==1
  13. return‘IDLE’;
  15. break;
  17. caseappCache.CHECKING://CHECKING==2
  19. return‘CHECKING’;
  21. break;
  23. caseappCache.DOWNLOADING://DOWNLOADING==3
  25. return‘DOWNLOADING’;
  27. break;
  29. caseappCache.UPDATEREADY://UPDATEREADY==4
  31. return‘UPDATEREADY’;
  33. break;
  35. caseappCache.OBSOLETE://OBSOLETE==5
  37. return‘OBSOLETE’;
  39. break;
  41. default:
  43. return‘UKNOWNCACHESTATUS’;
  45. break;
  47. };

为了通过编程更新cache，首先调用 applicationCache.update()。这将会试图更新用户的 cache（要求manifest文件已经改变）。最后，当 applicationCache.status 处于 UPDATEREADY 状态时， 调用applicationCache.swapCache()，旧的cache就会被置换成新的。

C/C++ Code复制内容到剪贴板
  1. varappCache=window.applicationCache;
  3. appCache.update();//Attempttoupdatetheuser’scache.
  5. …
  7. if(appCache.status==window.applicationCache.UPDATEREADY){
  9. appCache.swapCache();//Thefetchwassuccessful,swapinthenewcache.
  11. }

注意：像这样使用 update()和swapCache()并不会将更新后的资源 呈现给用户。这仅仅是让浏览器检查manifest文件是否发生了更新，然后下载指定的更新内容，重新填充app cache。因此，要让用户看到更新后的内容，需要两次页面下载，一次是更新app cache，一次是更新页面内容。

为了让用户能看到你的站点的最新版本，设置一个监听器来监听页面加载时的updateready 事件。

C/C++ Code复制内容到剪贴板
  1. //Checkifanewcacheisavailableonpageload.
  3. window.addEventListener(‘load’,function(e){
  5. window.applicationCache.addEventListener(‘updateready’,function(e){
  7. if(window.applicationCache.status==window.applicationCache.UPDATEREADY){
  9. //Browserdownloadedanewappcache.
  11. //Swapitinandreloadthepagetogetthenewhotness.
  13. window.applicationCache.swapCache();
  14. window.location.reload();
  16. }else{
  18. //Manifestdidn’tchanged.Nothingnewtoserver.
  20. }
  22. },false);
  24. },false);

监听事件，对不同的状态做出相应处理：

C/C++ Code复制内容到剪贴板
  1. varappCache=window.applicationCache;
  3. //Firedafterthefirstcacheofthemanifest.
  5. appCache.addEventListener(‘cached’,handleCacheEvent,false);
  7. //Checkingforanupdate.Alwaysthefirsteventfiredinthesequence.
  9. appCache.addEventListener(‘checking’,handleCacheEvent,false);
  11. //Anupdatewasfound.Thebrowserisfetchingresources.
  13. appCache.addEventListener(‘downloading’,handleCacheEvent,false);
  15. //Themanifestreturns404or410,thedownloadfailed,
  17. //orthemanifestchangedwhilethedownloadwasinprogress.
  19. appCache.addEventListener(‘error’,handleCacheError,false);
  21. //Firedafterthefirstdownloadofthemanifest.
  23. appCache.addEventListener(‘noupdate’,handleCacheEvent,false);
  25. //Firedifthemanifestfilereturnsa404or410.
  27. //Thisresultsintheapplicationcachebeingdeleted.
  29. appCache.addEventListener(‘obsolete’,handleCacheEvent,false);
  31. //Firedforeachresourcelistedinthemanifestasitisbeingfetched.
  33. appCache.addEventListener(‘progress’,handleCacheEvent,false);
  35. //Firedwhenthemanifestresourceshavebeennewlyredownloaded.
  37. 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.html

标签： Manifest
关于好代码 | 联系方式 | 版权声明 | 合作赞助 | 网站地图