利用HTML5的manifest文件做缓存

zhangzhaoaaa

浏览: 1343203 次
性别:
来自: 北京

最近访客更多访客>>

youhere

lbwleon

lzhfsailor

yungaoyue2005

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

HTML5

html5 manifest缓存

前两天面试，问到延迟加载和缓存页面资源的问题，最后问用没用过manifest。“真没用过啊，实话！”今天就来玩一玩manifest。

1.Application Cache是什么

2.Manifest文件是什么

3.如何更新缓存

4.实例

5.疑问

使用HTML5，通过创建cache manifest文件，可以轻松地创建web应用的离线版本。

1.Application Cache是什么

HTML5引入了应用程序缓存，这意味着web应用可进行缓存，并可在没有因特网连接时进行访问。

应用程序缓存为应用带来三个优势：

离线浏览-用户可在应用离线时使用它们
速度-已缓存资源加载得更快
减少服务器负载-浏览器将只从服务器下载更新或更改过的资源

2.Manifest文件是什么

manifest文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。

manifest文件可分为三部分：

CACHE MANIFEST-在此标题下列出的文件将在首次下载后进行缓存

NETWORK-在此标题下列出的文件需要与服务器连接，且不会被缓存

FALLBACK-在此标题下列出的文件规定当页面无法访问时的回退页面(如404页面)

3.如何更新缓存

一旦应用被缓存，它就会保持缓存直到发生下列情况：

用户清空浏览器缓存
manifest 文件被修改
由程序来更新应用缓存

在manifest文件中，加入日期或则版本号用来修改文件内容，进而去更新被manifest缓存的文件。

Tips:可以通过使用提供的例子，手工修改version号验证缓存的更新

我的manifest文件：my.appcache，文件后缀名为：appcache

CACHE MANIFEST
#VERSION 44
# 直接缓存的文件
CACHE:
./images/a.png
#需要在时间在线的文件
NETWORK:
./js/jquery.js
# 替代方案
FALLBACK:
/ /Test/b.html
#./x.css /Test/a.css

分析：

CACHE MANIFEST是必须的，表明是MANIFEST文件

#是注释

CACHE:表明需要缓存的资源，此处只缓存a.png，本页面不做缓存

NETWORK:表明在线加载的资源，在线加载jquery.js

FALLBACK:当访问某个错误路径时，都转到b.html

4.实例

a.html

<!DOCTYPE>
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <link href="x.css" rel="stylesheet" />
 </head>

 <body>
  <iframe style="display:none;" src="cache.html"></iframe>
  <div>hello
  <img src="./images/a.png" >
  </div>
  <script type="text/javascript" src="js/jquery.js"></script>
 </body>
</html>

cache.html

<!DOCTYPE>
<html manifest="./my.appcache">
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 </head>

 <body>
 </body>
</html>

你是不是迫不及待的想下载实例玩一把，看看缓存效果了？稍等，还差一步，就是tomcat的配置，需要在tomcat下的conf/web.xml中追加以下内容（copy过去即可），让tomcat认识manifest文件。

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

OK，保存重启tomcat，在浏览器中输入：http://localhost:8081/Test/a.html

可以看到以下内容：

事件流请参看：http://en.wikipedia.org/wiki/Cache_manifest_in_HTML5

斗胆翻译一下：

1.访问a.html页面

2.通过manifest文件，从Application Cache中下载了文档

3.Checking Event:当浏览器访问一个页面(cache.html)时并且读到了HTML元素的manifest属性时发生

4.Downloading Event:假如浏览器从未访问过manifest文件，它将下载文件中的所有资源

5.Progress:包含已经下载和余下未下载的文件的信息

6.Updateready:在重新下载完毕，这个事件被触发，意味着新的离线版本准备被使用

说明：为什么要在本页加个iframe呢？

我们设置的需要缓存的文件都会缓存，而且引用manifest的那个页面也被缓存了。这个很重要，这个是manifest的机制，它除了会缓存设置好的文件之外，还会缓存当前引用manifest文件的页面。这样我在修改当前页面内容的时候，浏览器端不会有变化，如果我不想缓存当前页面，我想在当前页面修改后，立马看到效果，怎么办？加入一个iframe引用cache页面，浏览器会缓存cache.html，不会缓存a.html页面。

5.疑问

我个人研究没有很深入，在FALLBACK中，如果写替换的跳转页面可以使用，但是写替换的css，图片等资源时，可以看到确实做了请求替换，但是页面并未出现效果，css未改，图片未显示出来，这里没有搞清原理，希望进行探讨。

W3CSCHOOL上的介绍：

http://www.w3school.com.cn/html5/html_5_app_cache.asp