通用jsbridge封裝

/**
 * 用法：
 * import jsBridge from 'fileName.js'
 * 
 * 1、給 APP 端發送數據
 * jsBridge.callHandler(eventName, data, callback(reponseData))
 * 參數說明：
 * eventName (string): 必傳, 與 APP 端約定的事件名
 * data (object): 非必傳, 發送給 APP 端的數據
 * callback (function): 通信完成後，前端的回調，reponseData，是APP端返回的數據
 * 
 * 2、接收 APP 端的數據
 * jsBridge.registerHandler(eventName, callback(data, responseCallback))
 * 參數說明：
 * eventName (string): 必傳，與 APP 端約定的事件名
 * callback (function): data: 是接收到的數據，responseCallback，通信完成後，傳給 APP 端的回調
 */

const isAndroid = navigator.userAgent.indexOf('Android') > -1 || navigator.userAgent.indexOf('Adr') > -1;
const isiOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);

//這是必須要寫的，用來創建一些設置
function setupWebViewJavascriptBridge(callback) {
  if (isAndroid) {
    if (window.WebViewJavascriptBridge) {
      callback(WebViewJavascriptBridge)
    } else {
      document.addEventListener(
        'WebViewJavascriptBridgeReady',
        function () {
          callback(WebViewJavascriptBridge)
        },
        false
      );
    }
  }
  if (isiOS) {
    if (window.WebViewJavascriptBridge) {
      return callback(WebViewJavascriptBridge);
    }
    if (window.WVJBCallbacks) {
      return window.WVJBCallbacks.push(callback);
    }
    window.WVJBCallbacks = [callback];
    let WVJBIframe = document.createElement('iframe');
    WVJBIframe.style.display = 'none';
    WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
    document.documentElement.appendChild(WVJBIframe);
    setTimeout(function () {
      document.documentElement.removeChild(WVJBIframe)
    }, 0);
  }
}
setupWebViewJavascriptBridge(function (bridge) {
  if (isAndroid) {
    //安卓端，接收數據時，需要先進行初始化
    bridge.init(function (message, responseCallback) {
      const data = {
        'Javascript Responds': 'Wee!'
      };
      responseCallback(data);
    })
  }
})

export default {
  // 給APP發送數據
  callHandler(name, data, callback) {
    setupWebViewJavascriptBridge(function (bridge) {
      bridge.callHandler(name, data, callback)
    })
  },
  // 接收APP端的數據
  registerHandler(name, callback) {
    setupWebViewJavascriptBridge(function (bridge) {
      bridge.registerHandler(name, function (data, responseCallback) {
        callback(data, responseCallback)
      })
    })
  }
}