探究Hybrid-APP技術(shù)原理
author: @TiffanysBear
背景
隨著Web技術(shù)的發(fā)展和移動互聯(lián)網(wǎng)的發(fā)展骚灸，Hybrid技術(shù)已經(jīng)成為一種前端開發(fā)的主流技術(shù)方案慌植。那什么是Hybrid App呢义郑？
Hybrid App（混合模式移動應(yīng)用）是指介于web-app、native-app這兩者之間的app非驮，兼具" Native App良好用戶交互體驗的優(yōu)勢 "和" Web App跨平臺開發(fā)的優(yōu)勢 "。
總的來說芙扎，就是既具有APP的體驗和性能，又具有Web靈活的開發(fā)模式和跨平臺開發(fā)能力戒洼。
現(xiàn)有的技術(shù)方案
1允华、H5 + JSBridge，通過JSBridge完成H5和Native的通信靴寂，賦予H5一定的端能力。是一種基于WebView UI的解決方案褐隆。
2剖踊、React-Native庶弃，進一步通過JSbridge將js解析為虛擬DOM傳遞到Native，并使用原生進行渲染祥山。
3掉伏、小程序解決方案，采用雙線程的渲染機制斧散，將渲染層WebView和邏輯層JavaScriptCore形成獨立的模塊，通過Native進行通信（setData）鸡捐，邏輯層的網(wǎng)絡(luò)請求也會由Native進行轉(zhuǎn)發(fā)。在UI方面源祈，采用的是WebView和原生相結(jié)合的方式色迂。
技術(shù)原理
本文將從jsbridge的原理、實現(xiàn)歇僧、雙向通信、接入方式和H5的嵌入方式進行詳細闡述诈悍。
jsbridge的原理
客戶端能對WebView中請求進行攔截，都有相應(yīng)的API：
Android:
// Android: shouldoverrideurlloading
public boolean shouldOverrideUrlLoading(WebView view, String url){
//讀取到url后自行進行分析處理
//如果返回false适袜，則WebView處理鏈接url慕趴，如果返回true，代表WebView根據(jù)程序來執(zhí)行url
return true;
}
IOS:
// IOS: shouldStartLoadWithRequest
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
NSURL *url = [request URL];
NSString *requestString = [[request URL] absoluteString];
//獲取url scheme后自行進行處理
因此冕房，在頁面中可以通過iframe加載src的方式觸發(fā)相應(yīng)的捕獲函數(shù)，在捕獲函數(shù)中可以對url中的參數(shù)進行解析给僵；此外，Android還可以通過重寫OnJSPrompt方法帝际，對調(diào)用Prompt進行攔截，同樣能實現(xiàn)通信的目的斑粱。
示例：
調(diào)起ios端：
function iosInvoke(scheme) {
var elem = document.createElement('iframe');
var body = document.body || document.getElementsByTagName('body')[0];
elem.style.display = 'none';
elem.src = scheme;
body.appendChild(elem);
setTimeout(function () {
body.removeChild(elem);
elem = null;
}, 0);
}
調(diào)起android端：
function androidInvoke(scheme) {
var androidJsBridge = window.Bdbox_android_jsbridge;
if (androidJsBridge && androidJsBridge.dispatch) {
androidJsBridge.dispatch(scheme);
} else {
var re = window.prompt('BdboxApp:' + JSON.stringify({
obj: 'Bdbox_android_jsbridge',
func: 'dispatch',
args: [scheme]
}));
return re;
}
}
協(xié)議制定URL Scheme
URL Scheme是什么
由于蘋果的app都是在沙盒中脯爪，相互是不能訪問數(shù)據(jù)的。但是蘋果還是給出了一個可以在app之間跳轉(zhuǎn)的方法：URL Scheme痕慢。簡單的說，URL Scheme就是一個可以讓app相互之間可以跳轉(zhuǎn)的協(xié)議快骗。每個app的URL Scheme都是不一樣的塔次，如果存在一樣的URL Scheme方篮，那么系統(tǒng)就會響應(yīng)先安裝那個app的URL Scheme俺叭，因為后安裝的app的URL Scheme被覆蓋掉了泰偿，是不能被調(diào)用的。
設(shè)置URL Scheme
如何進行雙向通信
雙向通信主要是H5和Native的雙向通信過程以及參數(shù)傳遞裕照、回調(diào)執(zhí)行调塌。
H5通知Native：
H5通知Native的方式主要有：
- 調(diào)用prompt/console/alert晋南，調(diào)用時進行參數(shù)傳遞羔砾，端進行攔截重寫
- URL Scheme跳轉(zhuǎn)攔截，將參數(shù)放在請求URL上政溃，詳細的文章介紹 URL Scheme
- API掛載态秧，通過Navtive獲取js執(zhí)行環(huán)境，將相應(yīng)的api掛載在js上，供h5調(diào)用
Native通知H5：
- 回調(diào)機制愤诱，在向Native傳遞信息時，將回調(diào)函數(shù)也傳遞溃槐，Native在調(diào)用完成后科吭，使用js執(zhí)行環(huán)境執(zhí)行回調(diào)函數(shù)
接入方式
- jsbridge的接入，端方面的jsbridge和h5方面的jsbridge
嵌入方式
h5的嵌入方式:
- 直接代碼砌溺，直接將H5代碼css、html规伐、js放入端目錄下，以file協(xié)議的方式訪問鲜棠，優(yōu)點是訪問快速培慌，缺點是迭代不方便。
- 線上地址吵护，以http協(xié)議訪問，使用webview打開url形式馅而，相較于代碼嵌入的方式來說，速度比較慢雄坪，依賴網(wǎng)絡(luò)傳輸速度屯蹦；優(yōu)點是迭代快速
