【技術】Hybird App中原生頁面 VS H5頁面

導讀：Web App和原生app有很多大牛們都做過比較詳細的比較以及優劣勢分析，作者主要對Hybrid App來簡要分析下，談談Hybrid App裡原生頁面和H5頁面的比較和分析。

來源/網絡；導讀/庖丁技術

現有3類主流APP，分別為：Web App、Hybrid App（混合模式移動應用，Hybrid有「混合的」意思）、 Native App（原生app，後面都用「原生app」來描述）。Web App和原生app有很多大牛們都做過比較詳細的比較以及優劣勢分析，我主要對Hybrid App來簡要分析下，談談Hybrid App裡原生頁面和H5頁面的比較和分析。

Hybrid APP指的是半原生半Web的混合類App。需要下載安裝，看上去類似Native App，但只有很少的UI Web View，訪問的內容是 Web 。

現在不少app已經使用H5頁面來代替原生頁面（即Hybrid APP），兩種方式具有不同的用戶體驗。剛好最近遇到公司想用H5頁面來代替原生頁面，了解了下，並把所有的問題以及知識點都記錄下來。

原生頁面和H5頁面的優劣勢分析

其各自的優劣勢也有很多前輩都已經總結過了，我稍微記錄並歸納下（本文中的相對/相比較都是針對這兩種方式而言的）。

原生頁面

優勢：

（1）運行速度比較快

（2）能使用設備的底層功能，如攝像頭、方向傳感器、重力傳感器、撥號、GPS、語音、簡訊、藍牙等

（3）在界面設計、功能模塊、操作邏輯等層面相較web更易做到App的便捷性和舒適性，功能更加強大

（4）節省流量

劣勢：

（1）不同的作業系統（如Android和iOS）需要獨立的進行開發，使用其各自的開發包、開發工具和控制項

（2）每次有更新，都需要重新打包一次發布到應用平臺上，且每次要向各個應用商店進行提交審核。之後用戶需要手動進行點擊更新安裝（安裝成本較高）

（3）開發成本比較高，尤其需要適配各種機型時（如Android應用，需要適配各種Android手機）

H5頁面

優勢：

（1）由於是運行在瀏覽器上，所以只需要開發一次便可以在不同的作業系統上顯示

（2）迭代版本時，不需要打包便可以發布（實時更新、快速迭代），與雲端實現實時數據交互

（3）開發成本相對較低，對瀏覽器的適配較簡單，且發布門檻相對較低

劣勢：

（1）每次打開頁面，都得重新加載，獲取數據...

（2）過於依賴網絡，速度無法保證。特別在弱網環境下，不僅耗費流量而且加載緩慢，就算是WiFi情況下也不容樂觀

（3）只能使用有限的設備底層功能（無法使用攝像頭、方向傳感器、重力傳感器、撥號、GPS、語音、簡訊、藍牙等功能）

（4）仍處於發展階段，部分功能無法在基於現有技術的瀏覽器基礎上實現，且無法全面的顯示最完美的用戶體驗，只能用現有技術去彌去找最佳解決方案

如何區分Hybrid APP中的原生頁面和H5頁面

一直在想一個問題，原生頁面和H5頁面到底是憑啥區分的？看了網上很多大牛是從頁面的設計上來區分的。如：（1）頂部顯示網頁連結；（2）有加載的進度條；（3）沒有底部tab導航欄；（4）頂部顯示兩個導航條；（5）有懸浮圓圈/標識；等可以區別出H5頁面的幾種方式。
然而現在越來越多的應用開始弱化這些表象。【Hybrid App裡面一般（1）、（2）、（4）點已經被弱化，除了微信（等..），用的還是加載進度條（微信的加載進度條簡直要逼瘋我的節奏，特別是網速特別慢的情況下，就眼睜睜看著他到不了盡頭）】

附上微信的進度條....（已醉）

下面，以淘寶為例，給大家看看...真的是怎麼都識別不出來啊！！

由上圖得知，是否有懸浮圓圈/標識無法區別出H5頁面

由上圖得知，是否有底部tab導航欄也無法區別出H5頁面。

問了公司的程式設計師，結果還是一頭霧水，只有灰溜溜的去尋求度娘的幫助，果然找到了。

設置-開發者選項-顯示布局邊界

H5中使用了webview控制項，其作為一個控制項，只有一個邊界框，所以通過這一點，就比較容易區分出一個界面是webview實現的還是原生布局控制項實現的，當然也不排除用一堆webview來拼成一個界面的實現方法。

如下圖是一個原生與webview混排的界面，紅色線框是各控制項的繪製邊界，中間那一大塊布局豐富的界面沒有顯示出很多邊界紅色，就是H5實現的。

原生頁面還是H5頁面？對這兩種開發模式分別進行比較，分別得出幾種各自適用的場景
選擇原生頁面的幾點理由：

1.使用定位功能

如果需要用到GPS定位功能，以前只能使用原生的API來查看用戶的位置信息，但現在大多數的主流瀏覽器上都嵌入了W3C Geolocation API。安裝了WebKit的設備或是配置了Opera或Mozilla瀏覽器的設備，均可以獲取用戶的位置信息。這在技術上已經沒有太大的困難，然而卻受到隱私保護條例的限制。加入定位功能，意味著給網站引入了一些敏感信息，可能會導致嚴重的後果。而原生app的位置信息必須經過用戶授權，排除了隱患。

2.使用攝像頭

如果需要用到攝像頭功能，原生開發者能夠簡化拍照的過程，直接在客戶端對照片做一些處理，只有需要的時候才上傳伺服器。W3C正在開發一個訪問攝像頭的API，但現在還沒有將這部分工作正式整合到瀏覽器中。

3.使用感應器（方向傳感器、重力傳感器等）

4.訪問文件系統

訪問文件系統常會涉及到安全和用戶隱私保護的問題。惡意應用程式可能會修改或刪除你的數據。行動裝置越來越私人化，在行動裝置上保存了大量用戶的個人信息、朋友信息及商業信息，保存在本地的數據更加安全且可以為用戶提供更加有針對性的服務，這要求開發者須獲得用戶的授權後才能訪問用戶的私人數據。則原生app更容易做到這點。

訪問文件系統時至關重要的一點就是在沒有獲得用戶授權的情況下，不要訪問任何用戶的私人數據。而這一點，往往被大多數應用忽略了。W3C正在為移動開發商開發相關的標準API，但目前該工作尚未完成。

5.提供離線服務

使用原生頁面可以將數據保存在本地並進行讀取，可以實現離線服務，在無網或弱網情況下，更深得用戶喜愛。

選擇H5頁面的幾點理由：

1.功能開發不完善，試運營階段（試錯成本低），快速收集用戶反饋信息及時更新

2.應用須適應多個作業系統，且資源/預算有限制

3.技術強，能夠極力解決由網速引起的頁面不順暢問題

4.不滿足原生app條件之一，且能做到第三點的完善，並隨著越來越豐富的功能接口可供開發者調用，web app比原生app更合適

5.非核心需求，在功能調整或內容的運營上很靈活

6.階段性的營銷活動，希望被分享出去

總結

我覺得混搭使用這兩種開發模式是最符合當下web技術發展以及app的發展背景的，像淘寶就把原生頁面和H5頁面融合的天衣無縫，也儘可能的用技術解決了H5頁面的劣勢問題。當然，各企業需要根據自身的條件以及戰略來選擇適合自己的開發模式，合理配置資源。

【聲明】庖丁技術尊重行業規範，非原創文章均註明原文作者和來源，所轉載的文章版權均屬於原作者。如有侵權請及時聯繫刪除。