Interaction between web and APP -- WebView JavaScript Bridge

In the actual project, we often encounter the situation that the web page is embedded in the app (Hybrid), which requires the interaction between the web page and the native app, such as obtaining the current user information. A simple way to do this is through the url parameter, but this way is extremely rigid, so there is jsbridge.
This article aims to record the implementation of WebView JavaScript bridge. If there is any error, please correct it! If you need to understand the jsbridge principle, please google.

Demand:

/**
 *Function Description: js calls webview event
 *
 * jsBridge.callHandler(method, data, callBack(response));
 *@ param method {string} method name
 *@ param data {Object} parameter
 *@ return {Object} callback
 */

/**
 *Function Description: webView calls JS event
 *
 * jsBridge.registerHandler(method, callBack(response));
 *@ param method {string} method name
 *@ return {Object} callback
 */
const JsBridge = {
    init: function (callback) {
        const u = navigator.userAgent;
        const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //Judge mobile system
        if (!isiOS) {  //ios
            if (window.WebViewJavascriptBridge) {
                callback(WebViewJavascriptBridge)
            } else {
                //    Register event, called when WebView JavaScript bridge load is complete
                document.addEventListener(
                    'WebViewJavascriptBridgeReady',
                    function () {
                        callback(WebViewJavascriptBridge)
                    },
                    false
                );
            }
        } else { //Android
            //    If there is a WebView JavaScript bridge, call back is returned directly
            if (window.WebViewJavascriptBridge) {
                return callback(WebViewJavascriptBridge);
            }
            //    If there are WVJBCallbacks, inject events into WVJBCallbacks
            if (window.WVJBCallbacks) {
                return window.WVJBCallbacks.push(callback);
            }
            //    Otherwise, create WVJBCallbacks
            window.WVJBCallbacks = [callback];
            const WVJBIframe = document.createElement('iframe');
            WVJBIframe.style.display = 'none';
            WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
            document.documentElement.appendChild(WVJBIframe);
            setTimeout(function () {
                document.documentElement.removeChild(WVJBIframe)
            }, 0)
        }
    },

    first: function () {
        const u = navigator.userAgent;
        const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
        if (!isiOS) {
            const _this = this;
            _this.init(function (bridge) {
                bridge.init(function (message, responseCallback) {
                    responseCallback(data);
                })
            })
        }
    },

    registerHandler: function (name, fun) {
        const _this = this;
        _this.init(function (bridge) {
            bridge.registerHandler(name, fun);
        })
    },

    callHandler: function (name, data, fun) {
        const _this = this;
        _this.init(function (bridge) {
            bridge.callHandler(name, data, fun);
        })
    }
}

// Initialization
JsBridge.first();

Tags: Javascript Mac OS X Google

Posted on Tue, 03 Dec 2019 12:07:18 -0500 by Mirrorball