HTML5有一个相当诱人的特性，就是 Application Cache，即离线存储。
可以在没有网络的情况下，不会给用户一个“网络不可用”这种很不友好的用户提示。当然，更主要的是，我们希望可以在没有网络的状态下，依然带给用户较高的用户体验。
使用离线存储，除了需要在html tag标签增加<manifest>，列出需要缓存的清单，还必须在服务器端进行相应的配置。
由于开发中使用Ngnix服务器，这里我以Ngnix服务器配置为例。说明如果进行服务器的配置，支持HTML5 Application Cache特性。
1. 找到Ngnix服务器配置文件mime.types
root@mdev usr # cd /etc/httpd/ root@mdev httpd # ll total 28K 8.0K drwxr-xr-x 2 root root 4.0K Apr 10 2010 conf 8.0K drwxr-xr-x 2 root root 4.0K Apr 10 2010 conf.d 4.0K lrwxrwxrwx 1 root root 19 Apr 10 2010 logs -> ../../var/log/httpd 4.0K lrwxrwxrwx 1 root root 29 Apr 10 2010 modules -> ../../usr/lib64/httpd/modules 4.0K lrwxrwxrwx 1 root root 13 Apr 10 2010 run -> ../../var/run root@mdev httpd # cd conf root@mdev conf # ll total 60K 40K -rw-r--r-- 1 root root 33K Sep 4 2009 httpd.conf 20K -rw-r--r-- 1 root root 13K Sep 4 2009 magic root@mdev conf # cd .. root@mdev httpd # cd conf.d/ root@mdev conf.d # ll total 24K 8.0K -rw-r--r-- 1 root root 566 Sep 4 2009 proxy_ajp.conf 8.0K -rw-r--r-- 1 root root 392 Sep 4 2009 README 8.0K -rw-r--r-- 1 root root 299 Sep 4 2009 welcome.conf root@mdev conf.d # cd /usr/local/nginx/conf/
2. 编辑mime.types
root@mdev conf # vi mime.types
3. 添加manifest文件映射
1
2 types {
3 text/html html htm shtml;
4 text/css css;
5 text/xml xml rss;
6 image/gif gif;
7 image/jpeg jpeg jpg;
8 application/x-javascript js;
9 application/atom+xml atom;
10
11 text/mathml mml;
12 text/plain txt;
13 text/vnd.sun.j2me.app-descriptor jad;
14 text/vnd.wap.wml wml;
15 text/x-component htc;
16
17 image/png png;
18 image/tiff tif tiff;
19 image/vnd.wap.wbmp wbmp;
20 image/x-icon ico;
21 image/x-jng jng;
22 image/x-ms-bmp bmp;
23 image/svg+xml svg;
24
25 application/java-archive jar war ear;
26 application/mac-binhex40 hqx;
27 application/msword doc;
28 application/pdf pdf;
29 application/postscript ps eps ai;
30 application/rtf rtf;
31 application/vnd.ms-excel xls;
32 application/vnd.ms-powerpoint ppt;
33 application/vnd.wap.wmlc wmlc;
34 application/vnd.wap.xhtml+xml xhtml;
35 application/x-cocoa cco;
36 application/x-java-archive-diff jardiff;
37 application/x-java-jnlp-file jnlp;
38 application/x-makeself run;
39 application/x-perl pl pm;
40 application/x-pilot prc pdb;
41 application/x-rar-compressed rar;
42 application/x-redhat-package-manager rpm;
43 application/x-sea sea;
44 application/x-shockwave-flash swf;
45 application/x-stuffit sit;
46 application/x-tcl tcl tk;
47 application/x-x509-ca-cert der pem crt;
48 application/x-xpinstall xpi;
49 application/zip zip;
50
51 application/octet-stream bin exe dll;
52 application/octet-stream deb;
53 application/octet-stream dmg;
54 application/octet-stream eot;
55 application/octet-stream iso img;
56 application/octet-stream msi msp msm;
57
58 audio/midi mid midi kar;
59 audio/mpeg mp3;
60 audio/x-realaudio ra;
61
62 video/3gpp 3gpp 3gp;
63 video/mpeg mpeg mpg;
64 video/quicktime mov;
65 video/x-flv flv;
66 video/x-mng mng;
67 video/x-ms-asf asx asf;
68 video/x-ms-wmv wmv;
69 video/x-msvideo avi;
70 application/x-nokia-widget wgz;
71
72 text/cache-manifest mf manifest
73 }
如果有过IIS配置经验的，这里的mime.types 和IIS的文件名映射原理是一样的，即对于文件后缀名是mf 或者 manifest 采用 text/cache-manifest 方式解析。
4. 重启 Ngnix 服务器：
root@mdev conf # /etc/init.d/httpd restart Stop nginx ... Starting nginx ...
通过chrom 访问站点，即可看到离线缓存后的效果：
