HTML5线下缓存文件Manifest是甚么

日期:2021-02-27 类型:科技新闻 

关键词:html网页制作,php网页制作,网页设计稿,网页编辑工具,学生网页设计模板

web app不比PC,性爱能和总流量层面的考虑到,线下运用愈来愈关键,尽管访问器有缓存文件体制,可是经常不可靠,何况一般状况下html文档是无法缓存文件的,断网以后1切over。

甚么是manifest?

简易来讲manifest能让你的运用在无网的状况下也能浏览。

它有3大优点

1、线下访问,无网状况下也能一切正常浏览;

2、更快的载入速率,缓存文件在当地浏览速率当然更快;

3、减轻服务恳求工作压力,文档缓存文件后不必须再度恳求,只必须恳求必须升级的文档。

怎样应用?

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE HTML>  
  2. <html manifest="demo.appcache">  
  3. ...   
  4. </html>  

你必须在你要想缓存文件的web app的每页中都包括 manifest 特性。假如1个网页页面沒有 manifest特性,它将不容易被缓存文件(除非在manifest文档中显式特定了这 个网页页面)。这代表着要是客户浏览的网页页面包括manifest特性,它都可能被添加application cache中。这样,就无需在manifest文档中特定必须缓存文件哪些网页页面了。

Manifest特性能够特定1个肯定URL或是1个相对性相对路径,可是,1个肯定URL必须和web app是同宗的。1个manifest文档能够是任何拓展文档种类,但务必有正确的mime-type,例如在Apache中加上

“AddType text/cache-manifest .appcache”。

Manifest文档

manifest 文档是简易的文字文档,它告之访问器被缓存文件的內容(和不缓存文件的內容)。

manifest 文档可分成3个一部分:

CACHE MANIFEST - 在此题目以下出的文档将在初次免费下载落后行缓存文件
NETWORK - 在此题目以下出的文档必须与服务器的联接,且不容易被缓存文件
FALLBACK - 在此题目以下出的文档要求当网页页面没法浏览时的返回网页页面(例如 404 网页页面)

1个详细的manifest文档:

XML/HTML Code拷贝內容到剪贴板
  1. CACHE MANIFEST   
  2. # 2012-02⑵1 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/ 文件目录中的全部文档。

升级体制
有3种方法升级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。因而,要让客户看到升级后的內容,必须两次网页页面免费下载,1次是升级app cache,1次是升级网页页面內容。

以便让客户能看到你的站点的全新版本号,设定1个监视器来监视网页页面载入时的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文档,或內部例举的某1个文档不可以一切正常免费下载,全部升级全过程将视作不成功,访问器再次所有应用老的缓存文件
3. 引入manifest的html务必与manifest文档同宗,在同1个域下
4. 在manifest中应用的相对性相对路径,相对性参考物为manifest文档
5. CACHE MANIFEST标识符串应在第1行,且必不能少
6. 系统软件会全自动缓存文件引入清单文档的 HTML 文档
7. manifest文档中CACHE则与NETWORK,FALLBACK的部位次序沒有关联,假如是隐式申明必须在最前面
8. FALLBACK中的資源务必和manifest文档同宗
9. 当1个資源被缓存文件后,该访问器立即恳求这个肯定相对路径也会浏览缓存文件中的資源。
10. 站点中的别的网页页面即便沒有设定manifest特性,恳求的資源假如在缓存文件中也从缓存文件中浏览
11. 当manifest文档产生更改时,資源恳求自身也会开启升级

以上便是有关HTML5线下缓存文件Manifest的有关內容详细介绍,期待对大伙儿的学习培训有一定的协助。

原文:http://www.cnblogs.com/hutuzhu/p/4871666.html

上一篇:HTML5文本文档构造标识 返回下一篇:没有了