如何封裝一個(gè)瀏覽器成webapp？

在群里，有個(gè)朋友問(wèn)了一個(gè)問(wèn)題“如何封裝一個(gè)瀏覽器成webapp？” 

每個(gè)手機(jī)就像電腦一樣，都帶著自己的操作系統(tǒng)。如果你愿意，你可以從頭寫(xiě)一個(gè)瀏覽器，把瀏覽地址隱藏了，這就像你的一個(gè)app了，對(duì)吧。當(dāng)然，我們自己寫(xiě)瀏覽器，這也太難了，所以我們肯定不是這么做的。其實(shí)，我們只是基于各種手機(jī)上Web瀏覽器內(nèi)核去做手腳，而Js是Web開(kāi)發(fā)的最佳語(yǔ)言，至于如何封裝成一個(gè)Web app？說(shuō)實(shí)話，我也沒(méi)有真正去探究過(guò)是如何去做的，因?yàn)槲覍?duì)Andorid和iOS原生開(kāi)發(fā)也不熟悉，最主要是現(xiàn)在也沒(méi)有時(shí)間去研究這些了，但是我告訴你的是，通過(guò)一些移動(dòng)開(kāi)發(fā)框架，你只需要專注于寫(xiě)你的前端代碼，然后通過(guò)一個(gè)開(kāi)發(fā)框架的黑盒的操作，編譯后就成了一個(gè)可以安裝的App了。是否很神奇呢：）

不用管它有多神奇了，看看下面這張圖，先從架構(gòu)上總體了解到這個(gè)層次就行了。最上面是H5，中間是Web前端框架，以及移動(dòng)開(kāi)發(fā)框架的API。如果你需要調(diào)用手機(jī)原生的功能，例如攝像頭、錄音等，這些工作會(huì)由移動(dòng)開(kāi)發(fā)框架去做，你只需要了解這種框架是如何工作的即可。學(xué)會(huì)如何使用攝像頭，就知道如何使用錄音了，舉一反三。

移動(dòng)開(kāi)發(fā)框架

在準(zhǔn)備使用Web App重新編寫(xiě)之前的原生APP前，工信部的人有點(diǎn)懷疑，因?yàn)榇蠹叶悸?tīng)說(shuō)HTML5的移動(dòng)應(yīng)用太慢，體驗(yàn)太差，這萬(wàn)一做完不行怎么辦？我解釋了一下，發(fā)現(xiàn)沒(méi)用，所以索性自己就動(dòng)工了。我想告訴大家的是，只要你不是對(duì)性能要求特別高，例如畫(huà)圖之類的App，其實(shí)很多應(yīng)用都可以使用HTML5來(lái)做的。昨天我還在一個(gè)材料計(jì)算器群里和群主說(shuō)，可以使用Web App方式來(lái)做，免得群里的人都在等著你的iOS版本出來(lái)。群主說(shuō)他嘗試過(guò)，但是每次計(jì)算要等好幾秒，還給我舉例說(shuō)見(jiàn)過(guò)12306訂火車票的App嗎？

我想告訴大家的就是，這里存在很多偏見(jiàn)，因?yàn)橐郧笆謾C(jī)性能差，H5也沒(méi)有這么普及，所以體驗(yàn)不好、效率差強(qiáng)人意，但是現(xiàn)在HTML5越來(lái)越好，移動(dòng)硬件性能也越來(lái)越強(qiáng)，很多應(yīng)用都已悄然上演了混合式開(kāi)發(fā)的方式。你看看支付寶、淘寶，其實(shí)手機(jī)App里面都有Web的影子，你發(fā)現(xiàn)了嗎？

因?yàn)橐苿?dòng)設(shè)備的普及，App也越來(lái)越多，早就了高價(jià)收購(gòu)Andorid和iOS開(kāi)發(fā)者的現(xiàn)象，而現(xiàn)在因?yàn)閃eb App的興起，又造價(jià)了Web前端的高價(jià)，雖不是主要原因，但肯定是其中一個(gè)原因，所以學(xué)習(xí)移動(dòng)開(kāi)發(fā)會(huì)提升你的身價(jià)，當(dāng)然前提是你真的一個(gè)人能搞定。

以前我們做桌面或Web應(yīng)用一樣，語(yǔ)言和框架都有很多可以選擇，那做移動(dòng)開(kāi)發(fā)框架呢？依然我們有很多選擇，只是我真的很長(zhǎng)時(shí)間或者沒(méi)有太多時(shí)間專注學(xué)習(xí)每一個(gè)，所以下面只能簡(jiǎn)單介紹一下了。

PhoneGap

PhoneGap是一款開(kāi)源的手機(jī)應(yīng)用開(kāi)發(fā)平臺(tái)，它僅僅只用HTML和javaScript語(yǔ)言就可以制作出能在多個(gè)移動(dòng)設(shè)備上運(yùn)行的應(yīng)用。 PhoneGap將移動(dòng)設(shè)備本身提供的復(fù)雜的API進(jìn)行了抽象和簡(jiǎn)化，提供了一系列豐富的API供開(kāi)發(fā)者調(diào)用，只要你會(huì)HTML和Javascript或 者Java語(yǔ)言，就可以利用PhoneGap提供的API去調(diào)用各種功能，制作出在各種手機(jī)平臺(tái)(iPhone，Android ，BlackBerry，Symbian，Palm，Window Phone)上運(yùn)行的應(yīng)用。目前phonegap獲得Apple,IBM,NOKIA,palm等眾多公司的支持。簡(jiǎn)單來(lái)說(shuō)使用PhoneGap就是使用HTML,JavaScript和CSS來(lái)開(kāi)發(fā)程序，最終通過(guò)PhoneGap可以產(chǎn)生對(duì)應(yīng)版本的native 程序。

IONIC

IONIC 是目前最有潛力的一款HTML5手機(jī)應(yīng)用開(kāi)發(fā)框架，它提供了很多UI組件來(lái)幫助開(kāi)發(fā)者開(kāi)發(fā)強(qiáng)大的應(yīng)用。它使用JavaScript MVVM框架和 AngularJS來(lái)增強(qiáng)應(yīng)用。提供數(shù)據(jù)的雙向綁定，使用它成為Web和移動(dòng)開(kāi)發(fā)者的共同選擇。即將發(fā)布的AngularJS 2.0將會(huì)專注于移動(dòng)開(kāi)發(fā)，相信IONIC一定會(huì)取得不錯(cuò)的成就 。

IONIC的開(kāi)發(fā)團(tuán)隊(duì)將盡快開(kāi)發(fā)出一種通過(guò)IONIC creator提供開(kāi)發(fā)者快速創(chuàng)建IONIC應(yīng)用的方式。我們將很快就會(huì)看到一個(gè)支持拖拉功能的可視化開(kāi)發(fā)工具，幾分鐘內(nèi)開(kāi)發(fā)一個(gè)app將不再只是吹xx。

這里要說(shuō)一AngularJS，這個(gè)框架我在前兩年看過(guò)，我喜歡這種MVVM框架的東東，當(dāng)時(shí)只是簡(jiǎn)單學(xué)習(xí)了一下，如果有時(shí)間我可能會(huì)把現(xiàn)在急于JQueryMobile和沒(méi)有框架的Js改為急于IONIC來(lái)編寫(xiě)。

......

除了以上一個(gè)我實(shí)際做過(guò)，一個(gè)我想學(xué)的之外，還有很多Web App開(kāi)發(fā)框架，國(guó)內(nèi)現(xiàn)在網(wǎng)上也能收到好幾個(gè)，不過(guò)我都沒(méi)怎么用過(guò)，這里也就不做介紹了，總之這一小段就是告訴，開(kāi)發(fā)框架有很多，基于我以前自己也做框架（OpenExPRessApp）的經(jīng)驗(yàn)，任何東西都不可能完美，所以我們不要太苛求了，如果你喜歡這個(gè)框架，那就去學(xué)習(xí)，學(xué)習(xí)之后如果覺(jué)得可行，那就找個(gè)小項(xiàng)目試試，如果試后覺(jué)得不錯(cuò)，那就多花些功夫做好，僅此而已。 

大家看此系列blog就知道，我后續(xù)所有的博文都是圍繞第一個(gè)來(lái)介紹，所以如果你對(duì)第一個(gè)不感興趣，那么可能這個(gè)系列就不適合你了，當(dāng)然，你以后也可以擇取系列中一些單獨(dú)篇章來(lái)學(xué)習(xí)你所需要的。

cordova與phonegap有什么關(guān)系？

phoengap

如果能了解一個(gè)框架的興起還是一件比較有趣的事。08年一次ios開(kāi)發(fā)者大會(huì)上來(lái)自Nitobi軟件公司的幾個(gè)家伙突發(fā)奇想，提出一個(gè)想法，想做一個(gè)工具來(lái)彌補(bǔ)web和ios開(kāi)發(fā)之間的不足，并提出 Bridging the gap between the web and the iPhone sdk。一開(kāi)始的目標(biāo)并不是很大，但是做到了現(xiàn)在的written once,run everywhere。我們很多人做事其實(shí)也應(yīng)該這樣，一開(kāi)始不要把目標(biāo)弄得那么大，跳一步能夠上就好，敏捷個(gè)人的形成也是這樣，一開(kāi)始只是分享而已，隨著分享越多才成為了一個(gè)幫助有成長(zhǎng)意識(shí)的人去認(rèn)識(shí)自我管理自我的成長(zhǎng)體系。如果一下子目標(biāo)太大，你會(huì)因?yàn)殡y以實(shí)現(xiàn)而給自己找理由，這樣到頭來(lái)你什么都沒(méi)有。

09年他們推出android adk和blackberry sdk，成了移動(dòng)開(kāi)發(fā)者的福音，就連ibm也加入進(jìn)來(lái)。phonegap繼續(xù)成長(zhǎng)，在2011年10月，整個(gè)Nitobi團(tuán)隊(duì)被adobe收購(gòu)，PhoneGap的項(xiàng)目主管Brian LeRoux指出開(kāi)源PhoneGap的決定在Adobe收購(gòu)Nitobi之前就做出了，由于Adobe現(xiàn)在擁有PhoneGap商標(biāo)，他們不得不換個(gè)名字，第一個(gè)選中的名字是Callback，毫無(wú)創(chuàng)意，因此再改一次，產(chǎn)品現(xiàn)在叫Apache Cordova。隨后adobe把 phonegap送給了apache軟件基金會(huì)，接著apache把phonegap改名為cordova，cordova是Nitobi團(tuán)隊(duì)當(dāng)時(shí)坐落的街道名稱，用此名來(lái)紀(jì)念Nitobi團(tuán)隊(duì)的貢獻(xiàn)。

所以Apache Cordova是從PhoneGap中抽出的核心代碼，是驅(qū)動(dòng)PhoneGap的核心引擎，你看著兩個(gè)官網(wǎng)風(fēng)格多差不多。

Cordova

我們后續(xù)的所有文章和代碼都是基于Cordova的，如果有誰(shuí)知道Phonegap和Cordova的具體差異在哪里，可以回復(fù)補(bǔ)充一下。

誰(shuí)在使用PhoneGap

誠(chéng)實(shí)的說(shuō)，上面的都是在官網(wǎng)看到放上去的，至于真的用的怎么樣就不知道了。這樣說(shuō)起來(lái)感覺(jué)我很不負(fù)責(zé)似的，所以在本系列第一盤(pán)中我就告訴了大家，我自己做的敏捷個(gè)人App和掌中廣材App就是用Cordova做的，而且都已經(jīng)在各大Andorid市場(chǎng)和iOS AppStore上架了。

支持平臺(tái)

我相信很多人選擇這種方式，而不是原生，很看重的一點(diǎn)就是跨平臺(tái)，也就是一次代碼，多個(gè)平臺(tái)復(fù)用。沒(méi)錯(cuò)，我現(xiàn)在主要在Andorid上開(kāi)發(fā)，然后把www目錄下的所有文件都拷貝到iOS目錄下，然后就OK了。至于你說(shuō)，wp系列的復(fù)用起來(lái)如何呢？很抱歉，我沒(méi)有wp的手機(jī)，沒(méi)有試過(guò)。之所以還沒(méi)有試過(guò)，是因?yàn)檫@類客戶群數(shù)量還比較少，所以我們也沒(méi)有投入精力去做這個(gè)部分，這不是技術(shù)問(wèn)題，而是產(chǎn)品對(duì)技術(shù)的定位方面決定的。

但是，從官網(wǎng)我們可以看到，它對(duì)平臺(tái)的支持是很不錯(cuò)的，我也相信它們能做到iOS和Andorid復(fù)用，就能做到其他平臺(tái)復(fù)用，因?yàn)閺募軜?gòu)原理來(lái)看是一樣的。

預(yù)習(xí)作業(yè) 

真是暈？竟然還有預(yù)習(xí)作業(yè)，弄得我就像老師一樣。呵呵，不過(guò)還真有很多人叫我周老師，可能是因?yàn)槲野衙艚輦€(gè)人的博客當(dāng)做練習(xí)變成習(xí)慣了，所以在本篇結(jié)尾時(shí)，希望大家在輕松讀完本篇之后，做一下幾個(gè)練習(xí)，遇到問(wèn)題呢可以回復(fù)，這樣我在寫(xiě)下一篇的時(shí)候呢就可以幫你解決問(wèn)題了，這既鍛煉你的學(xué)習(xí)能力，也能夠更及時(shí)更好的解決你的問(wèn)題。