Library for Hybrid

为什么需要 JavaScript Lib？

Android 可以直接向 Webview 中注入 JavaScript 对象，但是该对象仅直接纯函数调用，同时在 4.2 版本以下存在安全漏洞。

iOS 则无法注入任何 JavaScript 对象。

于是面向业务需要一套 SDK 能够：

• 安全地实现与 Native 的双向通信；
• 屏蔽 Android 与 iOS 的差异；
• 提供友好的 API 输出

为什么不使用 WebViewJavascriptBridge？

• 仅针对 iOS；
• 通信数据格式太 RAW；
• 接口不友好；
• 未考虑一些意外情况

通信原理（Principle of Communication）

Android 端使用 prompt 方式。这是一个不常用的 BOM 方法，可以被 Native 代码选择性捕获。其唯一参数为字符串类型，用以承载通信数据。

window.prompt('{"message": "I am Yanni4night"}');

iOS 端无法通过调用任何方法来直接与 Native 端通信，但可以通过 Frame 元素的请求来被 Native 端选择性捕获。可以通过 Frame 的 URL 携带通信数据。

var iframe = document.createElement('iframe');
iframe.src = "scheme://data?p=%7B%22message%22%3A%22I%20am%20Yanni4night%22%7D";

为规避 URL 可能存在的长度限制，一般仅利用它通知 Native，再由 Native 来抓取数据。

消息(Message)

消息是由消息类型、请求数据、响应数据、callback ID等构成的纯 JavaScript 对象。

{
  messageType:
  inputData:
  outputData:
    errNo:
    errMsg:
    data:
  callbackId:
}

消息的流转全部通过一个发送队列和一个接收队列。

这里仿照 TCP 的 ACK 包，要求每一个请求消息都必须有 callback 回复确认。

时序图(Sequence)

Native 向 Webview 发送请求

Webview 向 Native 发送请求（Android）

Webview 向 Native 发送请求（iOS）

模型(Model)

指令(command/cmd)

API 的命名空间，Native/Webview 意义相同，不公用。

方法(method)

API 的方法名，Native/Webview 意义相同，不公用。

异步回调

允许被调用方以异步的方式响应请求，这可能会受到调用方超时时间的限制。

安装(Install)

直接源码构建：

$ npm install
$ make

或者通过 NPM：

npm install --save nwbridge

用法(Usage)

调用 NWBridge 构造函数。

new NWBridge('__tb_js_bridge', 'JsBridge', 'schema://', hybridInitialData)

上面的代码会在全局挂在两个变量，__tb_js_bridge 和 JsBridge，相同变量名重复构造无效。

如果你是通过 NPM 安装，那么你可能需要：

import NWBridge from 'nwbridge'

应用开发接口(Webview API)

以下所有 API 都挂在同一变量下，命名允许配置，由 Webview 业务端代码（Js）调用。为简便起见，这里以 JsBridge 为例。注意 JsBridge 对象不一定存在。

readyState 属性

该属性指示访问 Native 的能力状态，可能有三个取值：pending、complete、error。只有当该值为 complete 时以下方法才存在。

alert(JsBridge.readyState)

JsBridge.call('dialog', 'confirm', {msg: 'R u sure?'}, 3000)
  .then(function (yes) {});

JsBridge.register('location', 'search',
  function(){
    return location.search;
  }, false);

JsBridge.register('location', 'search',
  function(cb){
    cb(location.search);
  }, true);

__js_bridge.send('{"messageType": "request"}')

__js_bridge.fetch()

document.addEventListener('JsBridgeReady', function(e){
  e.jsBridge.readyState
}.false);