HyBird App(混合應用)核心原理JSBridge

久宇詩發表於2022-03-29
APPJS

目錄

app分類

  1. Native App(原生應用)
  2. Web App(網頁應用)
  3. HyBird App(混合應用)

HyBird App(混合應用)

Hybrid利用JSBridge進行通訊
優點：隨時發版，不受應用市場稽核限制；擁有幾乎和Native一樣的能力，如：拍照、儲存、加日曆等等...

缺點：H5有的缺點他幾乎都有，比如效能差、JS執行效率低等等。

JSBridge介紹

給 JavaScript 提供呼叫 Native 功能的介面，讓混合開發中的前端部分可以方便地使用 Native 的功能,(攝像頭，地理定位...)。
讓native可以呼叫web的js程式碼，讓web可以呼叫原生的程式碼，實現雙向的訊息通訊的通道，它在做native程式碼和js程式碼相互轉換的事情。

雙向通訊的通道:
JS 向 Native 傳送訊息: 呼叫相關功能、通知 Native 當前 JS 的相關狀態等。
Native 向 JS 傳送訊息: 回溯呼叫結果、訊息推送、通知 JS 當前 Native 的狀態等。

資料間的通訊關鍵是以下兩點：
將Native端的介面封裝成js介面
將Web端js介面封裝成原生介面

總結

  • js呼叫原生程式碼
  • 原生呼叫js

優勢及應用場景

  • 因為Web端支援JavaScript，而Native(iOS/Android)端的Webview控制元件對JavaScript也有所支援，頁面載入完成後呼叫頁面的JavaScript程式碼。
  • 通過Webview可以類似於iframe把我們的頁面嵌入到原生Native中進行控制。
  • 由於Webview內嵌H5的效能/功能各種受限。於是有了各種的混合開發模式(Hybrid App)混合使用Native和Web技術解決方案，例如：Hybrid、RN、WEEX、Flutter、小程式、快應用等等。

JsBridge的核心

1、Web端呼叫Native端程式碼

  1. 攔截Url
    • URL Schema， 客戶端通過攔截webview請求來完成通訊
    • URL Schema(類URL的請求格式，如：<protocol>://<host>/<path>?<query>)
  2. 注入API
    • native向webview中的js執行環境, 注入API, 以此來完成通訊。

1.1 攔截URL Schema

當Web端要請求Native端的方法時，我們首先要自定義一個URL Schema，向Native端發起一個請求，最後在Native端的WebView進行監聽。
它類似於我們常見的url，區別在於protocol域名 和 host協議 一般是自定義的
自定義通訊的URL schema

jsbridge://<method>?<params>
jsbridge://showToast?text=hello&a=b

流程：web端傳送URL Schame請求如（jsonp）可以攜帶引數，native端進行相應處理

傳送URL schema請求
向Native端發起請求：

<script>
    function showNativeDialog(text) {
        window.alert('jsbridge://showToast?text=' + text);
    }
</script>

Native端實現監聽

 webView.setWebChromeClient(new WebChromeClient() {
        @Override
        public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
            if (!message.startsWith("jsbridge://")) {
                return super.onJsAlert(view, url, message, result);
            }

            UrlSchema urlschema = new UrlSchema(message);
            if ("showToast".equals(urlchema.getMethodName())) {
                String text = urlschema.getParams("text");
                Toast.makeText(mContext, text, Toast.LENGTH_LONG).show();
            }

            result.confirm();
            return true;
        }
    }

1.2 注入api

Native端通過 WebView 提供的介面，向 JavaScript 的 Context（window）中注入物件。
在Web中通過注入的物件呼叫Native方法。

  1. 向WebView注入JS物件
    建立一個JS物件，並實現監聽的方法
class NativeBridge{
    private Context context;

    NativeBridge(Context context){
        this.context = context;
    }

    @JavascriptInterface
    public void showNativeDialog(String text){
        Toast.makeText(context,text,Toast.LENGTH_LONG).show();
    }
}

Native端通過WebView的介面注入JS物件

webView.addJavascriptInterface(new NativeBridge(mContext),"NativeBridge");
  1. 通過注入的JS物件呼叫Native程式碼
    Web中獲取JS物件，呼叫Native程式碼
<script>
    function showNativeDialog(text) {
        //window.alert('jsbridge://showToast?text=' + text);
        window.NativeBridge.showNativeDialog(text);
    }
</script>

2、Native端呼叫Web端程式碼

WebView是Native中載入網頁的一個控制元件，該元件提供一個evaluateJavascript()方法執行JS程式碼。我們要做的是在Native端執行一個js方法，在Web端進行監聽

Native端
Android

mWebView.evaluateJavascript("window.showWebDialog('123')", new ValueCallback() {
        @Override
        public void onReceiveValue(String value) {
            //這裡的value即為對應JS方法的返回值
        }
});

H5端

<script>
    window.showWebDialog = text => window.alert(text);
</script>

相關文章