HTML5有一個相當(dāng)誘人的特性，就是 Application Cache，即離線存儲。

?

可以在沒有網(wǎng)絡(luò)的情況下，不會給用戶一個“網(wǎng)絡(luò)不可用”這種很不友好的用戶提示。當(dāng)然，更主要的是，我們希望可以在沒有網(wǎng)絡(luò)的狀態(tài)下，依然帶給用戶較高的用戶體驗。

?

使用離線存儲，除了需要在html tag標(biāo)簽增加<manifest>，列出需要緩存的清單，還必須在服務(wù)器端進行相應(yīng)的配置。

由于開發(fā)中使用Ngnix服務(wù)器，這里我以Ngnix服務(wù)器配置為例。說明如果進行服務(wù)器的配置，支持HTML5 Application Cache特性。 1. 找到Ngnix服務(wù)器配置文件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 manifest73 }

?

如果有過IIS配置經(jīng)驗的，這里的mime.types 和IIS的文件名映射原理是一樣的，即對于文件后綴名是mf 或者 manifest 采用 text/cache-manifest 方式解析。

?

4. 重啟 Ngnix 服務(wù)器：

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

?

通過chrom 訪問站點，即可看到離線緩存后的效果：

總結(jié)

以上是生活随笔為你收集整理的[HTML5]配置Ngnix服务器支持manifest的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。