[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 [plain] view plain copy

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

[plain] view plain copy

root@mdev conf # vi mime.types   

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

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 服务器：

[plain] view plain copy

root@mdev conf # /etc/init.d/httpd restart  

Stop nginx ...  

Starting nginx ...  

 

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

总结

以上是生活随笔为你收集整理的[HTML5]配置Ngnix服务器支持manifest 离线存储的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。