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() 更新缓存。示范代码如下。