HTML5 之离线应用Manifest

HTML5 之离线应用Manifest

我们知道，使用传统的技术，就算是对站点的资源都实施了比较好的缓存策略，但是在断网的情况下，是无法访问的，因为入口的HTML页面我们一般运维的考虑，不会对其进行缓存。HTML5的Cache Manifest离线应用特性就能够帮助我们构建离线也能使用的站点，所有的资源都使用浏览器本地缓存，当然前提是要求在联网的情形下使用过一次站点。

如何实现离线访问特性
实现的步骤非常简单，主要3个步骤：

1. 在服务器上添加MIME TYPE支，让服务器能够识别manifest后缀的文件

   AddType text/cache-manifest manifest

2. 创建一个后缀名为.manifest的文件，把需要缓存的文件按格式写在里面，并用注释行标注版本

   CACHE MANIFEST

   直接缓存的文件

   CACHE:

   Path/to/cache.js

   version：2012-03-20

3. 给 标签加 manifest 属性，并引用manifest文件

   具体可以参考：HTML5 缓存: cache manifest

   离线应用访问及更新流程
   第一次访问离线应用的入口页HTML（引用了manifest文件），正常发送请求，获取manifest文件并在本地缓存，陆续拉取manifest中的需要缓存的文件
   再次访问时，无法在线离线与否，都会直接从缓存中获取入口页HTML和其他缓存的文件进行展示。如果此时在线，浏览器会发送请求到服务器请求manifest文件，并与第一次访问的副本进行比对，如果发现版本不一致，会陆续发送请求重新拉取入口文件HTML和需要缓存的文件并更新本地缓存副本
   之后的访问重复第2步的行为

离线机制的缓存用途

从Manifest的机制来看，即使我们不是为了创建离线应用，也同样可以使用这种机制用于缓存文件，可以说是给Web缓存提供多一种可以选择的途径。

存在的问题：缓存文件更新控制不灵活

就目前HTML5提供的manifest机制来讲，一个页面只能引用一个manifest页面，而且一旦发现这个manifest改变了，就会把里面所有定义的缓存文件全部重新拉取一遍，不管实际上有没有更新，控制比较不灵活。针对这个问题，也有的同学提出了一些建议，比如把需要缓存的文件分模块切分到不同manifest中，并分开用HTML引用，再使用强大的iframe嵌入到入口页面，这样就当某一个模式需要有更新，不会导致其他模块的文件也重新拉取一遍。