?

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

分類： 手機開發(fā) HTML5 2011-12-13 00:10 1476人閱讀 評論 (5) 收藏 舉報

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

?

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

?

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

由于開發(fā)中使用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配置經(jīng)驗的，這里的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 訪問站點，即可看到離線緩存后的效果：

總結(jié)

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

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