温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

HTML5的离线缓存Manifest是什么

发布时间:2021-09-15 15:39:19 来源:亿速云 阅读:130 作者:chen 栏目:web开发

这篇文章主要介绍“HTML5的离线缓存Manifest是什么”,在日常操作中,相信很多人在HTML5的离线缓存Manifest是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”HTML5的离线缓存Manifest是什么”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

什么是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 &lsquo;UNCACHED&rsquo;;   

  8.     

  9.     break;   

  10.     

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

  12.     

  13.     return &lsquo;IDLE&rsquo;;   

  14.     

  15.     break;   

  16.     

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

  18.     

  19.     return &lsquo;CHECKING&rsquo;;   

  20.     

  21.     break;   

  22.     

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

  24.     

  25.     return &lsquo;DOWNLOADING&rsquo;;   

  26.     

  27.     break;   

  28.     

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

  30.     

  31.     return &lsquo;UPDATEREADY&rsquo;;   

  32.     

  33.     break;   

  34.     

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

  36.     

  37.     return &lsquo;OBSOLETE&rsquo;;   

  38.     

  39.     break;   

  40.     

  41.   default:   

  42.     

  43.     return &lsquo;UKNOWN CACHE STATUS&rsquo;;   

  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&rsquo;s cache.   

  4.     

  5. &hellip;   

  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(&lsquo;load&rsquo;, function(e) {   

  4.     

  5.   window.applicationCache.addEventListener(&lsquo;updateready&rsquo;, 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&rsquo;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(&lsquo;cached&rsquo;, handleCacheEvent, false);   

  6.     

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

  8.     

  9. appCache.addEventListener(&lsquo;checking&rsquo;, handleCacheEvent, false);   

  10.     

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

  12.     

  13. appCache.addEventListener(&lsquo;downloading&rsquo;, 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(&lsquo;error&rsquo;, handleCacheError, false);   

  20.     

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

  22.     

  23. appCache.addEventListener(&lsquo;noupdate&rsquo;, 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(&lsquo;obsolete&rsquo;, handleCacheEvent, false);   

  30.     

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

  32.     

  33. appCache.addEventListener(&lsquo;progress&rsquo;, handleCacheEvent, false);   

  34.     

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

  36.     

  37. appCache.addEventListener(&lsquo;updateready&rsquo;, 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是什么”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI