探究Hybrid-APP技術原理

探究Hybrid-APP技術原理
author: @TiffanysBear

背景

隨着Web技術的發展和移動互聯網的發展，Hybrid技術已經成爲一種前端開發的主流技術方案。那什麼是Hybrid App呢？

Hybrid App（混合模式移動應用）是指介於web-app、native-app這二者之間的app，兼具" Native App良好用戶交互體驗的優點 "和" Web App跨平臺開發的優點 "。

總的來講，就是既具備APP的體驗和性能，又具備Web靈活的開發模式和跨平臺開發能力。

現有的技術方案

一、H5 + JSBridge，經過JSBridge完成H5和Native的通訊，賦予H5必定的端能力。是一種基於WebView UI的解決方案。

二、React-Native，進一步經過JSbridge將js解析爲虛擬DOM傳遞到Native，並使用原生進行渲染。

三、小程序解決方案，採用雙線程的渲染機制，將渲染層WebView和邏輯層JavaScriptCore造成獨立的模塊，經過Native進行通訊（setData），邏輯層的網絡請求也會由Native進行轉發。在UI方面，採用的是WebView和原生相結合的方式。

技術原理

本文將從jsbridge的原理、實現、雙向通訊、接入方式和H5的嵌入方式進行詳細闡述。

jsbridge的原理

客戶端能對WebView中請求進行攔截，都有相應的API：

Android:

// Android: shouldoverrideurlloading 
public boolean shouldOverrideUrlLoading(WebView view, String url){
	//讀取到url後自行進行分析處理
	
	//若是返回false，則WebView處理連接url，若是返回true，表明WebView根據程序來執行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的方式觸發相應的捕獲函數，在捕獲函數中能夠對url中的參數進行解析；此外，Android還能夠經過重寫OnJSPrompt方法，對調用Prompt進行攔截，一樣能實現通訊的目的。

示例： 調起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);
}

複製代碼

調起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;
    }
}
複製代碼

協議制定URL Scheme

URL Scheme是什麼

因爲蘋果的app都是在沙盒中，相互是不能訪問數據的。可是蘋果仍是給出了一個能夠在app之間跳轉的方法：URL Scheme。簡單的說，URL Scheme就是一個可讓app相互之間能夠跳轉的協議。每一個app的URL Scheme都是不同的，若是存在同樣的URL Scheme，那麼系統就會響應先安裝那個app的URL Scheme，由於後安裝的app的URL Scheme被覆蓋掉了，是不能被調用的。

設置URL Scheme

xxxapp://communication?args=xx

如何進行雙向通訊

雙向通訊主要是H5和Native的雙向通訊過程以及參數傳遞、回調執行。

H5通知Native：

H5通知Native的方式主要有：

• 調用prompt/console/alert，調用時進行參數傳遞，端進行攔截重寫
• URL Scheme跳轉攔截，將參數放在請求URL上，詳細的文章介紹 URL Scheme
• API掛載，經過Navtive獲取js執行環境，將相應的api掛載在js上，供h5調用

Native通知H5：

• 回調機制，在向Native傳遞信息時，將回調函數也傳遞，Native在調用完成後，使用js執行環境執行回調函數

接入方式

• jsbridge的接入，端方面的jsbridge和h5方面的jsbridge

嵌入方式

h5的嵌入方式:

• 直接代碼，直接將H5代碼css、html、js放入端目錄下，以file協議的方式訪問，優勢是訪問快速，缺點是迭代不方便。
• 線上地址，以http協議訪問，使用webview打開url形式，相較於代碼嵌入的方式來講，速度比較慢，依賴網絡傳輸速度；優勢是迭代快速