Html5 Application Cache

时间 2019-11-12

标签 html5 html application cache 栏目 HTML5 繁體版

原文原文链接

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

一、首先须要一个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:

二、在页面中引入上面完成的manifest文件，假如咱们的文件叫作 cache.manifest,则咱们的页面应该以下：

<!DOCTYPE html>

<head>

</head>

<body>

Test Application Cache.

change by admin

</body>

</html>

三、咱们在项目里引入了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

好了，到如今就能够体验离线带来的无限快乐与痛苦了。

个人体会是：

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

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

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