隨著智能手機(jī)的普及，移動端應(yīng)用幾乎成為每個互聯(lián)網(wǎng)產(chǎn)品的標(biāo)配。在快速迭代的互聯(lián)網(wǎng)戰(zhàn)場中高效開發(fā)、低成本上線產(chǎn)品，是每個應(yīng)用開發(fā)團(tuán)隊追求的目標(biāo)。此時，選擇合適的應(yīng)用類型和開發(fā)模式便至關(guān)重要。移動應(yīng)用可以粗分為三種：原生應(yīng)用(native app)， 網(wǎng)頁應(yīng)用(web app，或HTML5 app)，以及它們的混血兒——混合模式移動應(yīng)用(hybrid app)。
今天就來和大家簡單聊聊近年來蓬勃發(fā)展的hybrid app。

一、什么是Hybrid Mobile App

Hybrid app從外觀上來看是一個native app，實(shí)則只有一個UIWebView，里面訪問的是一個web app，如新聞類和視頻類的應(yīng)用普遍采取該策略：native的框架加上web的內(nèi)容。不同于native app需要針對不同的平臺使用不同的開發(fā)語言（如使用Objective-C、Swift開發(fā)iOS應(yīng)用，使用Java等開發(fā)Android應(yīng)用，使用C#開發(fā)Windows Phone應(yīng)用），hybrid app允許開發(fā)者僅使用一套網(wǎng)頁語言代碼（HTML5+CSS+JavaScript），即可開發(fā)能夠在不同平臺上部署的類原生應(yīng)用 。由于hybrid app結(jié)合了native app良好用戶交互體驗(yàn)和web app跨平臺開發(fā)的優(yōu)勢，能夠顯著節(jié)省移動應(yīng)用開發(fā)的時間和成本，hybrid app得到越來越多公司的青睞。

Source: Native, HTML5, or Hybrid: Understanding Your Mobile Application Development Options

按照網(wǎng)頁語言和程序語言的混合，hybrid app通常可以分為三種類型：

多View混合型： native view和web view獨(dú)立展示，交替出現(xiàn)。 其應(yīng)用主體通常是native app，web技術(shù)作為補(bǔ)充。即在需要的時候，將web view作為獨(dú)立的view運(yùn)行，在web view內(nèi)完成相關(guān)的展示操作。開發(fā)難度與native app相當(dāng)。舉個栗子：Instagram的timeline使用的是web view。

單View混合型： 在同一個view內(nèi)，native view和web view為層疊關(guān)系，同時出現(xiàn)。開發(fā)成本較高，難度較大，但是體驗(yàn)較好。舉個栗子：百度搜索同時實(shí)現(xiàn)充分的靈活性和較好的用戶體驗(yàn)。

Web主體型： 應(yīng)用主體是web view，穿插native功能，主要以網(wǎng)頁語言編寫。整體開發(fā)難度低，基本可以實(shí)現(xiàn)跨平臺；而用戶體驗(yàn)好壞，主要取決于底層中間件的交互與跨平臺能力。舉個栗子：項目管理工具 Basecamp使用web view呈現(xiàn)內(nèi)容，調(diào)用系統(tǒng)原生API實(shí)現(xiàn)界面導(dǎo)航等功能來提高用戶體驗(yàn)。

• Hybrid app也并非是完美的解決方案。由于其使用HTML5，某些依賴于復(fù)雜的原生功能或者繁重的過渡動畫的應(yīng)用會出現(xiàn)卡頓；同時，為了模擬native app的UI和感官，需要投入額外的時間和精力；盡管可以跨平臺，但是并不能完全支持所有的設(shè)備和操作系統(tǒng)；最后，如果應(yīng)用的體驗(yàn)不夠原生化，如一個簡單的網(wǎng)站，則還有被Apple App Store拒絕的風(fēng)險。

二、 什么時候選擇Hybrid App

在hybrid app備受追捧的今天，我們也許會隨大流優(yōu)先考慮開發(fā)hybrid app。但是，每個產(chǎn)品各具特色，還沒有哪一種解決方案可以完美地應(yīng)萬變。hybrid app的中庸讓它大放異彩，也限制了它的應(yīng)用場景 。在決定采用一種開發(fā)模式之前，有許多因素需要考慮，諸如：

• 你希望針對哪個平臺做開發(fā)？
• 你希望通過應(yīng)用商店發(fā)布應(yīng)用么？
• 你希望利用手機(jī)特有的性能么？
• 你的團(tuán)隊技術(shù)能力如何？
• 你的項目周期和預(yù)算是多少？

如果要設(shè)計Angry Birds一類對圖形要求很高的游戲，那么在暫不考慮技術(shù)團(tuán)隊能力的情況下，native app是最優(yōu)選擇；如果要設(shè)計如Yelp一類內(nèi)容導(dǎo)向的應(yīng)用，那么hybrid app會是很好的選擇；如果項目時間緊張，沒有足夠的人手和資金，對圖形和系統(tǒng)原生特性沒有要求，那么web app將是性價比最高的解決方案。

表一對比了native app,hybrid app和web app在不同方面的表現(xiàn)，可以幫助你根據(jù)實(shí)際情況選擇最佳的解決方案。

• InfoQ上高嘉峻的一篇文章分享了幾個hybrid app開發(fā)的誤區(qū)，也是開發(fā)過程中應(yīng)該盡量避免的：

• 為了HTML5而hybrid app： HTML5是HTML4.0.1和XHTML1.0的升級版，有更強(qiáng)大的表現(xiàn)功能，并加入了local storage等技術(shù)，為web頁面提供了更大的想象空間和更多的可能性。但是，作為發(fā)展中的技術(shù)，HTML5收到瀏覽器兼容性和手機(jī)硬件水平的影響，能提供的功能和native app扔有一定的差距。開發(fā)應(yīng)用時，首先是要滿足用戶需求，而不是追趕技術(shù)革新的大潮。所以開發(fā)應(yīng)用時，應(yīng)從應(yīng)用本身功能和團(tuán)隊開發(fā)資源綜合考量，決定是否采用hybrid app開發(fā)模式。

• 忽略關(guān)鍵因素： Web是基于PC的一種開發(fā)模式，而mobile app運(yùn)行于移動端。通常，web開發(fā)者使用PC瀏覽器模擬app中的web view進(jìn)行調(diào)試，而不是直接使用手機(jī)上的web view。 二者能支配的CPU資源，最大占有內(nèi)存，運(yùn)行網(wǎng)絡(luò)環(huán)境，和鼠標(biāo)/觸控操作，瀏覽器對CSS/JS的解析和對事件的處理有著巨大的差別。而這些差別常常是web頁面能否正常運(yùn)行于app中的關(guān)鍵因素。

• 富交互導(dǎo)致體驗(yàn)差： 這主要體現(xiàn)在兩個方面：（1）web與手機(jī)平臺默認(rèn)交互習(xí)慣不一致：iOS和Android各有一套交互習(xí)慣，包括視覺風(fēng)格，界面切換，操作習(xí)慣等。比如手機(jī)端系統(tǒng)風(fēng)格是左右滑屏來進(jìn)入或者退出界面，而舊界面保持狀態(tài)；web則是默認(rèn)無論加載還是后退，都會刷新舊界面，造成體驗(yàn)上的損失。如果模擬native的交互方式，那么會提高開發(fā)成本，卻也難以達(dá)到native的流暢性。（2）與native相比同樣的功能在性能上存在差距：Web界面上JS對HTML Node的操作需要消耗大量的CPU資源。首先，手機(jī)的CPU性能普遍低于PC端；其次，不同手機(jī)之間的硬件水平也參差不齊，比如在iPhone6s上可以流暢運(yùn)行的界面，在iPhone5、MX5上可能就無法達(dá)到同樣的流暢度。

• 跨平臺： Hybrid app的優(yōu)勢之一是繼承web跨平臺的特性。然而，在智能手機(jī)軟硬件版本眾多的今天，兼容性是個不容忽視的問題。不同的安卓操作系統(tǒng)其瀏覽器內(nèi)核對JS和CSS的解析、事件處理會有不同；iOS不同版本之間也存在較大差異。所以，在跨平臺開發(fā)時，兼容性也是需要重點(diǎn)考慮的問題。

• 交互一致性： 這里的一致性并非指同一應(yīng)用在不同平臺上的一致性體驗(yàn)，而是指在同一平臺上，hybrid app和native平臺的一致性。比如“返回”操作，在iOS平臺上頁面頂部留有一個44像素高的導(dǎo)航欄，左側(cè)的返回按鈕用于返回操作，可以通過絕對地址的方式鏈接到任何其它界面；而Android通常使用設(shè)備提供的返回鍵，返回上一個界面，如果自行配置平臺返回按鈕，那么它會和設(shè)備提供的返回鍵指向不同的位置。

<2>區(qū)分三者

• nativeapp是一個原生程序，一般運(yùn)行在機(jī)器操作系統(tǒng)上，有很強(qiáng)的交互，一般靜態(tài)資源都是在本地的。瀏覽使用方便，體驗(yàn)度高。在實(shí)現(xiàn)上要么使用Objecttive-c和cocoaTouch Framework撰寫iOS程序，要么選擇java+Android Framework撰寫android應(yīng)用程序。

• hybridapp是一個半原生程序，偽造了一個瀏覽器的apk/ipa原生程序，把地址寫死了，然后里面運(yùn)行了一個webapp。里面是WebView UI 。但是還是運(yùn)行在機(jī)器的操作系統(tǒng)上，交互較弱，資源一般在本地或者網(wǎng)絡(luò)都可以。瀏覽體驗(yàn)度次之。

• webapp是生存在瀏覽器里的應(yīng)用，所以只能運(yùn)行在瀏覽器里，宿主是瀏覽器，不再是操作系統(tǒng)。資源一般都在網(wǎng)絡(luò)上。說的根本點(diǎn)就是一個觸屏版的網(wǎng)站

什么叫做原生App?

原生App是專門針對某一類移動設(shè)備而生的，它們都是被直接安裝到設(shè)備里，而用戶一般也是通過網(wǎng)絡(luò)商店或者賣場來獲取例如 The App Store 與Android Apps on Google Play 隨便說幾個原生App的例子，比如iOS的Camera+以及Android的 KeePassDroid

什么叫做移動Web App?

一般說來，移動Web App都是都是需要用到網(wǎng)絡(luò)的，它們利用設(shè)備上的瀏覽器(比如iPhone的Safari)來運(yùn)行，而且它們不需要在設(shè)備上下載后安裝。

什么是混合app?

Hybrid App是指介于web-app、native-app這兩者之間的app,它雖然看上去是一個Native App，但只有一個UI WebView，里面訪問的是一個Web App，比如街旁網(wǎng)最開始的應(yīng)用就是包了個客戶端的殼，其實(shí)里面是HTML5的網(wǎng)頁，后來才推出真正的原生應(yīng)用。再徹底一點(diǎn)的，如掌上百度和淘寶客戶端Android版，走的也是Hybrid App的路線，不過掌上百度里面封裝的不是WebView，而是自己的瀏覽內(nèi)核，所以體驗(yàn)上更像客戶端，更高效。

• 綜合一下就是：“Hybrid App同時使用網(wǎng)頁語言與程序語言開發(fā)，通過應(yīng)用商店區(qū)分移動操作系統(tǒng)分發(fā)，用戶需要安裝使用的移動應(yīng)用”。總體特性更接近Native App但是和Web App區(qū)別較大。只是因?yàn)橥瑫r使用了網(wǎng)頁語言編碼，所以開發(fā)成本和難度比Native App要小很多。因此說，Hybrid App兼具了Native App的所有優(yōu)勢，也兼具了Web App使用HTML5跨平臺開發(fā)低成本的優(yōu)勢。

• Web App是指基于Web的系統(tǒng)和應(yīng)用，運(yùn)行在高端手機(jī)的網(wǎng)絡(luò)和瀏覽器上，用網(wǎng)頁技術(shù)開發(fā)實(shí)現(xiàn)特定功能的應(yīng)用，對手機(jī)性能要求比較高。

• Native App（原生開發(fā)）:目前較為成熟，各大公司均采用此方式。但是其人工成本較高，同一個項目，至少需要Android端、iOS端、Web端三個開發(fā)團(tuán)隊。

• Hybrid App（混合開發(fā)），基于第三方跨平臺移動應(yīng)用引擎框架進(jìn)行開發(fā)。使用HTML5和JS作為開發(fā)，調(diào)用引擎封裝的底層功能如照相機(jī)、傳感器、通訊錄等。

拿酒來形象化這三種模式的話：

• Web App就像白酒那樣渾厚甘醇，度數(shù)高，但不適合任何人的口味，制造成本低，

• Native App就是葡萄酒，分紅白類型，對葡萄品質(zhì)要求高，口味大眾化，比較成熟，

• Hybrid App就是雞尾酒，混合了多種酒的優(yōu)勢，非常適合跨平臺，是以后的一個App開發(fā)趨勢。

<3>區(qū)分native APP ，web APP，hybrid APP

1、Native App

Native App是一種基于智能手機(jī)本地操作系統(tǒng)如iOS、Android、WP并使用原生程式編寫運(yùn)行的第三方應(yīng)用程序,也叫本地app。一般使用的開發(fā)語言為JAVA、C++、Objective-C。

想創(chuàng)建Native App，開發(fā)者必須編寫源代碼，使用由操作系統(tǒng)開發(fā)商提供的工具，對源代碼進(jìn)行編譯。代碼編譯之后以2進(jìn)制或者字節(jié)碼的形式運(yùn)行在操作系統(tǒng)上，直接調(diào)用操作系統(tǒng)的Device API。

雖然不同操作系統(tǒng)上進(jìn)行的開發(fā)過程常常很相似，但是每一種移動操作系統(tǒng)都隨帶各自的獨(dú)特工具。平臺之間的這些區(qū)別導(dǎo)致了Native開發(fā)方法的最重大缺點(diǎn)之一：為一種移動平臺編寫的代碼無法在另一種平臺上使用。Native App的優(yōu)缺點(diǎn)總結(jié)如下：

優(yōu)點(diǎn)

• 提供最佳的用戶體驗(yàn)，最優(yōu)質(zhì)的用戶界面，最華麗的交互
• 針對不同平臺提供不同體驗(yàn)
• 下載到本地，可節(jié)省帶寬成本
• 可訪問本地資源
• 直接訪問系統(tǒng)級API
• 操作速度更快
• 用戶留存率高

缺點(diǎn)

• 移植到不同平臺上比較麻煩
• 需要維護(hù)多個版本
• 發(fā)布新版本需要通過store或market的確認(rèn)
• 盈利需要與第三方分成
• 開發(fā)的成本比較大，需要針對不同平臺開發(fā)相應(yīng)的版本
• 更新體驗(yàn)較差、同時也比較麻煩（每一次發(fā)布新的版本，都需要做版本打包，且需要用戶手動更新，或一個讓用戶反感的提示）。

2、Web App

Web App是運(yùn)行于網(wǎng)絡(luò)和標(biāo)準(zhǔn)瀏覽器上，以HTML+JS+CSS等WEB技術(shù)開發(fā)實(shí)現(xiàn)特定功能的應(yīng)用。通過瀏覽器來調(diào)用Device API，但是只有數(shù)量有限的這些API向?yàn)g覽器里面運(yùn)行的Web App公開。基于當(dāng)下開始普及流行的HTML5，Web App可以實(shí)現(xiàn)很多原本Native App才可以實(shí)現(xiàn)的功能，，比如LBS的功能、本地數(shù)據(jù)存儲、音視頻播放的功能，甚至還有調(diào)用照相機(jī)和結(jié)合GPU的硬件加速功能。

由于它不依賴于操作系統(tǒng)，因此開發(fā)了一款Web App后，基本能應(yīng)用于各種系統(tǒng)平臺。并且還有版本升級容易的優(yōu)勢（畢竟服務(wù)器是受自己控制的）。但是這種方案的缺點(diǎn)也很明顯——無法使用系統(tǒng)級API，只能做為一個臨時的入口，用戶很難留存。Web App的優(yōu)缺點(diǎn)總結(jié)如下：

優(yōu)點(diǎn)

• 開發(fā)成本低；
• 更新快；
• 更新無需通知用戶，不需要手動升級；
• 能夠跨多個平臺和終端；
• 維護(hù)比較簡單。

缺點(diǎn)

• 臨時性的入口；
• 無法獲取系統(tǒng)級別的通知，提醒，動效等等；
• 用戶留存率低；
• 需要依賴網(wǎng)絡(luò)，體驗(yàn)較差。

3、Hybrid App

Hybrid App是一種用Native技術(shù)來搭建App的外殼，殼里的內(nèi)容由Web技術(shù)來提供的移動應(yīng)用，兼具“Native App良好交互體驗(yàn)的優(yōu)勢”和“Web App跨平臺開發(fā)的優(yōu)勢”。

根據(jù)實(shí)現(xiàn)的不同，可以細(xì)分為兩種實(shí)現(xiàn)方案：

（1）在Native App中使用WebView加載遠(yuǎn)端Web資源

這種方案的Web資源放置在服務(wù)器上，開發(fā)者不必經(jīng)歷提交和批準(zhǔn)過程——有些App商店要求這個過程，就可以對App進(jìn)行小幅更新。遺憾的是，這個方法擯棄了任何離線可用性，因?yàn)樵O(shè)備與網(wǎng)絡(luò)沒有連接時，無法訪問設(shè)備。

（2）將一組HTML、JavaScript、CSS和媒體文件，封裝到App代碼中，存儲在設(shè)備本地，使用Cordova/PhoneGap等框架通過WebView加載本地資源進(jìn)行頁面渲染
把Web代碼封裝到App里面在一定程度上緩解從遠(yuǎn)端加載靜態(tài)資源導(dǎo)致UI展示延遲的問題，可以提高性能和可訪問性，并且還可以通過橋接Native和Web來調(diào)用一些Device的API。
但是其劣勢也很明顯，一是不允許遠(yuǎn)程更新；二是安裝包變大；三是如果想調(diào)用相關(guān)平臺的API，需要針對平臺單獨(dú)進(jìn)行開發(fā)，如果在應(yīng)用中用到了大量的Device API，那么開發(fā)的效率將大大降低。

• Hybrid App同時使用網(wǎng)頁語言與程序語言開發(fā)，但其總體特性更接近Native App。只是因?yàn)橥瑫r使用了web語言編碼，所以開發(fā)成本和難度比Native App要小很多。因此，Hybrid App兼具了Native App的優(yōu)勢，也兼具了Web App使用HTML5跨平臺開發(fā)低成本的優(yōu)勢。

?

總結(jié)

以上是生活随笔為你收集整理的native APP,hybrid APP,web APP, 小程序的区别的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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