為瀏覽器構(gòu)建一個(gè)網(wǎng)絡(luò)監(jiān)視應(yīng)用程序
簡(jiǎn)介： 在我們現(xiàn)在的生活中，移動(dòng)設(shè)備的作用日益重要。我們使用它們進(jìn)行交流。我們使用它們進(jìn)行導(dǎo)航。我們甚至可以將它們用作方 便的手電筒。面向 iPhone 和 Android 平臺(tái)的定制應(yīng)用程序極其普及，與此同時(shí)，移動(dòng) Web 應(yīng)用程序也開(kāi)始嶄露頭角。本文是由兩部分組成的系列文章的第一篇，這個(gè)系列主要圍繞的是開(kāi)發(fā)面向 iPhone 和 Android 的基于瀏覽器的應(yīng)用程序。在這個(gè)系列文章中，我們將構(gòu)建能運(yùn)行在桌面以及這兩個(gè)移動(dòng)瀏覽器內(nèi)的一個(gè)簡(jiǎn)單的網(wǎng)絡(luò)監(jiān)視應(yīng)用程序。
發(fā)布日期： 2010 年 1 月 04 日
級(jí)別： 中級(jí)
其他語(yǔ)言版本： 英文
訪問(wèn)情況 938 次瀏覽
建議: 0 (添加評(píng)論)
簡(jiǎn)介
iPhone 和 Android 平臺(tái)加起來(lái)已經(jīng)有 10 萬(wàn)多個(gè)應(yīng)用程序可供從二者各自的應(yīng)用程序庫(kù)下載。本機(jī)應(yīng)用程序指的是那些用某個(gè)平臺(tái)的 SDK 構(gòu)建、然后再編譯和安裝到某個(gè)設(shè)備上的應(yīng)用程序。這些本機(jī)應(yīng)用程序提供了對(duì)該設(shè)備固有功能的全面訪問(wèn)，包括諸如無(wú)線聯(lián)網(wǎng)、藍(lán)牙、數(shù)據(jù)存儲(chǔ)、加速計(jì)、指南針 和其他使這些設(shè)備變得十分吸引人的出色功能。雖然面向 iPhone 和 Android 平臺(tái)的本機(jī)或定制應(yīng)用程序極為普及，但移動(dòng) Web 應(yīng)用程序也開(kāi)始展露了巨大的潛力。移動(dòng)技術(shù)漸趨成熟 — 移動(dòng) Web 也隨之而來(lái)。
本文是由兩部分組成的系列文章的第一篇，這個(gè)系列主要圍繞的是開(kāi)發(fā)面向 iPhone 和 Android 的基于瀏覽器的應(yīng)用程序，旨在幫助您開(kāi)發(fā)您自己的移動(dòng) Web 應(yīng)用程序。移動(dòng) Web 應(yīng)用程序的威力不僅僅是在一個(gè)移動(dòng)設(shè)備上呈現(xiàn)一個(gè)網(wǎng)站。我們還將接觸到使移動(dòng) Web 開(kāi)發(fā)如此勢(shì)不可擋的某些核心技術(shù)和技巧。
Web 已經(jīng)成為了平臺(tái)的不二之選，因?yàn)樗鉀Q了困擾應(yīng)用程序開(kāi)發(fā)人員和系統(tǒng)管理員的諸多問(wèn)題。如下例舉了其中的幾個(gè)解決方案：
Web 應(yīng)用程序發(fā)布模型的一個(gè)最為吸引人的地方是將軟件轉(zhuǎn)變?yōu)橐环N面向訂閱的服務(wù)，這是一種實(shí)實(shí)在在的雙贏?！盀槭裁?？”您不禁要問(wèn)。讓我們一起來(lái)看一看。
Web 部署模型允許顧客在購(gòu)買之前先試用，這樣以來(lái)，就將顧客的風(fēng)險(xiǎn)和成本減到了最少。如果顧客對(duì)試用很滿意，那么只需進(jìn)行一次信用卡（或 PayPal）支付就可以繼續(xù)使用此服務(wù)。軟件供應(yīng)商亦可以從中受益，因?yàn)橄到y(tǒng)升級(jí)被大大簡(jiǎn)化，減少了支持成本并最終減少了轉(zhuǎn)嫁到顧客上的成本。并 且，SaaS（software as a service）模型還讓顧客在享受了軟件的種種好處的同時(shí)，無(wú)需大量的預(yù)先投入 — 投資回報(bào)在同一個(gè)月就可實(shí)現(xiàn)，而不是在不可預(yù)知的未來(lái)。
聽(tīng)起來(lái)不錯(cuò)。適合 Web 的概念同樣對(duì)移動(dòng)奏效么？這個(gè)問(wèn)題的答案常常是否，直到 iPhone 的出現(xiàn)。為何如此呢？
實(shí)際情況是移動(dòng) Web 瀏覽器體驗(yàn)一直非常缺乏。但這一切有了改觀，這要?dú)w功于一種新技術(shù)的出現(xiàn)，即 WebKit，而 iPhone 則讓 WebKit 成為了移動(dòng)領(lǐng)域標(biāo)志性的大事件。
在短短幾年時(shí)間內(nèi)，iPhone 已經(jīng)從最初的嘗試之舉成為了移動(dòng) Web 客戶機(jī)的鰲頭。為何如此？因?yàn)?WebKit 加上可靠的 Internet 連接使得 Web 同樣適于移動(dòng) — 并且與到目前為止的任何其他的瀏覽器相比，這一點(diǎn)尤其突出。移動(dòng)市場(chǎng)的其他玩家已經(jīng)注意到了這一動(dòng)態(tài)并正在開(kāi)始使用 WebKit，或正在重新審視它，當(dāng)然也有人反對(duì)它。
那么，什么是 WebKit？
WebKit 和 HTML5
WebKit 是一種瀏覽器引擎，支撐著 iPhone 內(nèi)的 Mobile Safari 瀏覽器以及 Android 內(nèi)的瀏覽器背后的技術(shù)。WebKit 也在其他的移動(dòng)環(huán)境內(nèi)有自己的用武之地，但是我們還是將我們的討論集中于 iPhone 和 Android 平臺(tái)。
WebKit 是一個(gè)開(kāi)源項(xiàng)目，其起源可追溯到 K Desktop Environment (KDE)。WebKit 項(xiàng)目催生了面向移動(dòng)設(shè)備的現(xiàn)代 Web 應(yīng)用程序。雖然設(shè)備本身的能力和形態(tài)因素都相當(dāng)重要，但移動(dòng)用戶最熱衷的仍然是內(nèi)容。如果移動(dòng)用戶可用的內(nèi)容只是 Internet 用戶可用內(nèi)容的一個(gè)很小的子集，那么用戶體驗(yàn)充其量也只能劃分為二等。
我們當(dāng)中的大多數(shù)人都更希望生活是連貫的 — 如果我們?cè)诩抑械墓P記本上訪問(wèn)了一個(gè)網(wǎng)站，我們同樣希望在火車上旅行時(shí)仍然訪問(wèn)到同樣的內(nèi)容。內(nèi)容是最好的應(yīng)用程序。不管我們身在何處、在做什么，我們都 想要訪問(wèn)到我們的數(shù)據(jù)。WebKit 讓 iPhone 和 Android 平臺(tái)上可以有豐富的內(nèi)容。
有一點(diǎn)很值得注意，即 WebKit 還應(yīng)用在了桌面的 Safari 瀏覽器內(nèi)，該瀏覽器是 Mac OS X 平臺(tái)默認(rèn)的瀏覽器。不管我們討論的是桌面版本還是 iPhone 或 Android 上的瀏覽器引擎，WebKit 均優(yōu)先支持 HTML 和 CSS 特性。實(shí)際上，WebKit 還支持尚未被其他瀏覽器采納的一些 CSS 樣式 — 這些特性正在得到 HTML5 規(guī)范的考慮。
HTML5 規(guī)范是一個(gè)技術(shù)草案集，涵蓋了各種基于瀏覽器的技術(shù)，包括客戶端 SQL 存儲(chǔ)、轉(zhuǎn)變、轉(zhuǎn)型、轉(zhuǎn)換等。HTML5 的出現(xiàn)已經(jīng)有些時(shí)間了，雖然尚未完成，但是一旦其特性集因主要瀏覽器平臺(tái)支持的加入而逐漸穩(wěn)定后，Web 應(yīng)用程序的簡(jiǎn)陋開(kāi)端將成為永久的記憶。Web 應(yīng)用程序開(kāi)發(fā)將成為主導(dǎo) — 并且不只是在傳統(tǒng)的桌面瀏覽器空間，還將在移動(dòng)領(lǐng)域。移動(dòng)將一躍成為首要考慮，而不再是后備之選。
移動(dòng) Web 應(yīng)用程序的考慮
為了訪問(wèn) Web 開(kāi)發(fā)技術(shù)，如今，應(yīng)用程序開(kāi)發(fā)人員有幾個(gè)選擇。第一，應(yīng)用程序可嚴(yán)格編寫為服務(wù)器上的 HTML、CSS 和 JavaScript 文件。當(dāng)然，HTML 內(nèi)容可以產(chǎn)生自靜態(tài) HTML 文件，也可以從任何的服務(wù)器端技術(shù)（比如 PHP、 ASP.NET、Java Servlets 等）動(dòng)態(tài)生成。所有這些技術(shù)追根到底都可簡(jiǎn)單地用術(shù)語(yǔ) HTML 指代 — 這不是本文討論的重點(diǎn)所在 — 并且最為重要的是，受 WebKit-支撐的瀏覽器能夠在移動(dòng)設(shè)備上解析和呈現(xiàn) HTML。
用戶通過(guò)在移動(dòng)設(shè)備上（即 iPhone 或 Android）打開(kāi)瀏覽器應(yīng)用程序并輸入目標(biāo)服務(wù)器對(duì)應(yīng)的 URL：http://yourcompanyname.com/applicationurl 來(lái)訪問(wèn) Web 應(yīng)用程序。
特定的某個(gè)移動(dòng) Web 應(yīng)用程序總是能找到自己的位置：從一般的 Web 站點(diǎn)到高度特定于平臺(tái)的移動(dòng) Web 應(yīng)用程序。
一般站點(diǎn)的呈現(xiàn)
WebKit 內(nèi)的呈現(xiàn)引擎，再配以 iPhone 和 Android 平臺(tái)上的高度直觀的 UI，實(shí)際上就使得幾乎任何一個(gè)基于 HTML 的 Web 站點(diǎn)都能呈現(xiàn)在此設(shè)備上。Web 頁(yè)能被正確呈現(xiàn)，不再像原來(lái)的移動(dòng)瀏覽器體驗(yàn)：內(nèi)容被包裹起來(lái)或是根本不顯示。當(dāng)頁(yè)面加載后，內(nèi)容通常被完全縮放以便整個(gè)頁(yè)面都可見(jiàn)，盡管內(nèi)容會(huì)被縮放得 非常小，甚至不可讀，如圖 1 所示。不過(guò)，頁(yè)面是可滾動(dòng)、放大、縮小的，這就提供了對(duì)全部?jī)?nèi)容的訪問(wèn)。默認(rèn)地，瀏覽器使用 980 像素寬的視見(jiàn)區(qū)或邏輯尺寸。
盡管這能提供對(duì)整個(gè)頁(yè)面的訪問(wèn)，是原來(lái)的移動(dòng) Web 體驗(yàn)上的一個(gè)巨大進(jìn)步，但還是需要做很多事情才能進(jìn)一步改進(jìn)移動(dòng)體驗(yàn)。
移動(dòng)友好性
要想使 Web 頁(yè)面從一般的頁(yè)面變成支持移動(dòng)設(shè)備的頁(yè)面，Web 應(yīng)用程序可以在幾個(gè)方面進(jìn)行修改。
雖然頁(yè)面可以在 WebKit 中正確呈現(xiàn)，但是，一個(gè)以鼠標(biāo)為中心的設(shè)備（比如筆記本或臺(tái)式機(jī)）與一個(gè)以觸摸為中心的設(shè)備（比如一個(gè) iPhone 或 Android 智能手機(jī)）還是有區(qū)別的。其中主要的一些差異包括 “可單擊” 區(qū)域的物理大小、“懸浮樣式” 的缺少以及完全不同的事件順序。如下所列的是在設(shè)計(jì)一個(gè)能被移動(dòng)用戶正常查看的 Web 站點(diǎn)時(shí)需要注意的一些事情：
這其中的細(xì)節(jié)在 iPhone in Action 內(nèi)有詳述（參見(jiàn) 參考資料）。而從我們的目的考慮，我們將更多地著重于 WebKit 所能做的，而不是它不能做的。
讓我們來(lái)看看要使一個(gè) Web 站點(diǎn)對(duì) iPhone 或 Android 訪客具有友好性所面臨的最為明顯的一個(gè)挑戰(zhàn)：屏幕大小。我們今天使用的實(shí)際移動(dòng)屏幕尺寸是 320x480。請(qǐng)注意由于用戶可能會(huì)選擇橫向查看 Web 內(nèi)容，所以屏幕大小也可以是 480x320。正如我們?cè)趫D 1 中看到的，WebKit 將能很好地呈現(xiàn)面向桌面的 Web 頁(yè)面，但是文本可能會(huì)太小以至于若不進(jìn)行縮放或其他操作就無(wú)法有效閱讀內(nèi)容。那么，我們?cè)撊绾螒?yīng)對(duì)這個(gè)問(wèn)題呢？
最為直觀也是最不唐突的適合移動(dòng)用戶的方式是通過(guò)使用一個(gè)特殊的 metatag：viewport。
metatag 是一個(gè)放入 HTML 文檔的 head 元素內(nèi)的 HTML 標(biāo)記。如下是一個(gè)使用 viewport 標(biāo)記的簡(jiǎn)單例子：<meta name="viewport" content="width=device-width" />。當(dāng)這個(gè) metatag 被添加到一個(gè) HTML 頁(yè)面后，我們看到此頁(yè)面被縮放到更為適合這個(gè)移動(dòng)設(shè)備的大小，如圖 2 所示。如果瀏覽器不支持此標(biāo)記，它會(huì)簡(jiǎn)單地忽略此標(biāo)記。
在某些情況下，最為理想的方式是提前將窗口縮放到一個(gè)合適的值，如圖 3 所示。
為了設(shè)置特定的值，將 viewport metatag 的 content
屬性設(shè)為一個(gè)顯式的值：
<meta name="viewport" content="width=device-width,
initial-scale=1.0 user-scalable=yes" />。通過(guò)改變初始值，屏幕就可以按要求被放大或縮小。將值分別設(shè)置在 1.0 和 1.3 之間對(duì)于 iPhone 和 Android 平臺(tái)是比較合適的。viewport metatag
還支持最小和最大伸縮，可用來(lái)限制用戶對(duì)呈現(xiàn)頁(yè)面的控制力。
自具有 320x480 布局的 iPhone 面世以來(lái)，其形態(tài)系數(shù)就一直沒(méi)有改變過(guò)，而隨著來(lái)自不同制造商、針對(duì)不同用戶群的更多設(shè)備的出現(xiàn)，Android 則有望具備更多樣的物理特點(diǎn)。在開(kāi)發(fā)應(yīng)用程序并以諸如 Android 這類移動(dòng)設(shè)備為目標(biāo)時(shí)，一定要考慮屏幕尺寸、形態(tài)系數(shù)以及分辨率方面的潛在多樣性。
除了 Android 設(shè)備與其他設(shè)備之間的這些物理差異之外，經(jīng)驗(yàn)還表明 Android 的軟件還通過(guò)設(shè)備內(nèi)置的（on-device）瀏覽器設(shè)置對(duì)頁(yè)面的呈現(xiàn)實(shí)施了更多控制。不僅穩(wěn)定，Android 平臺(tái)還很靈活。取決于 SDK 等級(jí)和制造商，某個(gè)設(shè)備上的設(shè)置很可能不同于您的開(kāi)發(fā)環(huán)境。圖 4 顯示了取自 Android Emulator V1.6 的瀏覽器應(yīng)用程序的設(shè)置頁(yè)面。這個(gè)設(shè)置屏幕允許用戶將一個(gè)設(shè)備設(shè)置為一個(gè)預(yù)先定義的縮放等級(jí)（far、near、medium）或請(qǐng)求此設(shè)備自動(dòng)適應(yīng)頁(yè) 面。
在移動(dòng)世界，變化無(wú)時(shí)無(wú)刻不在發(fā)生，我們這里所討論的也不是一成不變的。比如，針對(duì)瀏覽器 Sprint Hero 的設(shè)置就頁(yè)面呈現(xiàn)而言具有完全不同的一組選項(xiàng)集。Hero 構(gòu)建于 Android V1.5 之上外加一些 HTC-提供的增強(qiáng)。幸運(yùn)的是，如果呈現(xiàn)在您的 Web 頁(yè)面內(nèi)，這些設(shè)置將被 viewport metatag 覆蓋。
迄今，我們已經(jīng)看到了 WebKit 能很好地呈現(xiàn)一個(gè)常規(guī)的 Web 頁(yè)面，盡管在不進(jìn)行縮放的情況下，頁(yè)面有些小并很難閱讀。接下來(lái)，我們將實(shí)施更多的控制，即通過(guò)使用 viewport metatag 控制頁(yè)面如何在設(shè)備上被查看。這就使得頁(yè)面更易讀和易于導(dǎo)航。但是如果我們想要更進(jìn)一步，讓站點(diǎn)看起來(lái)和感覺(jué)上更像一個(gè)移動(dòng)應(yīng)用程序，該如何做呢？
為移動(dòng)量身打造
現(xiàn)在，讓我們來(lái)看看以移動(dòng)用戶為目標(biāo)進(jìn)行設(shè)計(jì)時(shí)所應(yīng)采用的設(shè)計(jì)策略。我們舉一個(gè)簡(jiǎn)單的例子，讓我們來(lái)看看 Google 的 GMail 電子郵件服務(wù)的登錄頁(yè)面。
先來(lái)看看這個(gè)桌面瀏覽器體驗(yàn)，如圖 5 所示。
這個(gè)桌面主屏幕在左邊具有信息性內(nèi)容，在右邊有一個(gè)登錄區(qū)域。將這個(gè)桌面視圖與圖 6 內(nèi)所示的特定于移動(dòng)的視圖（取自 iPhone）相比較。
圖 6 內(nèi)的屏幕很顯然針對(duì)的是一個(gè)移動(dòng)用戶。此用戶被直接提示繼續(xù)運(yùn)行這個(gè)應(yīng)用程序所需采用的步驟 — 無(wú)需縮放或滾動(dòng)。
接下來(lái)，讓我們看看這個(gè)移動(dòng) GMail 應(yīng)用程序在閱讀消息時(shí)的功能。由于可被這個(gè)應(yīng)用程序使用的資產(chǎn)有限，消息閱讀窗口很少有機(jī)會(huì)展示按鈕或?qū)Ш?。任何專用于?dǎo)航的空間都會(huì)占用用于閱讀內(nèi)容的空間。而且，如果我們能夠避免，我們絕對(duì)不想使用多個(gè)框架或滾動(dòng) div 元素。移動(dòng) GMail 通過(guò)提供一個(gè)簡(jiǎn)單的、能在頁(yè)面停止?jié)L動(dòng)時(shí)就立即出現(xiàn)的浮動(dòng)菜單解決了這個(gè)問(wèn)題。此菜單具有三個(gè)按鈕：
Archive、Delete 和 More。選擇 More 按鈕，還會(huì)顯示出額外的菜單項(xiàng)，如圖 7 所示。
這個(gè)應(yīng)用程序就是為移動(dòng)量身定做的。
另一個(gè)需要留意的事情是我們不想讓運(yùn)行著功能強(qiáng)大的瀏覽器（例如運(yùn)行于 iPhone 或 Android 平臺(tái)上的瀏覽器）的那些訪客的移動(dòng)體驗(yàn)大打折扣。最后，請(qǐng)看 GMail 在頁(yè)面底部所顯示的內(nèi)容，如圖 8 所示。
如果用戶傾向于桌面版本更為強(qiáng)大的功能，那么就讓他使用。只要可能，就讓用戶決定。
現(xiàn)在，我們假設(shè)需要構(gòu)建一個(gè)使用 Web 技術(shù)的應(yīng)用程序，但該程序必須實(shí)際看上去更像是一個(gè)本機(jī)應(yīng)用程序。
特定于平臺(tái)的內(nèi)容
下一個(gè)步驟是創(chuàng)建特定于平臺(tái)的內(nèi)容，通過(guò)格式化一個(gè)頁(yè)面以使其看上去更接近目標(biāo)平臺(tái)的本機(jī)感觀，而不是一般的 Web 站點(diǎn)。本機(jī)究竟是何意思？
在深入挖掘如何讓一個(gè) Web 頁(yè)面的觀感更像是目標(biāo)平臺(tái)的一個(gè)本機(jī)應(yīng)用程序之前，讓我們先花點(diǎn)時(shí)間，比較一下 iPhone 和 Android 作為平臺(tái)在視覺(jué)效果方面的差異 — 暫時(shí)不考慮二者很強(qiáng)的基于服務(wù)器的相同點(diǎn)。
iPhone 的觀感很獨(dú)特。如果把 iPhone 的一個(gè)屏幕快照顯示給別人看，除非這個(gè)人一直居住于荒野，否則他很可能會(huì)一眼就識(shí)別出該屏幕快照來(lái)自一個(gè) iPhone。但是如果把 Android 設(shè)備的屏幕快照給人看，那么結(jié)果很可能不同。為什么會(huì)如此呢？可能的原因有幾個(gè)。主要的原因在于 iPhone 上市已久并且擁有大量的近乎狂熱的擁護(hù)者。為了購(gòu)買價(jià)格不菲的限量版特制 V1 iPhone，人們不惜排數(shù)小時(shí)的隊(duì)。不管您有沒(méi)有一臺(tái) iPhone，Apple 的這一杰作都已經(jīng)是當(dāng)今市場(chǎng)中的偶像產(chǎn)品。那么，Android 境況如何呢？
Android 還相對(duì)較新，并且在很多方面都與 iPhone 相悖，比如它接納開(kāi)源社區(qū)。Android 將被用在多個(gè)設(shè)備上（電話和其他家用電器類型的設(shè)備）。目前，我們的討論只限于移動(dòng)手機(jī)以便讓事情盡量地簡(jiǎn)化。
隨著時(shí)間的推移，全球范圍內(nèi)面向 Android 的設(shè)備數(shù)量將有可能超過(guò) iPhone。這是因?yàn)槭?Android 支撐的設(shè)備由多個(gè)廠商制作并將可在多個(gè)運(yùn)營(yíng)商網(wǎng)絡(luò)上應(yīng)用。隨著加入到 Android 市場(chǎng)的玩家的增多，在感觀方面自然要有分別。從 HTC 提供的 SenseUI 界面不難看出這一點(diǎn)。這種誘人的觀感在核心 Android SDK 內(nèi)并不具備，而且并不是與所有設(shè)備兼容。Motorola、Google 和 Verizon 已經(jīng)結(jié)成團(tuán)隊(duì)來(lái)共同創(chuàng)建一種新的 Android 設(shè)備：DROID。它是第一個(gè)運(yùn)行在 2.0 平臺(tái)上的商業(yè) Android 設(shè)備。
對(duì)比 Android 的多樣性與 iPhone 的統(tǒng)一外觀。iPhone 是 Apple 公司一個(gè)極具競(jìng)爭(zhēng)力的專有產(chǎn)品。iPhone 的外觀可能會(huì)與時(shí)俱進(jìn)，但是幾乎不太可能出現(xiàn)較大差別，而 Android 在其早期就經(jīng)歷了分別和差異。
那么，我們?nèi)绾尾拍艿玫揭粋€(gè)本機(jī)的觀感呢？
在 Web 2.0 出現(xiàn)以前，這將是一個(gè)很大的挑戰(zhàn)。為了支持多個(gè)客戶瀏覽器（移動(dòng)的和非移動(dòng)的）所進(jìn)行的早期嘗試包括幾個(gè)不同的技術(shù)，比如：
userAgent 動(dòng)態(tài)生成的內(nèi)容這些方式對(duì)于資金充足的大型團(tuán)隊(duì)而言可能是可以接受的，但是其他的情況又當(dāng)如何呢？我們不具備時(shí)間、人力或資金來(lái)?yè)Q取這種功能。并且，我們經(jīng)過(guò)深思已經(jīng)認(rèn)識(shí)到昨天的移動(dòng) Web 的不足，所以我們決不想重蹈覆轍。
幸運(yùn)的是我們不必如此。在 WebKit 和 CSS 的年代，這些差異已經(jīng)通過(guò)樣式表和媒體查詢（media query）的使用得到了妥當(dāng)?shù)慕鉀Q。正如之前介紹的，一個(gè)媒體查詢是一種獲得客戶相關(guān)信息的技術(shù)。之前的傳統(tǒng)做法是，瀏覽器發(fā)送一個(gè) userAgent 字符串，用來(lái)標(biāo)識(shí)此瀏覽器，而服務(wù)器則負(fù)責(zé)確定該向這個(gè)設(shè)備發(fā)送哪些內(nèi)容（根據(jù)上述討論）。而有了媒體查詢，瀏覽器就可以基于其能力作出決定。下面就是獲得針對(duì) smartphone 的樣式表的例子：
<link rel="stylesheet" type="text/css"
href="smartphone.css" media="only screen and (max-device-width: 480px)" />。而這里則是一個(gè)針對(duì)桌面計(jì)算機(jī)的媒體查詢： <link rel="stylesheet" type="text/css" href="smartphone.css" media="only screen and (min-device-width: 481px)" />。
要更多地了解媒體查詢，請(qǐng)查閱相關(guān)的草案規(guī)范（參見(jiàn) 參考資料）。
接下來(lái)，我們將著重介紹一個(gè)例子，以展示這種方式在用以顯示網(wǎng)絡(luò)狀態(tài)的示例應(yīng)用程序的上下文中的應(yīng)用。
網(wǎng)絡(luò)監(jiān)視應(yīng)用程序
此應(yīng)用程序的目的是為了監(jiān)視多個(gè)服務(wù)器。獨(dú)立的軟件開(kāi)發(fā)人員通常會(huì)跨多個(gè)服務(wù)器支持多個(gè)應(yīng)用程序。如果在這個(gè)領(lǐng)域的從業(yè)時(shí)間很長(zhǎng)，那么服務(wù)器 的類型以及應(yīng)用程序的類型就更有可能不同。所有這些只是為了說(shuō)明一個(gè)簡(jiǎn)單的工具無(wú)法監(jiān)視各個(gè)應(yīng)用程序的各個(gè)方面。這也是引入 Network Monitor (netmon) 移動(dòng)應(yīng)用程序的原因所在。它并未被設(shè)計(jì)成在移動(dòng)設(shè)備上面面俱到，而是靈活和方便的。
netmon 應(yīng)用程序包含感興趣的服務(wù)器列表。其中的每一項(xiàng)顯示關(guān)鍵性能指示器（KPI）。 KPI 很早就被 MBA 學(xué)生用來(lái)衡量一個(gè)企業(yè)運(yùn)轉(zhuǎn)是否健康。在 Web 應(yīng)用程序托管領(lǐng)域，一些重要的 KPI 有：
這些數(shù)據(jù)項(xiàng)和任何其他的操作數(shù)據(jù)都是為了給出特定系統(tǒng)或應(yīng)用程序的健康狀況。在節(jié)日期間，我們會(huì)實(shí)際察看在我們的一些站點(diǎn)上的訂單數(shù)。如果訂單數(shù)沒(méi)有出現(xiàn)逐小時(shí)穩(wěn)步增長(zhǎng)，那么我們就需要進(jìn)一步探查問(wèn)題了。
由于每個(gè)應(yīng)用程序的需要以及所需資源不同，因而 netmon 應(yīng)用程序必須靈活才能適應(yīng)于每個(gè)應(yīng)用程序的特殊性。為了滿足靈活性的要求，我們用一個(gè)最為基礎(chǔ)的數(shù)據(jù)結(jié)構(gòu)來(lái)代表特定應(yīng)用程序的健康狀況；在本系列的第 2 部分，我們將著重關(guān)注于這些數(shù)據(jù)從何而來(lái)以及如何更新?，F(xiàn)在，我們只需關(guān)心如下所列的信息：
我們的應(yīng)用程序?qū)⒁砸环N易于導(dǎo)航的方式列出這些條目、利用 CSS、jQuery 和 WebKit 功能來(lái)使這些項(xiàng)突出出來(lái)。正如之前所提到的，我們的目標(biāo)是為了讓此應(yīng)用程序能夠運(yùn)行在 iPhone、Android 以及 Safari 的桌面版本之上。
構(gòu)建一個(gè)應(yīng)用程序
如今，Web 頁(yè)面應(yīng)該以一種聲明式的方式創(chuàng)建，只提供組織和內(nèi)容。所有定位和格式化都通過(guò) Cascading Style Sheets 實(shí)現(xiàn)，并通常還有 JavaScript 的協(xié)助。實(shí)際上，JavaScript 庫(kù)已經(jīng)如此流行以至于成為了一種規(guī)范，而不再是例外。在本文的示例應(yīng)用程序內(nèi)，我們使用了流行的 jQuery JavaScript 框架。這個(gè)示例應(yīng)用程序?qū)⒊尸F(xiàn)在 iPhone、Android 以及桌面上。HTML 內(nèi)容則完全相同。差異存在于選中的樣式表。提醒您：我們并未對(duì)如何讓應(yīng)用程序的外觀光鮮誘人給予過(guò)多的關(guān)注。實(shí)際上，為了突出此應(yīng)用程序的樣式表組織，我 們過(guò)多地強(qiáng)調(diào)了背景顏色。我們將在本系列的第 2 部分中全面討論應(yīng)用程序的外觀。應(yīng)用程序相應(yīng)的 HTML 如清單 1 所示。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="netmon.css" type="text/css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="netmon.js"></script>
<script type="text/javascript">
if (navigator.userAgent.indexOf('iPhone') != -1) {
document.write('<link rel="stylesheet" href="iphone.css"
type="text/css" />');
} else if (navigator.userAgent.indexOf('Android') != -1) {
document.write('<link rel="stylesheet" href="android.css"
type="text/css" />');
} else {
document.write('<link rel="stylesheet" href="desktop.css"
type="text/css" />');
}
function setupTestData() {
try {
netmon.initialize();
if (netmon.resources.length > 0) {
jQuery.each(netmon.resources,function (index, value) {
$("#mainContent").append(netmon.render(index,value));
});
$(".serverentry").click (function() {$(this).find(".serveritems").toggle();});
$(".serveritems").hide();
}
} catch (e) {
alert(e);
}
}
</script>
<title>My Network Resources</title>
</head>
<body onload="setupTestData();">
<div id="mainContainer">
<div id="header">
<h1>My Servers</h1>
</div>
<div id="mainContent">
</div>
<a href="q.php">My User Agent</a>
</div>
</body>
</html>
|
快速瀏覽一下上述的 HTML，不難發(fā)現(xiàn)有如下幾個(gè)點(diǎn)需要注意：
userAgent 來(lái)決定要加載哪個(gè)額外的樣式表：一個(gè)面向 iPhone，一個(gè)面向 Android，還有一個(gè)面向 Desktop。div 標(biāo)記。userAgent 字符串。它之所以存在是考慮到方便性和展示的目的。它與應(yīng)用程序本身無(wú)關(guān)。在深入研究這些樣式表以及 netmon.js 文件之前，讓我們先來(lái)看看當(dāng)前的這個(gè)應(yīng)用程序。還記得吧，我們針對(duì)三個(gè)受支持的平臺(tái)使用了三個(gè)不同的樣式表。并且每一個(gè)都是用不同的背景顏色設(shè)置好的以協(xié) 助開(kāi)發(fā)過(guò)程。 圖 9 顯示了這個(gè)具有藍(lán)色背景的 Desktop Safari 瀏覽器。
圖 10 顯示了在 Android 瀏覽器內(nèi)呈現(xiàn)的這個(gè)具有紅色背景的應(yīng)用程序。
圖 11 顯示了在 iPhone 瀏覽器內(nèi)呈現(xiàn)的這個(gè)具有綠色背景的應(yīng)用程序。
在名為 netmon.js 的文件內(nèi)的主樣式表，如清單 2 所示。
body {
color: #888888;
font-family: Helvetica;
font-size:14px;
margin: 0px;
padding: 0;
}
.details {
margin: 0px;
padding: 0px;
background-color: white;
border: solid;
border-width: 1px;
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
}
.OK {
color: #000000;
}
.BAD {
color: #ff0000;
}
.odd {
background-image: -webkit-gradient(linear, left top, right bottom,from(#ccc)
,to(#999));
}
.even {
background-image: -webkit-gradient(linear, left top, right bottom,from(#999)
,to(#ccc));
}
.serverentry a {
float: right;
color: #ffffff;
}
.serveritems{
color: #000;
}
#header h1 {
margin: 0;
padding: 0;
text-align: center;
color: #000;
}
|
這些特定于平臺(tái)的樣式表實(shí)現(xiàn)了如下三個(gè)主要目標(biāo)：
userAgent 將某個(gè)特定的樣式表指向某個(gè)特定的平臺(tái)是多么地簡(jiǎn)便。不妨舉個(gè)例子，iphone.css 文件如清單 3 所示。
body {
background-color: #00ff00;
}
.serverentry {
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
}
.name {
font-size: 2em;
}
.summary{
font-size: 1.5em;
}
.serverentry a {
font-size: 1.5em;
}
|
在這個(gè)文件內(nèi)，我們看到主體標(biāo)記的背景顏色被設(shè)為 green (#00ff00)，而且還有字體大小上的變化以便使這些條目更適合在移動(dòng)設(shè)備上閱讀。
最后，讓我們來(lái)看看 netmon.js，該文件包含一列條目以及一個(gè)被設(shè)計(jì)用來(lái)呈現(xiàn)條目的函數(shù)，如清單 4 所示。為了簡(jiǎn)便起見(jiàn)，有些數(shù)據(jù)被省略了。完整的副本，請(qǐng)參見(jiàn) 下載。
var netmon = {
initialize : function () {
},
resources :
[
{
name : 'msiservices.com',
homeurl : 'http://msiservices.com',
pingurl : 'http://msiservices.com/netmon.php',
status : 'OK',
summary : 'OK',
items :
[
{name : 'DiskSpace', value : '22.13 GB'},
{name : 'Database Up?', value : 'Yes'}
]
},
{
name : 'server 2',
homeurl : 'http://someurl',
pingurl : 'http://someurl/netmon.jsp',
status : 'OK',
summary : 'OK',
items :
[
{name : 'DiskSpace', value : '100.8 GB'},
{name : 'Database Up?', value : 'Yes'}
]
},
// additional entries clipped for brevity
],
render : function(index,itm) {
try {
var ret = "";
ret += "<div class='serverentry " + itm.status + " " + (index % 2 == 0 ?
'even' : 'odd') + "'>";
ret += "<span class='name'>" + itm.name +
"</span> <a target='_blank' href='" + itm.homeurl +
"'>Show</a><br />";
if (itm.status != "OK") {
ret += "<span class='summary'>-" + itm.summary +
"</span><br />";
}
ret += "<div class='serveritems'>";
jQuery.each(itm.items,function (j,itemdetail) {
ret += ">>" + itemdetail.name + "=" + itemdetail.value +
"<br />";
});
ret += "</div>";
ret += "</div>";
return ret;
} catch (e) {
return "<div class='error'>Error rendering item [" + itm.name + "]
" + e + "</div>";
}
}
};
|
借助 CSS 文件內(nèi)的類定義，當(dāng)服務(wù)器條目沒(méi)有處于 OK 狀態(tài)時(shí)，它就會(huì)被顯示為紅色。此外，當(dāng)狀態(tài)不是 OK 時(shí)，我們會(huì)顯示 summary 字段以便給出問(wèn)題的一個(gè)大致概覽。在圖 9-11 中，服務(wù)器 4 的問(wèn)題是磁盤空間不足。如果我們輕擊一個(gè)條目，就能看到其細(xì)節(jié)，如圖 12 所示。
通過(guò)輕擊每個(gè)條目右側(cè)的 show 鏈接，就可以啟動(dòng)每個(gè)服務(wù)器的主頁(yè)。這個(gè)特性十分得心應(yīng)手，原因有兩個(gè)。一是記住所感興趣的每個(gè)服務(wù)器的 URL 是件很繁瑣 的事情，其二，不管移動(dòng)設(shè)備的鍵盤有多棒，要求在移動(dòng)設(shè)備上鍵入這么長(zhǎng)的 URL 就更繁瑣了。
在我們的移動(dòng)設(shè)備上，netmon 正在快樂(lè)地運(yùn)行著，那么支持我們的服務(wù)器應(yīng)該是更為容易的一項(xiàng)任務(wù)。
在第 2 部分，我們將充實(shí)這個(gè)應(yīng)用程序以便我們能請(qǐng)求更多實(shí)時(shí)數(shù)據(jù)，并會(huì)討論構(gòu)建一個(gè)移動(dòng)應(yīng)用程序時(shí)有關(guān)服務(wù)器端的考慮事項(xiàng)。
在結(jié)束本文之前，讓我們快速瀏覽一下要讓這個(gè)應(yīng)用程序可從應(yīng)用程序庫(kù)下載需要做些什么。
將一個(gè) Web 應(yīng)用程序付諸使用
假設(shè)，這個(gè)網(wǎng)絡(luò)應(yīng)用程序已經(jīng)就緒。您向一個(gè)朋友展示了它，您的朋友鼓勵(lì)您把這個(gè)應(yīng)用程序銷售給他人以便他人也可以用您的應(yīng)用程序來(lái)監(jiān)視其網(wǎng)絡(luò) 上的資源。那么，您能不能銷售一個(gè) Web 應(yīng)用程序呢？一個(gè) Web 應(yīng)用程序當(dāng)然可以通過(guò)傳統(tǒng)的訂閱或 SaaS 模型銷售，但如果想要將您的 “Web 應(yīng)用程序” 打包后再通過(guò)一個(gè)應(yīng)用程序市場(chǎng)銷售它，比如 iTunes App Store 或 Google Marketplace，又該如何呢？為了這個(gè)目的，應(yīng)用程序必須被編譯為一個(gè)本機(jī)應(yīng)用程序。所幸的是，針對(duì)此已經(jīng)有一個(gè)解決方案。
每個(gè)主要的移動(dòng)平臺(tái)都有一種將瀏覽器嵌入到視圖或表單、動(dòng)作的手段。每個(gè)平臺(tái)為這種技術(shù)所使用的術(shù)語(yǔ)稍有不同，但這些技術(shù)工作的方式是相似 的：在這個(gè)本機(jī)應(yīng)用程序放入一個(gè) browser 控件，而這個(gè)本機(jī)應(yīng)用程序可以與之交互。在最簡(jiǎn)單的模型內(nèi)，這個(gè) browser 控件可能只是訪問(wèn) Web 以獲得內(nèi)容。當(dāng)然，這個(gè)本機(jī)應(yīng)用程序也可以截獲鏈接請(qǐng)求并提供其自己的內(nèi)容，進(jìn)而只利用瀏覽器視圖來(lái)進(jìn)行呈現(xiàn)。請(qǐng)記住，對(duì)于本機(jī)小部件，HTML 和 CSS 均是可行的，而不管應(yīng)用程序內(nèi)容的來(lái)源。并且，有些應(yīng)用程序?qū)⑹沁@兩種方式的混合。比如，一個(gè)應(yīng)用程序可以從 Web 上獲得大多數(shù)內(nèi)容，而應(yīng)用程序的 “本機(jī)” 的一面則提供了通過(guò)藍(lán)牙訪問(wèn)本機(jī)資源的能力。
對(duì)于這類應(yīng)用程序架構(gòu)，市場(chǎng)上已經(jīng)有幾個(gè)工具可用。PhoneGap 和 Appcelerator 是這一領(lǐng)域的兩個(gè)佼佼者（參見(jiàn) 參考資料）。
結(jié)束語(yǔ)
本文主要介紹了受 WebKit 支撐的 iPhone 和 Android Web 應(yīng)用程序。在第 2 部分，將對(duì)這個(gè)示例應(yīng)用程序進(jìn)行擴(kuò)展，會(huì)融入通過(guò) Ajax 的 Web 更改技術(shù)進(jìn)行即時(shí)頁(yè)面更新的功能。
參考資料
學(xué)習(xí)
獲得產(chǎn)品和技術(shù)
關(guān)于作者
Frank Ableson 是一名企業(yè)家，也是一名軟件開(kāi)發(fā)人員，他居住在新澤西北部，專攻移動(dòng)和嵌入式應(yīng)用程序軟件。他目前正在為 Manning Publications 撰寫一部有關(guān) Android 應(yīng)用程序開(kāi)發(fā)的書(shū)籍。他的專業(yè)興趣包括嵌入式系統(tǒng)、無(wú)線通信和汽車電子學(xué)。他的妻子 Nikki 和孩子們是他最大的崇拜者。
聯(lián)系客服
