版权声明：本文为博主原创文章，未经博主允许不得转载。

HTML5有一个相当诱人的特性，就是 Application Cache，即离线存储。

 

可以在没有网络的情况下，不会给用户一个“网络不可用”这种很不友好的用户提示。当然，更主要的是，我们希望可以在没有网络的状态下，依然带给用户较高的用户体验。

 

使用离线存储，除了需要在html tag标签增加<manifest>，列出需要缓存的清单，还必须在服务器端进行相应的配置。

  由于开发中使用Ngnix服务器，这里我以Ngnix服务器配置为例。说明如果进行服务器的配置，支持HTML5 Application Cache特性。   1. 找到Ngnix服务器配置文件mime.types   [plain] view plain copy

1. root@mdev usr # cd /etc/httpd/  
2. root@mdev httpd # ll  
3. total 28K  
4. 8.0K drwxr-xr-x 2 root root 4.0K Apr 10  2010 conf  
5. 8.0K drwxr-xr-x 2 root root 4.0K Apr 10  2010 conf.d  
6. 4.0K lrwxrwxrwx 1 root root   19 Apr 10  2010 logs -> ../../var/log/httpd  
7. 4.0K lrwxrwxrwx 1 root root   29 Apr 10  2010 modules -> ../../usr/lib64/httpd/modules  
8. 4.0K lrwxrwxrwx 1 root root   13 Apr 10  2010 run -> ../../var/run  
9. root@mdev httpd # cd conf  
10. root@mdev conf # ll  
11. total 60K  
12. 40K -rw-r--r-- 1 root root 33K Sep  4  2009 httpd.conf  
13. 20K -rw-r--r-- 1 root root 13K Sep  4  2009 magic  
14. root@mdev conf # cd ..  
15. root@mdev httpd # cd conf.d/  
16. root@mdev conf.d # ll  
17. total 24K  
18. 8.0K -rw-r--r-- 1 root root 566 Sep  4  2009 proxy_ajp.conf  
19. 8.0K -rw-r--r-- 1 root root 392 Sep  4  2009 README  
20. 8.0K -rw-r--r-- 1 root root 299 Sep  4  2009 welcome.conf  
21. root@mdev conf.d # cd /usr/local/nginx/conf/  

 

2. 编辑mime.types

[plain] view plain copy

1. root@mdev conf # vi mime.types   

3. 添加manifest文件映射   [plain] view plain copy

1. 1   
2.   2 types {  
3.   3     text/html                             html htm shtml;  
4.   4     text/css                              css;  
5.   5     text/xml                              xml rss;  
6.   6     image/gif                             gif;  
7.   7     image/jpeg                            jpeg jpg;  
8.   8     application/x-javascript              js;  
9.   9     application/atom+xml                  atom;  
10.  10   
11.  11     text/mathml                           mml;  
12.  12     text/plain                            txt;  
13.  13     text/vnd.sun.j2me.app-descriptor      jad;  
14.  14     text/vnd.wap.wml                      wml;  
15.  15     text/x-component                      htc;  
16.  16   
17.  17     image/png                             png;  
18.  18     image/tiff                            tif tiff;  
19.  19     image/vnd.wap.wbmp                    wbmp;  
20.  20     image/x-icon                          ico;  
21.  21     image/x-jng                           jng;  
22.  22     image/x-ms-bmp                        bmp;  
23.  23     image/svg+xml                         svg;  
24.  24   
25.  25     application/java-archive              jar war ear;  
26.  26     application/mac-binhex40              hqx;  
27.  27     application/msword                    doc;  
28.  28     application/pdf                       pdf;  
29.  29     application/postscript                ps eps ai;  
30.  30     application/rtf                       rtf;  
31.  31     application/vnd.ms-excel              xls;  
32.  32     application/vnd.ms-powerpoint         ppt;  
33.  33     application/vnd.wap.wmlc              wmlc;  
34.  34     application/vnd.wap.xhtml+xml         xhtml;  
35.  35     application/x-cocoa                   cco;  
36.  36     application/x-java-archive-diff       jardiff;  
37.  37     application/x-java-jnlp-file          jnlp;  
38.  38     application/x-makeself                run;  
39.  39     application/x-perl                    pl pm;  
40.  40     application/x-pilot                   prc pdb;  
41.  41     application/x-rar-compressed          rar;  
42.  42     application/x-redhat-package-manager  rpm;  
43.  43     application/x-sea                     sea;  
44.  44     application/x-shockwave-flash         swf;  
45.  45     application/x-stuffit                 sit;  
46.  46     application/x-tcl                     tcl tk;  
47.  47     application/x-x509-ca-cert            der pem crt;  
48.  48     application/x-xpinstall               xpi;  
49.  49     application/zip                       zip;  
50.  50   
51.  51     application/octet-stream              bin exe dll;  
52.  52     application/octet-stream              deb;  
53.  53     application/octet-stream              dmg;  
54.  54     application/octet-stream              eot;  
55.  55     application/octet-stream              iso img;  
56.  56     application/octet-stream              msi msp msm;  
57.  57   
58.  58     audio/midi                            mid midi kar;  
59.  59     audio/mpeg                            mp3;  
60.  60     audio/x-realaudio                     ra;  
61.  61   
62.  62     video/3gpp                            3gpp 3gp;  
63.  63     video/mpeg                            mpeg mpg;  
64.  64     video/quicktime                       mov;  
65.  65     video/x-flv                           flv;  
66.  66     video/x-mng                           mng;  
67.  67     video/x-ms-asf                        asx asf;  
68.  68     video/x-ms-wmv                        wmv;  
69.  69     video/x-msvideo                       avi;  
70.  70     application/x-nokia-widget            wgz;  
71.  71   
72.  72     text/cache-manifest                   mf manifest  
73.  73 }  

 

如果有过IIS配置经验的，这里的mime.types 和IIS的文件名映射原理是一样的，即对于文件后缀名是mf 或者 manifest 采用 text/cache-manifest 方式解析。

 

4. 重启 Ngnix 服务器：

[plain] view plain copy

1. root@mdev conf # /etc/init.d/httpd restart  
2. Stop nginx ...  
3. Starting nginx ...  

 

通过chrom 访问站点，即可看到离线缓存后的效果：