HTML5离线篇收藏--- cache manifest
自从翻译了《解读 HTML5：建议、技巧和技术》，就一直没有时间去看 HTML5 相关的东西。上周一次偶然的工作间隙折腾了下 Cache Manifest 。当时直接拿博客当测试环境，虽然应用起来非常简单，但效果却出奇的好。缓存后的速度，简直是惊人的快。像 Yslow 显示，打开一个缓存过的页面，只要0.729秒，比不缓存的差不多快了10倍，当时就震惊了，想深入了解一下。
一、什么是 Cache Manifest
话说，作为一个 web 开发相关的人员，都不会少听到、看到 cache 这个词。是的，上面也已经说了，它是一种缓存的机制。它可以通过一个 .manifest 文件来配置需要缓存的或者一定要保持联网缓存的文件。而重点就是这个 .manifest 文件，具体的可以 Google 一下，而简单的我帮你整理一下现在可能会希望了解的东西：
- MIME TYPE：text/cache-manifest
- 需要由你创建的：NAME.manifest
- 作用：主要是配置需要缓存的文件
二、如何实现
实现起来倒是非常简单（当然，这也是有问题的，这个我们后面讲解决方案），实现步骤如下：
- 在服务器上添加MIME TYPE支:
比如 Apache 中可在 .htaccess 中添加：
AddType text/cache-manifest manifest
- 创建 NAME.manifest:
其中第一行的 CACHE MANIFEST 标识是一定要有的，而 CACHE / NETWORK / FACKBACK 都是可选的。如果没有写标识，则默认缓存，CACHE 就不用说了，缓存；NETWORK 指不想缓存的页面，比如登陆页等；FALLBACK 是指当没有响应时的替代方案，比如我想请求某个页面，但这个页面的服务器挂了，那么，我可以显示另外一个指定的页面，文件结构如下：
CACHE MANIFEST # VERSION 0.3 # 直接缓存的文件 CACHE: abc.html images/sofish.png js/main.js css/layout.css # 需要在时间在线的文件 NETWORK: /wp-admin/ # 替代方案 FALLBACK: /ajax/ ajax.html
至于如何更新这个配置文件？只要改变文件的内容即可，上面的 # VERSION 0.3 其实只是一行注释，但改变文件可以重新缓存，这样写上版本号，想更新的时候修改版本号来重新缓存，是一种比较推荐的方法，甚至可以是最佳实践。
- 给 <html> 标签加 manifest 属性：
<html manifest="path/to/NAME.manifest">
是的，就是如此简单，相信你花上30分钟也就了解了。当时我也这样。随后也很快地应用上去。结果。结果就是像这篇文章一样还没写完，但没有时间折腾，而是速速把它撤下，等问题解决后再应用。
三、Cache Manifest 存在的问题
经过上面一整，速度当然爽，帮忙测试的人也小震惊了一下，只是，还是存在一些问题，看一下，然后我们尝试解决：
- 自动缓存引用了 manifest 文件的页面
即使在 NETWORK 中指定 "*"（所有的页面都）使用网络，还是不能解决它自动缓存当前页面。这使得这个页面在 manifest 没有变更的情况下，会一直以"类静态"存在。比如，你后台更新了一篇文章，这个动态的首页，还是像第一次缓存的时候一样，没有变。这对于静态页面还好，但应用在一个动态系统就很麻烦了，因为你的内容是时时要更新的。
- Firefox 弹出提示信息
可能是习惯了弹窗警告之类的，一不小心，用户还以为是网站被人挂马呢，想把不干净的东西存储到他的电脑。
四、解决方案
（一）关于自动缓存当前页面
我查了 w3c 的文档，也看了 《Pro HTML5 Programming》的第10章（Creating HTML5 Offline Web Applications），最后还是 div into HTML5 的那句话，原意大概是：这并不是 Bug，而是机制的需要。
真是杯具，反正我能理解到的是，这是一种强加的功能。虽然说这样会让页面载入更快，但对于动态页面来说就是恶心了。至少应该有一种让用户选择是否缓存当前页的配置方案（或者说是一个开关）。不过，这是暂时不能解决的，毕竟这还只是一个 Draft，我们要用，就应用找一个合适的方案。
我的想法是，看看大家有没有更好的办法。结果，查了一下，无果。新的东西，几乎所有文章说的都只是我上面说的那个如何去写一个 manifest 文件，看来还是没办法偷懒。然后，便开始想：
- 一定不要缓存动态的页面，当前页一定不能引用 manifest文件
- 能不能从其他页面先载入缓存？
那么，如果有解决方案的话，解决方法应该是：
- 不在当前页面引用 manifest
- 在用户打开页面之前，需要有一个页面来实现缓存机制
如果这样，那么为何不试一下 iframe 来引入一个拥有 manifest 的静态文件？但用 iframe 还能会缓存到文件？经过一翻测试，Google Chrome 的调试工具给了答案：
太给力啦！！竟然成功缓存。做法是这样的，新建一个 cache.html 文件来当做为当前页面的代理，内容如下：
<!DOCTYPE html>
<html manifest="http://www.sofish.de/sofished.manifest">
<head>
<meta charset=utf-8 />
<title>cache</title>
</head>
<body>
hi sofish!
</body>
</html>
然后，在每个页面通过 iframe 来引用这个静态文件，以达到我们不缓存当面页面，只缓存我们希望缓存文件的目的。
（二）关于 Firefox 弹出警告问题
这个，浏览器默认的，浏览器厂商的目的是为用户的安全着想，我们暂时也改变不了。其实，也不会有太大的影响，我也没有好好去想。
五、总结
测试下来，其实跟缓存当前页面还是有差别的，毕竟像站外的链接，特别是 gravatar 总要请求这么多图片，这点就又多了一点时间了。这现象主要出现在 Firefox 下，而 Webkit 而表示非常棒，速度几乎和缓存当前面一样，第二次打开的页面，都是瞬间响应的， 这点不得不赞啊。
对于实践的 Demo，本来可以提供一份，不过，瞄了一下，突然发现自己写得太专心了，已凌晨 2：49 了，明天还要上班。所以，打开你的调试工具，把本博当 Demo 看吧，这是最直接的应用了。
好吧，大概就这样，能为用户省多少就是多少，这是一个前端希望做到的，也是能做到的。这也算是有了 fallback 方案。期待你，看到最后的你，还有更好的方法。也期待 HTML5 的发展，期待这些给力的新技术。
