• 技术文章 >web前端 >H5教程

    HTML5离线缓存Manifest是什么_html5教程技巧

    2016-05-16 15:51:34原创1420

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

    什么是manifest?

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

    它有三大优势：

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

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

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

    如何使用？

    XML/HTML Code复制内容到剪贴板
    1. >
    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
    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. var appCache = window.applicationCache;
    3. switch (appCache.status) {
    5. case appCache.UNCACHED: // UNCACHED == 0
    7. return ‘UNCACHED’;
    9. break;
    11. case appCache.IDLE: // IDLE == 1
    13. return ‘IDLE’;
    15. break;
    17. case appCache.CHECKING: // CHECKING == 2
    19. return ‘CHECKING’;
    21. break;
    23. case appCache.DOWNLOADING: // DOWNLOADING == 3
    25. return ‘DOWNLOADING’;
    27. break;
    29. case appCache.UPDATEREADY: // UPDATEREADY == 4
    31. return ‘UPDATEREADY’;
    33. break;
    35. case appCache.OBSOLETE: // OBSOLETE == 5
    37. return ‘OBSOLETE’;
    39. break;
    41. default:
    43. return ‘UKNOWN CACHE STATUS’;
    45. break;
    47. };

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

    C/C++ Code复制内容到剪贴板
    1. var appCache = window.applicationCache;
    3. appCache.update(); // Attempt to update the user’s cache.
    5. …
    7. if (appCache.status == window.applicationCache.UPDATEREADY) {
    9. appCache.swapCache(); // The fetch was successful, swap in the new cache.
    11. }

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

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

    C/C++ Code复制内容到剪贴板
    1. // Check if a new cache is available on page load.
    3. window.addEventListener(‘load’, function(e) {
    5. window.applicationCache.addEventListener(‘updateready’, function(e) {
    7. if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
    9. // Browser downloaded a new app cache.
    11. // Swap it in and reload the page to get the new hotness.
    13. window.applicationCache.swapCache();
    14. window.location.reload();
    16. } else {
    18. // Manifest didn’t changed. Nothing new to server.
    20. }
    22. }, false);
    24. }, false);

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

    C/C++ Code复制内容到剪贴板
    1. var appCache = window.applicationCache;
    3. // Fired after the first cache of the manifest.
    5. appCache.addEventListener(‘cached’, handleCacheEvent, false);
    7. // Checking for an update. Always the first event fired in the sequence.
    9. appCache.addEventListener(‘checking’, handleCacheEvent, false);
    11. // An update was found. The browser is fetching resources.
    13. appCache.addEventListener(‘downloading’, handleCacheEvent, false);
    15. // The manifest returns 404 or 410, the download failed,
    17. // or the manifest changed while the download was in progress.
    19. appCache.addEventListener(‘error’, handleCacheError, false);
    21. // Fired after the first download of the manifest.
    23. appCache.addEventListener(‘noupdate’, handleCacheEvent, false);
    25. // Fired if the manifest file returns a 404 or 410.
    27. // This results in the application cache being deleted.
    29. appCache.addEventListener(‘obsolete’, handleCacheEvent, false);
    31. // Fired for each resource listed in the manifest as it is being fetched.
    33. appCache.addEventListener(‘progress’, handleCacheEvent, false);
    35. // Fired when the manifest resources have been newly redownloaded.
    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

    声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。
    专题推荐：HTML5 离线缓存 Manifest
    上一篇：HTML5中语义化 b 和 i 标签_html5教程技巧 下一篇：自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • H5你真的了解吗？（绝对干货）• 小强的HTML5移动开发之路（11）——链接，图片，表格，框架• 小强的HTML5移动开发之路（16）——神奇的拖放功能• 小强的HTML5移动开发之路（19）——HTML5 Local Storage（本地存储）• 小强的HTML5移动开发之路（48）——（小练习）新闻订阅系统【1】
    1/1

    PHP中文网

    首页 首页课程 课程文章文章问答 问答博客博客词典 词典手册 手册资源 资源搜索 搜索APP下载 APP下载