hybrid app是什麼?css
這裏咱們先看一下詞條上的定義html
Hybrid App:Hybrid App is a mobile application that is coded in both browser-supported language and computer language. They are available through application distribution platforms such as the Apple App Store, Google Play etc. Usually, they are downloaded from the platform to a target device, such as iPhone, Android phone or Windows Phone. The subscribers need to install to run them.前端
翻譯過來的意思是web
一、明確主體是一款mobile app(即手機App)apache
二、使用瀏覽器支持及計算機語言編碼瀏覽器
三、能夠發佈在各個手機平臺的應用商店裏app
四、可安裝運行框架
這裏我我的的理解是首先它是一款App,做爲一款App應該有的功能就是能夠發佈和安裝運行,也就是上面👆的3和4,而它的組成是計算機編碼。ionic
其次再理解字面意思,hybrid的意思是混合,與之相對應的是native app和web app,native的意思是原生,web的意思是網頁,而hybrid的意思天然是要兼顧兩者之長,舉個栗子就像油電混合動力的汽車同樣。web app的好處是兼容性比較好,native app的好處是性能和用戶體驗性比較好,而hybrid app要兼容這二者,但目前對於hybrid app開發來說這是個對立與統一的命題。ide
實現模式
native app構建一個全屏化的web瀏覽器,進入app默認打開主頁
用戶界面渲染構建採用web app模式,即瀏覽器支持語言 html + css + js編碼構建界面
發佈構建採用native app模式,只是不一樣於原生模式的是引入的是通過自動化構建工具封裝的資源文件(通常在www文件夾下)
native app與web app的通訊方式是經過JSAPI模式進行回調,好比Cordova、JSBridge以及其餘框架下封裝的方式,但這個過程是大同小異的,這裏列舉Cordova的通訊模式圖
從體驗上來說,hybrid確定比不上native的,native具有與生俱來的性能優點,但開發成本比較大,對於一個須要快速迭代成型而且佔領市場的產品來講native開發顯得不太合適,而hybrid擁有在成本控制上的優點,雖然媲美不上native,但卻擁有比較接近native的體驗,這是個比較折中的方案選擇,但對於產品長期生存來說,不斷提高用戶體驗纔是最好的選擇。
分工合做
正如上面實現模式所講的,native原則上是爲web開發提供了一套宿主環境,而這個宿主環境本質上是一個基於H5的webkit內核的native瀏覽器,並且這個瀏覽器提供了調用native方式的接口,至關於native開發爲前端開發提供了系統級的API,所以從前端的角度看過去就是本身很熟悉的接口調用,只是不一樣的是這些系統級的API不是傳統的HTTP請求,而是在寄生在這個瀏覽器的公共變量裏,好比window對象。
目前工做上用到的通訊方式是Cordova,Cordova整理的資源以下:
官網:https://cordova.apache.org/docs/en/8.x/guide/overview/index.html
GitHub資源:https://ionicframework.com/docs/native/(這個資源要看GitHub地址上的文檔說明)