浏览器探究 - HTML5规范之Application Cache（1）

浏览器特性

1. 网络：下载资源
2. 资源管理：缓存资源，避免重复下载
3. 网页浏览：将资源转换为可视化结果
4. 多页面管理：多页面同时加载
5. 插件和扩展：常见插件：NPAPI、PPAPI、ActiveX。扩展根据浏览器不同有不同扩展：FireFox扩展，Chromium扩展。
6. 账户和同步：历史记录、书签等
7. 安全：网站安全提示，浏览器不被恶意代码攻破
8. 开发者工具：例如火狐的fireBugs

HTML5规范

Application Cache

什么是Application Cache API？

传统的web程序中浏览器也会对资源文件进行cache，但是并不是很可靠，有时起不到预期的效果。而HTML5中的application cache支持离线资源的访问，为离线web应用的开发提供了可能。 使用application cache能够带来以下几点收益：

1. 用户可以在离线时继续使用
2. 缓存到本地，节省带宽，加速用户体验的反馈
3. 减轻服务器的负载

如何使用application cache？

要使用application cache，主要用到缓存清单文件：manifest，该文件告诉浏览器需要缓存哪些资源

manifest文件结构：

CACHE MANIFEST
# 以上折行必需要写

CACHE:
# 这部分写需要缓存的资源文件列表
# 可以是相对路径也可以是绝对路径
index.html
index.css
images/logo.png
js/main.js
http://img.baidu.com/js/tangram-base-1.5.2.1.js

NETWORK:
# 可选
# 这一部分是要绕过缓存直接读取的文件
login.php


FALLBACK:
# 可选
# 这部分写当访问缓存失败后，备用访问的资源
# 每行两个文件，第一个是访问源，第二个是替换文件*.html /offline.html

manifest文件使用：

写完一个manifest文件之后，像下面这样在你的web页面中引用他

"demo.cache">
  ...

其中文件后缀可以自定义，但是需要在服务器中进行相应配置，指定其为text/cache-manifest MIME 类型文件： 让 Apache 支持 manifest 新建或者编辑现有的 .htaccess 文件，在里面加上一行：

AddType text/cache-manifest .manifest

让 Nginx 支持 manifest 修改 mime.types 文件，在里面增加 manifest 文件的映射：

text/cache-manifest manifest

让 Tomcat 支持 manifest 修改 web.xml 文件，在里面增加：

<mime-mapping>  
    <extension>manifestextension>  
    <mime-type>text/cache-manifestmime-type>  
mime-mapping>

让 GAE 支持 manifest

- url: /mystaticdir/(.*\.manifest)
  static_files: mystaticdir/\1
  mime_type: text/cache-manifest
  upload: mystaticdir/(.*\.manifest)

做完以上工作，你的应用程序就可以使用application cache了。

更新缓存的方式

开发人员想要通知客户的浏览器更新application cache的方法有以下两类：

1. 更新manifest文件：浏览器发现manifest文件本身发生变化，便会根据新的manifest文件去获取新的资源进行缓存。当manifest文件列表并没有变化的时候，我们通常通过修改manifest注释的方式来改变文件，从而实现更新。
2. 通过javascript操作：浏览器提供了applicationCache供js访问，通过对于applicationCache对象的操作也能达到更新缓存的目的。

var appCache = window.applicationCache;

appCache.update(); //尝试更新缓存

...

if (appCache.status == window.applicationCache.UPDATEREADY) {
  appCache.swapCache();  //更新成功后，切换到新的缓存
}

另外，用户想要更新缓存，可以通过删除缓存文件的方式来清除缓存。