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

一、什么是Hybrid Mobile App

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

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

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

多View混合型： native view和web view獨立展示，交替出現。 其應用主體通常是native app，web技術作為補充。即在需要的時候，將web view作為獨立的view運行，在web view內完成相關的展示操作。開發難度與native app相當。舉個栗子：Instagram的timeline使用的是web view。

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

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

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

二、 什么時候選擇Hybrid App

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

• 你希望針對哪個平臺做開發？
• 你希望通過應用商店發布應用么？
• 你希望利用手機特有的性能么？
• 你的團隊技術能力如何？
• 你的項目周期和預算是多少？

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

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

• InfoQ上高嘉峻的一篇文章分享了幾個hybrid app開發的誤區，也是開發過程中應該盡量避免的：

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

• 忽略關鍵因素： Web是基于PC的一種開發模式，而mobile app運行于移動端。通常，web開發者使用PC瀏覽器模擬app中的web view進行調試，而不是直接使用手機上的web view。 二者能支配的CPU資源，最大占有內存，運行網絡環境，和鼠標/觸控操作，瀏覽器對CSS/JS的解析和對事件的處理有著巨大的差別。而這些差別常常是web頁面能否正常運行于app中的關鍵因素。

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

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

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

<2>區分三者

• nativeapp是一個原生程序，一般運行在機器操作系統上，有很強的交互，一般靜態資源都是在本地的。瀏覽使用方便，體驗度高。在實現上要么使用Objecttive-c和cocoaTouch Framework撰寫iOS程序，要么選擇java+Android Framework撰寫android應用程序。

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

• webapp是生存在瀏覽器里的應用，所以只能運行在瀏覽器里，宿主是瀏覽器，不再是操作系統。資源一般都在網絡上。說的根本點就是一個觸屏版的網站

什么叫做原生App?

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

什么叫做移動Web App?

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

什么是混合app?

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

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

• Web App是指基于Web的系統和應用，運行在高端手機的網絡和瀏覽器上，用網頁技術開發實現特定功能的應用，對手機性能要求比較高。

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

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

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

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

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

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

<3>區分native APP ，web APP，hybrid APP

1、Native App

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

想創建Native App，開發者必須編寫源代碼，使用由操作系統開發商提供的工具，對源代碼進行編譯。代碼編譯之后以2進制或者字節碼的形式運行在操作系統上，直接調用操作系統的Device API。

雖然不同操作系統上進行的開發過程常常很相似，但是每一種移動操作系統都隨帶各自的獨特工具。平臺之間的這些區別導致了Native開發方法的最重大缺點之一：為一種移動平臺編寫的代碼無法在另一種平臺上使用。Native App的優缺點總結如下：

優點

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

缺點

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

2、Web App

Web App是運行于網絡和標準瀏覽器上，以HTML+JS+CSS等WEB技術開發實現特定功能的應用。通過瀏覽器來調用Device API，但是只有數量有限的這些API向瀏覽器里面運行的Web App公開。基于當下開始普及流行的HTML5，Web App可以實現很多原本Native App才可以實現的功能，，比如LBS的功能、本地數據存儲、音視頻播放的功能，甚至還有調用照相機和結合GPU的硬件加速功能。

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

優點

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

缺點

• 臨時性的入口；
• 無法獲取系統級別的通知，提醒，動效等等；
• 用戶留存率低；
• 需要依賴網絡，體驗較差。

3、Hybrid App

Hybrid App是一種用Native技術來搭建App的外殼，殼里的內容由Web技術來提供的移動應用，兼具“Native App良好交互體驗的優勢”和“Web App跨平臺開發的優勢”。

根據實現的不同，可以細分為兩種實現方案：

（1）在Native App中使用WebView加載遠端Web資源

這種方案的Web資源放置在服務器上，開發者不必經歷提交和批準過程——有些App商店要求這個過程，就可以對App進行小幅更新。遺憾的是，這個方法擯棄了任何離線可用性，因為設備與網絡沒有連接時，無法訪問設備。

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

• Hybrid App同時使用網頁語言與程序語言開發，但其總體特性更接近Native App。只是因為同時使用了web語言編碼，所以開發成本和難度比Native App要小很多。因此，Hybrid App兼具了Native App的優勢，也兼具了Web App使用HTML5跨平臺開發低成本的優勢。

?

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。