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

今天学习了一下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 plain copy

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

     

     

3. html文件改造

         给 <html> 标签加 manifest 属性

[plain] view plain copy

  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 plain copy

  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 plain copy

  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 分类目录。将固定链接加入收藏夹。