利用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
可以看到以下内容：
斗胆翻译一下：
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上的介绍：
相关推荐
GimmeS 2020-05-15
ThinkMake 2020-11-13
学习web前端 2020-11-09
天空一样的蔚蓝 2020-10-23
curiousL 2020-08-03
sochrome 2020-07-29
SoarFly00 2020-06-28
LeoHan 2020-06-02
拭血 2020-06-02
lengyu0 2020-05-20
逸璞丷昊 2020-03-08
lengyu0 2020-05-10
viewerlin 2020-05-10
DAV数据库 2020-05-07
程序员俱乐部 2020-05-06
Vampor 2020-05-01
ROES 2020-04-22
lcyangcss 2020-04-21