[HTML5]配置Ngnix服务器支持manifest 离线存储

 

[HTML5]配置Ngnix服务器支持manifest

分类： 手机开发 HTML5 2011-12-13 00:10 1476人阅读 评论 (5) 收藏 举报

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 访问站点，即可看到离线缓存后的效果：