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");

2. 通過注入的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>