HTML5 application cache

来源：互联网发布：高考失利知乎编辑：程序博客网时间：2024/05/18 01:59

HTML5带来了application cache这一新特性，好多文档和书籍介绍了使用它来进行离线应用的开发，由于自己做的手机应用还得面临弱爆的GPRS网络，也考虑使用以下来改善用户的体验性，使用过程中也遇到了一些困惑和不解，比如他的FALLBACK功能就没有实现，还好这个功能对我们的应用来说不是那么的非用不可，时间也紧张，就没有深究它了，下面说一下Application Cache实现离线的基本步骤（所有代码在chrome和firefox上测试通过）。

1、首先需要一个manifest文件来保存需要离线的文件和页面的信息，文件的结构如下：

CACHE MANIFEST #必须放在开头，“#”用来做注释

#VERSION 1.6

#cache块是需要缓存到本地的文件列表

CACHE:

static/js/lib/zepto.js

static/js/lib/zepto-min.js

static/css/m.css

test.html

static/css/test.css

nav

nav.htm

#network块是不需要缓存的文件列表，配为“*”的话浏览器会请求除cache块中的所有文件

NETWORK:

#fallback块每一行有两个文件，此配置的作用是当地一个不能从服务器请求到就用第二个文件来代替，很明显第二个是

#事先就缓存到了浏览器里了，这个没有测试通过，感兴趣的同学可以自己试试。

FALLBACK:

2、在页面中引入上面完成的manifest文件，假如我们的文件叫做 cache.manifest,则我们的页面应该如下：

<!DOCTYPE html>

<head>

</head>

<body>

Test Application Cache.

change by admin

</body>

</html>

3、我们在项目里引入了cache.manifest文件，浏览器需要去读取清单，所以就需要我们的服务器支持 text/cache-manifest这个mime类型。下面是一些主流服务器的配置方法：

tomcat ：

在安装目录的cof/web.xml中增加如下的代码：

<mime-mapping>

<extension>manifest</extension>

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

</mime-mapping>

apache：

在网络根目录的.htaccess文件中添加一个AddType指令：AddType text/cache-manifest .manifest

好了，到现在就可以体验离线带来的无限快乐与痛苦了。

我的体会是：

1、manifest文件格式一定不能错，错了浏览器也不会给任何提示，只是不给你用离线功能了，很悲催。

2、设置过manifest的页面会被自动缓存，直到清楚浏览器数据

3、被设置缓存的页面会被永久的被保存，但是用户在被缓存的页面清空浏览器数据时，此页面会被重新加载再次缓存

0 0