探究Hybrid-APP技術原理

Tiffany的小熊發表於2019-07-15
APP

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

背景

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

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

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

現有的技術方案

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

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

3、小程式解決方案，採用雙執行緒的渲染機制，將渲染層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形式，相較於程式碼嵌入的方式來說，速度比較慢，依賴網路傳輸速度；優點是迭代快速

相關文章