最近專案中因各種客觀因素，移動端都是預設用的純H5 APP，感受最深的就是各種坑啊，好大的坑啊。產品上線後，帶著各種坑後的總結原因方發現很多人都說純H5 APP一次編寫就能支援android和IOS兩種不同的APP，大大降低了開發成本。可實際的工作中卻發現並不是如此，既不省事兒，又有很多BUG，而且各種css的相容性的問題一大堆，更不要說動畫點不到這些問題啦，真是一個坑比一個坑深啊。即使如此，雖然還是有很多問題沒有很好的解決，為什麼還是有很多H5匯合APP開發的人呢。這裡要提到一個剛剛當了奶爸不久的扎克伯格——小扎同學。

早在2010年的時候，那個時候HTML5剛剛興起不久，喬布斯就說HTML5將會成為取代Flash的下一個技術浪潮，從那個時候開始，很多大公司和有想法的創業公司都在試水並嘗試不斷的推動HTML5的發展。這裡面就以Facebook的創始人最為炙熱。他提出一定要儘可能的利用HTML5和Web App來打破iOS和Android的壟斷，Facebook在資訊浪潮的年代竟然用長達2年的時間潛心研發HTML5，投注大量的精力和物力。最終因HTML5自身技術問題導致經常出現bug，那對Facebook來說影響是不可估量的，因此差點引發被雅虎收購的命運。好在到2012年因為公司對市場上所有JS MVC框架都不滿意以後，再加上藉著重構Instagram網站的機會，才決定自己寫一套，這個時候才從HTML5轉向原生應用。

那說到H5和原生APP的差異，那什麼是原生APP，什麼是web APP？看到一個前輩解釋的特別好，在這裡和大家分享。

Web App即是一種框架型APP開發模式(HTML5 APP 框架開發模式)，該開發具有跨平臺的優勢，該模式通常由“HTML5雲網站+APP應用客戶端”兩部份構成，APP應用客戶端只需安裝應用的框架部份，而應用的資料則是每次開啟APP的時候，去雲端取資料呈現給手機使用者。

原生APP又稱Native App，該開發針對IOS、Android、Windows等不同的手機作業系統要採用不同的語言和框架進行開發，該模式通常是由“雲伺服器資料+APP應用客戶端”兩部份構成，APP應用所有的UI元素、資料內容、邏輯框架均安裝在手機終端上。

那除了定義中提到兩者的構成部分和讀取資料的不同以外，還有哪些方面有區別呢？偶從以下幾個方面簡單闡述一下：

1、開發方面的區別（這個地方太專業啦，請教了團隊的開發小夥伴）

目前React Native開發越來越火，微信小程式是基於React Native開發的，體驗接近原生APP，發展前景值得重視。不過好在現在非原生APP同樣可以呼叫藍芽、相機等硬體，也能順利釋出到蘋果APP store。

移動Web App

　　1、因為執行在移動裝置的瀏覽器上，所以只需要一個開發專案

　　2、這種應用可以使用HTML5,CSS3以及JavaScript以及伺服器端語言來完成(PHP,Ruby on Rails,Python)

　　3、這裡可沒有標準的SDK，基本任意選擇別忘了有一些跨平臺的開發工具，比如PhoneGap, Sencha Touch 2以及Appcelerator Titanium等等。

原生App

　　1、每一種移動作業系統都需要獨立的開發專案

　　2、每種平臺都需要獨立的開發語言。Java(Android), Objective-C(iOS)以及Visual C++(Windows phone)等等

　　3、需要使用各自的軟體開發包，開發工具以及各自的控制元件

2、能力方面的區別

移動Web App

　　只能使用有限的移動硬體裝置功能。

原生App

　　能夠與移動硬體裝置的底層功能，比如個人資訊，攝像頭以及重力加速器等等。對於這一點感觸很深刻，2016年做新年H5營銷小活動的時候，就是因為沒有考慮到H5不能使用移動硬體端重力加速器而導致臨時替換設計方案。

3、獲取方法的區別

　　移動Web App

　　1、從移動裝置上的瀏覽器訪問

　　2、不需要安裝額外的軟體

　　3、軟體更新只需要伺服器就夠了

　　4、因為現在沒有什麼商品或賣場提供這種App，不過一般都是巢狀在系統內部，或者內部系             統中使用

　   5、跨平臺開發，使用者不需要去賣場來下載安裝App

      6、需要過度依賴網路，沒有任何快取資料

      7、任何時候都可以釋出App，因為根本不需要官方賣場的稽核

　　8、如果你已經有了一個Web App，你可以使用 responsive web design來輔助改進(這也是優勢?)

      9、所有的使用者都是用同樣的版本

　　原生App

　　1、直接下載到裝置

　　2、以獨立的應用程式執行(並不需要瀏覽器)

　　3、使用者必須手動去下載並安裝這些原生App

　　4、有一些商店與賣場來幫助使用者尋找你的App，app store裡面應有盡有。

　　5、原生型APP應用的安裝包相對較大，包含UI元素、資料內容、邏輯框架;

　　6、手機使用者無法上網也可訪問APP應用中以前下載的資料。

　　7、原生型的APP可以呼叫手機終端的硬體裝置(語音、攝像頭、簡訊、GPS、藍芽、重力感應等)

　　8、APP應用更新新功能，涉及到每次要向各個應用商店進行提交稽核。

      9、使用者可以自由地選擇是否更新軟體版本，所以會出現不同使用者同時使用不同版本的情況

　關於兩者的互動方式不同的地方，回頭令起篇幅再述……

即使兩者之間有很大的區別，即使H5有一大堆的坑和問題，但是仍舊不妨礙移動WEB無所不在，移動web是目前唯一的支援各種裝置訪問的平臺，也是唯一一個可供開發者釋出移動應用的平臺，它將各種移動互動與PC系統任務有效的結合在一起。而原生native app可以充分利用裝置的特性，這一點是它得天獨厚的優勢。所以，對於一個對於決策者來說，如果你是要做一款體驗更好的產品的話，那Native App不妨是最佳的選擇。當然如果你想盡快讓你的產品佔住一席之地的話，力求快速開發、低成本、多平臺等等的話，那技術還有很多問題都沒有很好解決的H5，也是不錯的選擇。正式因為它有複雜多變的CSS樣式消耗了大量效能，它才有一個更有競爭力的優勢——它帶來了多樣性的排版，能夠細緻到每一個字寬行高和風格的畫素級處理，能夠給你帶來不一樣的圖文匯合的排版。我想這些更是H5的優異之處吧。