過(guò)去的幾年里，我一直在研究HTML 5移動(dòng)Apps。整體的印象就是HTML5為開(kāi)發(fā)者提供了一個(gè)跨平臺(tái)的移動(dòng)apps開(kāi)發(fā)方案，并且該方案具有很好的擴(kuò)展性和靈活性。我始終認(rèn)為web技術(shù)將成為移動(dòng)設(shè)備上的開(kāi)發(fā)平臺(tái)，只是目前該技術(shù)可能尚未成熟。 我很擔(dān)心有些人還沒(méi)有弄清楚HTML 5到底是什么，就盲目地開(kāi)始在自己的移動(dòng)設(shè)備開(kāi)發(fā)中使用HTML 5了。
　　在過(guò)去的一年中，我在努力地改變大家對(duì)HTML5的理解，讓他們認(rèn)識(shí)到HTML5是一個(gè)移動(dòng)開(kāi)發(fā)平臺(tái)。
　　大家都知道HTML5能夠做哪些事，但是你又是否知道HTML5是如何做這些事的呢?
　　從我使用web技術(shù)開(kāi)發(fā)的第一個(gè)移動(dòng)產(chǎn)品到今天，已經(jīng)有超過(guò)十年的時(shí)間了。
　　到底應(yīng)該怎樣使用和看待HTML5呢?通過(guò)采訪許多相關(guān)的公司，我們找到了關(guān)于這個(gè)問(wèn)題的答案。
　　可以將這篇文章看做是了解開(kāi)發(fā)跨平臺(tái)的移動(dòng)web apps的引導(dǎo)手冊(cè)。為什么開(kāi)發(fā)一個(gè)HTML5移動(dòng)Apps是一件困難的事情呢?因?yàn)橥ǔ?，開(kāi)發(fā)者需要實(shí)現(xiàn)圖表中展示的所有部分。即使你不親自開(kāi)發(fā)它，你也需要借用其他人的設(shè)計(jì)，并且你還是得對(duì)各個(gè)部分進(jìn)行測(cè)試和調(diào)試。
　　設(shè)置服務(wù)器 客戶端發(fā)送請(qǐng)求在移動(dòng)web設(shè)備上查看某個(gè)內(nèi)容。這個(gè)請(qǐng)求通常是一個(gè)發(fā)送到某臺(tái)服務(wù)器上的HTTP請(qǐng)求。通常，會(huì)自動(dòng)生成用戶需要的內(nèi)容。為了將內(nèi)容加入到app中通常需要至少兩件事情：數(shù)據(jù)以及怎樣使數(shù)據(jù)變得有意義，或者是我們的HTML5 app。
　　你是否有一個(gè)設(shè)備檢測(cè)方案?
　　由于各種設(shè)備存在很大的差異性，所有在服務(wù)器端最好能夠有一個(gè)設(shè)備檢測(cè)機(jī)制。實(shí)現(xiàn)這種檢測(cè)機(jī)制的方法是很多的，甚至可以提供設(shè)備更多更加詳細(xì)的信息以及容量性能方面的信息。
　　程序員可以對(duì)所有的設(shè)備統(tǒng)一進(jìn)行處理，這對(duì)于簡(jiǎn)單的應(yīng)用是可行的。但是對(duì)于大多數(shù)長(zhǎng)久運(yùn)行的項(xiàng)目來(lái)說(shuō)，這顯然是不夠的。
　　你打算如何處理離線數(shù)據(jù)
　　15% 的移動(dòng)apps啟動(dòng)時(shí)設(shè)備是脫機(jī)。所以你的應(yīng)用程序需要處理脫機(jī)的情況。最初的程序設(shè)計(jì)時(shí)頁(yè)面的訪問(wèn)當(dāng)然是需要通過(guò)Internet的，但是如果連接端掉了，你的程序應(yīng)該也能夠繼續(xù)正常運(yùn)行。當(dāng)設(shè)備連接到網(wǎng)絡(luò)時(shí)，應(yīng)用程序如何處理用戶的數(shù)據(jù)?為了處理脫機(jī)訪問(wèn)的情況，是否可以考慮將所有的數(shù)據(jù)打包返回?
　　本文稍后會(huì)介紹cache manifest，但是不要指望cache manifest能夠解決所有的問(wèn)題。你還需要調(diào)用RESTful API，用來(lái)處理數(shù)據(jù)同步刷回的問(wèn)題。
　　HTML5 App 現(xiàn)在已經(jīng)有了處理數(shù)據(jù)和設(shè)備的方法了，接下來(lái)就可以開(kāi)發(fā)一個(gè)HTML5 App了——這是其中最簡(jiǎn)單的一部分。HTML5是由HTML演化來(lái)的，如果你已經(jīng)知道HTML了，那么你能很快地了解怎樣使用HTML5。
　　為了迅速了解HTML5中引入的新功能，你可以查看下面專(zhuān)題。
　　HTML5加入了許多好用的新功能，但是它并沒(méi)有從根本上改變大家的編程方式。你可以在HTML5中使用Java和CSS3，但是它仍然還是使用標(biāo)簽定義內(nèi)容的方式編寫(xiě)應(yīng)用。
　　cache manifest
　　HTML5最好的功能之一就是提供了cache manifest，可以將它看作是app的一個(gè)緩存。cache manifest實(shí)際上是一個(gè)文本文件，上面羅列了需要在本地緩存的內(nèi)容。使用該功能，可以方便地將常用的Java、CSS和圖片文件緩存在設(shè)備的內(nèi)存中。這樣，即使設(shè)備處于脫機(jī)狀態(tài)，用戶還是能夠正常訪問(wèn)應(yīng)用的界面。
　　除此以外，使用cache manifest功能還能減少網(wǎng)絡(luò)連接的請(qǐng)求次數(shù)。對(duì)于動(dòng)態(tài)數(shù)據(jù)的緩存處理則需要使用Java刷回緩存的數(shù)據(jù)，而不是cache manifest。
　　需要指出的是，大多數(shù)的apps都需要處理脫機(jī)訪問(wèn)的問(wèn)題。
　　你的降級(jí)策略是怎樣的?
　　最后一點(diǎn)，需要指出的是各種設(shè)備存在著或多或少的差異。即使你只打算支持某一種平臺(tái)，在這種平臺(tái)上的各個(gè)設(shè)備也不是完全相同的。當(dāng)應(yīng)用無(wú)法按照預(yù)想的方式呈現(xiàn)時(shí)，能夠提供一組隔離代碼是最好的撤回策略。換句話說(shuō)，就是要使代碼盡量簡(jiǎn)潔且不依賴(lài)某些特殊的邊緣技術(shù)——我們稱(chēng)之為優(yōu)雅的降級(jí)。
　　HTML5開(kāi)發(fā)的代碼最好嚴(yán)格地遵循語(yǔ)法規(guī)定。首先不要在代碼中加入任何的CSS或Java，通常這種形式最簡(jiǎn)單的代碼具有最好的通用性。
　　Java 現(xiàn)在可以介紹其中一個(gè)很重要的部分了，Java。在幾年以前，跨平臺(tái)的Java還沒(méi)有受到廣泛的關(guān)注(那時(shí)HTML5也沒(méi)有引起大家的注意)。但就在這幾年，Java的地位發(fā)生了明顯的變化。在短短兩年的時(shí)間里，Java已經(jīng)成為為用戶提供數(shù)據(jù)、邏輯和交互的主要方法了。
　　而Java上的這些轉(zhuǎn)變都是伴隨著HTML5的推進(jìn)而發(fā)生的，難怪人們總是將Java和HTML5視為一體。換言之，HTML5上有許多新的功能，但是如果沒(méi)有Java，這些功能也無(wú)法應(yīng)用。你能否找到用戶的物理位置?如果有Java就可以。能否離線保存用戶數(shù)據(jù)?有了Java就可以。
　　想想Java之前的開(kāi)發(fā)框架： aculous, Prototype, MooTools和jQuery。我不認(rèn)為有人是因?yàn)橄矚gJava才采用它的——Java使用起來(lái)并不方便。所有的這些開(kāi)發(fā)框架確實(shí)使得我們的生活變得更加方便，并且改變了Web的面貌，許多開(kāi)發(fā)者如果沒(méi)有其他這些框架的幫助，根本無(wú)法開(kāi)發(fā)出Java程序。
　　移動(dòng)web apps開(kāi)發(fā)中最困難也是最耗時(shí)的工作就是測(cè)試。你使用的所有技術(shù)必須都是可以被檢測(cè)的。如果你不了解一個(gè)技術(shù)的原理，那么你需要耗費(fèi)大量的時(shí)間和精力來(lái)解決一個(gè)小小的bug。
　　如果你的應(yīng)用只是針對(duì)某個(gè)特定的平臺(tái)，也許這還可以容忍。但如果應(yīng)用平臺(tái)變得復(fù)雜起來(lái)，開(kāi)發(fā)和測(cè)試的工作量將會(huì)呈現(xiàn)指數(shù)級(jí)的增長(zhǎng)。
　　Murphy定律——“一個(gè)事情只要有可能出錯(cuò)，那么它不久將會(huì)出錯(cuò)”——是移動(dòng)web apps開(kāi)發(fā)中唯一的準(zhǔn)則。如果你使用了某個(gè)技術(shù)，那么你需要確保這個(gè)技術(shù)在你的應(yīng)用中不會(huì)出錯(cuò)。
　　下面將Java分成三個(gè)部分分別進(jìn)行介紹。
　　混合腳本
　　混合腳本可以將開(kāi)發(fā)人員編寫(xiě)的核心腳本與設(shè)備SDK連接起來(lái)。如果你想使用本地封裝器(如 UIWebView和PhoneGap.)將HTML5 app封裝起來(lái)，那么你需要使用混合腳本。需要針對(duì)不同的平臺(tái)編寫(xiě)不同的混合腳本(phonegap.js是唯一一個(gè)支持多個(gè)平臺(tái)的腳本)。
　　核心腳本
　　核心腳本是app在所有平臺(tái)上的通用部分。如果app是通過(guò)瀏覽器訪問(wèn)的，核心腳本也應(yīng)該使得app看起來(lái)像是一個(gè)native SDK。你的app需要負(fù)責(zé)收集和渲染HTML5頁(yè)面。這個(gè)時(shí)候使用jQuery這類(lèi)完整的框架是非常有用的，但是我們建議還是盡量使用微框架。
　　設(shè)備腳本
　　最后，你需要使用設(shè)備腳本模擬本地的行為。 jQTouch是一個(gè)很好的例子，它使用jQuery模擬iPhone的本地行為和動(dòng)作。但是jQTouch無(wú)法區(qū)分不同設(shè)備間的差異，在Android以及其他的移動(dòng)平臺(tái)上，它都仍然使用在iOS上采用的方法。這一點(diǎn)受到用戶的詬病。因此，需要為不同的設(shè)備編寫(xiě)單獨(dú)的設(shè)備腳本。
　　CSS CSS是app的展示層。CSS的開(kāi)發(fā)更像是設(shè)計(jì)工作，而不是單純的技術(shù)工作。頁(yè)面的顯示其實(shí)是HTML5移動(dòng)App上最重要的一個(gè)部分。
　　Apple，Nokia，Microsoft等公司都花費(fèi)了大量的人力物力開(kāi)發(fā)出非常豐富的用戶界面，從而省去了程序員的很多工作。但是如果你想要開(kāi)發(fā)一個(gè)HTML5移動(dòng)App，那么你需要自己開(kāi)發(fā)一個(gè)用戶界面，盡管這是一件很令人頭疼的事情。
　　現(xiàn)在讓?xiě)?yīng)用擁有一個(gè)良好的用戶體驗(yàn)變得越來(lái)越重要了。CSS就是用來(lái)幫助程序員提升應(yīng)用的用戶體驗(yàn)的。
　　如果說(shuō)HTML5 App是一部小轎車(chē)的話，那么CSS就是這輛車(chē)的外觀，顏色，甚至是內(nèi)部的詳細(xì)設(shè)計(jì)裝飾。當(dāng)你坐在車(chē)內(nèi)，你看的的不僅僅是一些布料和皮革。我們更看重的是設(shè)計(jì)的細(xì)節(jié)。方向盤(pán)的手感如何，儀表盤(pán)的設(shè)計(jì)是否清晰，音響的立體聲效果怎樣，所有的這些因素都能影響我們的駕車(chē)體驗(yàn)。
　　Java也能影響我們的用戶體驗(yàn)，但是它沒(méi)有那么直接。我們當(dāng)然需要Java，但正如 Top Gear(汽車(chē)雜志)所說(shuō)的——好的引擎并不等于好的駕車(chē)體驗(yàn)。
　　只有讓性能和外觀和諧統(tǒng)一起來(lái)，才能給用戶最好的體驗(yàn)。
　　我曾和jQTouch、Sencha Touch和jQuery Mobile的愛(ài)好者交流過(guò)，我向他們?cè)儐?wèn)了他們?cè)O(shè)計(jì)應(yīng)用界面的方法，回答無(wú)非是使用 “Device Theme”這類(lèi)網(wǎng)頁(yè)風(fēng)格，他們用 “Device Theme”模擬iOS的界面風(fēng)格，再加上幾行Java代碼。很少有人考慮使用CSS模擬其他設(shè)備的界面風(fēng)格(Android上的CSS模板)。
　　有時(shí)候，開(kāi)發(fā)者需要設(shè)計(jì)一個(gè)不同于其他app的應(yīng)用，想要擺脫傳統(tǒng)的設(shè)計(jì)風(fēng)格，使用自己的頁(yè)面風(fēng)格。那么你可以考慮使用CSS為你的app設(shè)計(jì)一個(gè)全新的界面風(fēng)格：
　　設(shè)備主題
　　這是開(kāi)發(fā)者用來(lái)模擬設(shè)備風(fēng)格的CSS代碼。它是用戶慣用的語(yǔ)言，普通用戶看到這些語(yǔ)言后，能夠直接開(kāi)始執(zhí)行想要處理的任務(wù)，而不用花費(fèi)時(shí)間去學(xué)習(xí)你的界面。據(jù)不完全統(tǒng)計(jì)，每個(gè)平臺(tái)上有將近100個(gè)獨(dú)立的界面組件。我不推薦開(kāi)發(fā)者自己設(shè)計(jì)一種新的組件，除非你清楚的知道自己在做什么。
　　Sencha Touch，jQuery Mobile和其他的工具都是用來(lái)幫你完成這項(xiàng)工作的，但是這也難免使得你的app看起來(lái)和這些平臺(tái)很像，而沒(méi)有了自己的風(fēng)格。但是，使用這些工具可以幫助你開(kāi)發(fā)自己的風(fēng)格。
　　核心主題
　　核心主題是應(yīng)用程序中可以重復(fù)利用的部分——那些你需要使用，但不一定會(huì)顯示在界面的上的內(nèi)容。我習(xí)慣將各種部件單獨(dú)表示(如復(fù)位按鈕，布局，排版，顏色，圖像)，這樣就能將這些部件作為我的核心主題。這些主題在不同的平臺(tái)上都是一樣的。比如，你的logo在所有的平臺(tái)上都是一樣的。你的工具欄的顏色總是保持一樣的風(fēng)格。這些組件都可以定義為你的核心主題。當(dāng)你在不同的設(shè)備上使用這些核心主題時(shí)，只需要修改相應(yīng)的設(shè)備主題即可。
　App主題
　　App主題是專(zhuān)屬于某個(gè)App的風(fēng)格組件。許多項(xiàng)目詣在將這些組件整合到一個(gè)樣式表中。但是我建議，還是將你的核心主題和App主題區(qū)分開(kāi)來(lái)。這對(duì)于debug有很大的幫助。
　　總結(jié)
　　HTML5能否滿足你的要求?回答是肯定的。HTML5能夠完成你的要求嗎?答案也是肯定的，不過(guò)…
　　可能需要耐心等待。這個(gè)項(xiàng)目可能比以往你碰到的其他
項(xiàng)目需要更久的時(shí)間
合理的預(yù)算。這不是一個(gè)網(wǎng)站，可能會(huì)花費(fèi)你較多的預(yù)算
　　確保你有合適的人才。如果你認(rèn)識(shí)到世界上最有經(jīng)驗(yàn)的專(zhuān)家都在對(duì)此苦苦探索，那就不難想象，你的開(kāi)發(fā)過(guò)程也不會(huì)太輕松
　　現(xiàn)在還沒(méi)有所謂的合適工具，更多的時(shí)候，你得自己開(kāi)發(fā)需要的工具
　　仔細(xì)考慮你的每一個(gè)選擇,在移動(dòng)開(kāi)發(fā)領(lǐng)域沒(méi)有絕對(duì)的對(duì)與錯(cuò),要保持開(kāi)放性，關(guān)注客戶的需求