Nginx 判斷裝置 (User-Agent) 顯示不同網頁的方法


nginx-logo現在使用行動裝置瀏覽網頁的使用者相當多,大家也越來越重視行動裝置上的使用者體驗。只靠著 RWD (Responsive Web Design) 響應式網頁設計是不夠的,過於肥大的 DOM 不但會拖慢效能與速度,尤其在運算能力不及 PC 的行動裝置上更為明顯。在複雜的行動裝置環境下,RWD 技術已經不能滿足這個重要的使命,為了獲得最佳的使用者體驗 (UX),我們需要專門對行動裝置設計專屬的網頁或應用。

講完廢話,先來進入重點。如果是使用者連線到同一個網址,要如何判斷用戶端連線的裝置呢?就是透過 HTTP User Agent 這個 Header 來偵測 (RFC-7231),使用者的瀏覽器發送 HTTP 請求時,會在 Header 夾帶 User Agent 訊息,我們只要在 HTTP Server 進行判斷,就可以達到不同裝置回傳不同網頁的效果。

以下是 Nginx 設定的方式,設定檔如下 (GitHub):

上述的設定用到了 rewrite 功能,先判斷 $http_user_agent 資訊後進行 rewrite,如果是使用 Ubuntu 套件記得要安裝 nginx-extras 這個套件。測試時我們直接用 Chrom 進行連線,並開啟「開發者工具」來切換與模擬其他裝置,如下:

螢幕快照 2015-05-15 22.59.57

按下小按鈕可以切換想要模擬的裝置,如下:

螢幕快照 2015-05-15 23.01.43

上述的設定中,我們加了一個 Query String 的判斷並且搭配 Cookie 的使用,好讓使用者可以自由的切換瀏覽模式,僅需要在網址加上 desktop=true|false 即可,當然實務上我們可以直接用 Link 或是 JavaScript 完成,使用效果如下,順便看一下 Nginx 回來的封包,自動加入 Set-Cookie 來讓之後的 Request 可以被 Server 導向指定的網頁。

螢幕快照 2015-05-15 23.02.43

是不是很方便呢?整個範例在 GitHub 需要的朋友請自行服用,再見囉!

參考資料

Facebook 留言

廣告

樂樂童鞋