html5 中创建manifest缓存以及更新方法

admin web前端 暂无评论 1,599 浏览

今天学习了一下manifest的相关知识，整理记录如下，以备将来查阅。

一、manifest

  • MIME TYPE：text/cache-manifest
  • 需要由你创建的：NAME.manifest
  • 作用：主要是配置需要缓存的文件
二、实现
  1. 在服务器上添加MIME TYPE支:比如 Apache 中可在 .htaccess 中添加： 
    AddType text/cache-manifest manifest
  2. 创建 NAME.manifest:其中第一行的 CACHE MANIFEST 标识是一定要有的（测试时发现火狐不加也能缓存成功，但不知是否有其他影响）；

    CACHE / NETWORK / FACKBACK 三个关键字用于不同功能，CACHE 缓存；NETWORK 指不想缓存的页面；FALLBACK 是指当没有响应时的替代方案，比如我想请求某个页面，但这个页面的服务器挂了，那么，我可以显示另外一个指定的页面；

    文件编码最好使用utf-8；

    行开头“#”是注释；

     

    [plain] view plaincopy

    1. CACHE MANIFEST
    2. # VERSION
    4. # 直接缓存的文件d
    5. CACHE:
    6. m.js
    7. m1.js
    9. # 需要在时间在线的文件
    10. NETWORK:
    11. cache.html
    13. # 替代方案
    14. FALLBACK:
    15. #/ajax/ ajax.html

     

     

3. html文件改造

给 <html> 标签加 manifest 属性

 

[plain] view plaincopy

  1. <html manifest="m.manifest">
  2. <head>
  3.     <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  4.     <script type="text/javascript" src="m.js"></script>
  5. </head>
  6. <body>
  7. ver:5<p>
  8. <input type="button" value="shwo_ver" onclick="show_ver();" /><p>
  9. <input type="button" value="load_js" onclick="load_js();" /><p>
  10. <input type="button" value="is_online" onclick="is_online();" /><p>
  11. </body>
  12. </html>

三、测试

 

chrome的开发者工具 》Console  会显示创建缓存的情况

 

[plain] view plaincopy

  1. Document was loaded from Application Cache with manifest http://127.0.0.1/work/html5/manifest/m.manifest
  2. Application Cache Checking event
  3. Application Cache Downloading event
  4. Application Cache Progress event (0 of 4) http://127.0.0.1/work/html5/manifest/m.js
  5. Application Cache Progress event (1 of 4) http://127.0.0.1/work/html5/manifest/m1.js
  6. Application Cache Progress event (2 of 4) http://127.0.0.1/work/html5/manifest/cache.html
  7. Application Cache Progress event (3 of 4) http://127.0.0.1/work/html5/manifest/cache1.html
  8. Application Cache Progress event (4 of 4)
  9. Application Cache UpdateReady event

四、关于更新

 

1.自动更新：浏览器除了在第一次访问 Web 应用时缓存资源外，只会在 cache manifest 文件本身发生变化（即使是注释变化）时更新缓存。而 cache manifest 中的资源文件发生变化并不会触发更新。
2.手动更新：开发者也可以使用 window.applicationCache 的接口更新缓存。方法是检测 window.applicationCache.status 的值，如果是 UPDATEREADY，那么可以调用 window.applicationCache.update() 更新缓存。示范代码如下。

[javascript] view plaincopy

  1. if (window.applicationCache.status == window.applicationCache.UPDATEREADY) ｛
  2.         window.applicationCache.update();
  3. ｝

五、在线状态检测和监视

 

1.检测：navigator.onLine 属性表示当前是否在线。如果为 true, 表示在线；如果为 false, 表示离线

2.监视：当在线 / 离线状态切换时会触发online/offline 事件，这两个事件触发在 body 元素上，并且沿着 document.body、document 和 window 的顺序冒泡。

 

 

参考：

使用 HTML5 开发离线应用   http://www.189works.com/article-68089-1.html

HTML5离线篇收藏--- cache manifest  http://www.cnblogs.com/brainmao/archive/2011/09/27/2193495.html

相关博文

html5 中创建manifest缓存以及更新方法
赏
标签: