在tomcat下支持html5离线存储

HTML5离线游览需要设置离线文件列表(manifest),manifest需要设置MIME类型,以便游览器正确识别,MIME类型错误是无法离线游览的。不同服务器有不同的设置方式,这里介绍Tomcat对HLTM5离线存储的配置过程。

1、在tomcat安装目录下找到 conf/web.xml 添加一个mime_type,可以加入到内的任意位置,当然,在mime-mapping其他标签附近易于管理维护。

 <mime-mapping>  
    <extension>manifest</extension>  
    <mime-type>text/cache-manifest</mime-type>  
 </mime-mapping> 

2、编写.manifest文件。
文件名可以随便命名,我的是my.manifest

CACHE MANIFEST  
#VERSION 3.9  
# 直接缓存的文件  
CACHE:  
/html5cache/test.html  
/html5cache/ebt.png  

#需要在时间在线的文件  
NETWORK:  
/html5cache/test.js  
/html5cache/damicTest.jsp  
# 替代方案  
FALLBACK: 

3、编写离线缓存的HTML文件

    <!DOCTYPE html>  
    <html manifest="/html5cache/test.manifest">  
        <head>  
        <meta charset="UTF-8">  
        <title>HTML5特性之离线缓存</title>  
        </head>  

        <body>  
        </body>  
    </html>  

关键一句就在上面。

—–拓展阅读——

HTML5 实现离线应用
1)、让apache 、nginx 或 IIS 支持 .manifest 文件
apache中把下面前面的#号去除掉,即可让服务组件支持HTML5的离线存储。
AddType text/cache-manifest .manifest
2)、 创建 manifest 文件

      CACHE MANIFEST     声明头文件头部
      #This is a comment
      CACHE                       离线存储文件
      style.css 
      NETWORK                 需要网络调用的文件
      search.jsp
      FALLBACK                  资源失效或不可用时更新文件
      test.html

3)、关联 manifest 文件到 html 文档

浏览器兼容情况参考:
IE: 不支持
Firefox: 3.5+
Safari: 4.0+
Chrome: 5.0+
Opera: 10.6+
iPhone: 2.1+
Android: 2.0+

HTML5 离线内容更新
*更新缓存
应用程序可以等待浏览器自动更新缓存,也可以使用 Javascript 接口手动触发更新。
*自动更新
浏览器除了在第一次访问 Web 应用时缓存资源外,只会在 cache manifest 文件本身发生变化时更新缓存。而 cache manifest 中的资源文件发生变化并不会触发更新。
*手动更新
开发者也可以使用 window.applicationCache 的接口更新缓存。方法是检测 window.applicationCache.status 的值,如果是 UPDATEREADY,那么可以调用 window.applicationCache.update() 更新缓存。示范代码如下。

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011100687/article/details/48768069
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭