当前位置： 移动技术网 > IT编程>网页制作>Html5 > HTML5离线缓存Manifest是什么

HTML5离线缓存Manifest是什么

2019年07月25日  | 移动技术网IT编程  | 我要评论

黄佳琰,烤瓷牙论坛,今日银价走势图

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

什么是manifest?

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

它有三大优势：

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

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

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

如何使用？

xml/html code复制内容到剪贴板
  1. <!doctype html>  
  2. <html manifest="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. 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是必须的，#后面是注释，下面是需要cache的文件，需要相对路径，network是需要每次请求加载的文件。
可以使用星号来指示所有其他资源/文件都需要因特网连接：
network:
*
fallback是如果无法建立因特网连接，则用 "404.html" 替代 /html5/ 目录中的所有文件。

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

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

c/c++ code复制内容到剪贴板
  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.   

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

c/c++ code复制内容到剪贴板
  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()并不会将更新后的资源 呈现给用户。这仅仅是让浏览器检查manifest文件是否发生了更新，然后下载指定的更新内容，重新填充app cache。因此，要让用户看到更新后的内容，需要两次页面下载，一次是更新app cache，一次是更新页面内容。

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

c/c++ code复制内容到剪贴板
  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);   

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

c/c++ code复制内容到剪贴板
  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文件或者该文件中指定的某个资源下载失败，那么整个更新都会失败。在这种情况下，浏览器会继续试用老的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的相关内容介绍，希望对大家的学习有所帮助。

原文：

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网