JSBridge原理解析—以WebviewJavascriptBridge實現方式為例
一、什么是 JSBridge？
JSBridge 是一種 webview 側和 native 側進行通信的手段，webview 可以通過 jsb 調用 native 的能力，native 也可以通過 jsb 在 webview 上執(zhí)行一些邏輯。
二、JSB 的實現方式
在比較流行的 JSBridge 中，主要是通過攔截 URL 請求來達到 native 端和 webview 端相互通信的效果的。
這里我們以比較火的 WebviewJavascriptBridge 為例，來解析一下它的實現方式。
源碼地址：https://github.com/marcuswestin/WebViewJavascriptBridge
2-1、在 native 端和 webview 端注冊 Bridge
注冊的時候，需要在 webview 側和 native 側分別注冊 bridge，其實就是用一個對象把所有函數儲存起來。
function registerHandler(handlerName, handler) {
messageHandlers[handlerName] = handler;
}
- (void)registerHandler:(NSString *)handlerName handler:(WVJBHandler)handler {
_base.messageHandlers[handlerName] = [handler copy];
}
2-2、在 webview 里面注入初始化代碼
function setupWebViewJavascriptBridge(callback) {
if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
window.WVJBCallbacks = [callback];
var WVJBIframe = document.createElement('iframe');
WVJBIframe.style.display = 'none';
WVJBIframe.src = 'https://__bridge_loaded__';
document.documentElement.appendChild(WVJBIframe);
setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
}
這段代碼主要做了以下幾件事：
（1）創(chuàng)建一個名為 WVJBCallbacks 的數組，將傳入的 callback 參數放到數組內
（2）創(chuàng)建一個 iframe，設置不可見，設置 src 為https://__bridge_loaded__
（3）設置定時器移除這個 iframe
2-3、在 native 端監(jiān)聽 URL 請求
iOS 中有兩種 webview，一種是 UIWebview，另一種是 WKWebview，這里以 WKWebview 為例：
- (void)webView:(WKWebView *)webView decidePolicyForNavigationResponse:(WKNavigationResponse *)navigationResponse decisionHandler:(void (^)(WKNavigationResponsePolicy))decisionHandler {
if (webView != _webView) { return; }
__strong typeof(_webViewDelegate) strongDelegate = _webViewDelegate;
if (strongDelegate && [strongDelegate respondsToSelector:@selector(webView:decidePolicyForNavigationResponse:decisionHandler:)]) {
[strongDelegate webView:webView decidePolicyForNavigationResponse:navigationResponse decisionHandler:decisionHandler];
}
else {
decisionHandler(WKNavigationResponsePolicyAllow);
}
}
這段代碼主要做了以下幾件事：
（1）攔截了所有的 URL 請求并拿到 url
（2）首先判斷isWebViewJavascriptBridgeURL，判斷這個 url 是不是 webview 的 iframe 觸發(fā)的，具體可以通過 host 去判斷。
（3）繼續(xù)判斷，如果是isBridgeLoadedURL，那么會執(zhí)行injectJavascriptFile方法，會向 webview 中再次注入一些邏輯，其中最重要的邏輯就是，在 window 對象上掛載一些全局變量和WebViewJavascriptBridge屬性，具體值如下：
window.WebViewJavascriptBridge = {
registerHandler: registerHandler,
callHandler: callHandler,
disableJavscriptAlertBoxSafetyTimeout: disableJavscriptAlertBoxSafetyTimeout,
_fetchQueue: _fetchQueue,
_handleMessageFromObjC: _handleMessageFromObjC
};
var sendMessageQueue = [];
var messageHandlers = {};
var responseCallbacks = {};
var uniqueId = 1;
（4）繼續(xù)判斷，如果是 isQueueMessageURL，那么這就是個處理消息的回調，需要執(zhí)行一些消息處理的方法（第四步會詳細講）
2-4、webview 調用 native 能力
當 native 和 webview 都注冊好了 Bridge 之后，雙方就可以互相調用了，這里先介紹 webview 調用 native 能力的過程。
2-4-1、webview 側 callHandler
當 webview 調用 native 時，會調用 callHandler 方法，這個方法具體邏輯如下：
bridge.callHandler('ObjC Echo', {'key':'value'}, function responseCallback(responseData) {
console.log("JS received response:", responseData)
})
function callHandler(handlerName, data, responseCallback) {
if (arguments.length == 2 && typeof data == 'function') {
responseCallback = data;
data = null;
}
_doSend({ handlerName:handlerName, data:data }, responseCallback);
}
function _doSend(message, responseCallback) {
if (responseCallback) {
var callbackId = 'cb_'+(uniqueId++)+'_'+new Date().getTime();
responseCallbacks[callbackId] = responseCallback;
message['callbackId'] = callbackId;
}
sendMessageQueue.push(message);
messagingIframe.src = CUSTOM_PROTOCOL_SCHEME + '://' + QUEUE_HAS_MESSAGE;
}
實際上就是先生成一個 message，然后 push 到 sendMessageQueue 里，然后更改 iframe 的 src。
2-4-2、native 側 flushMessageQueue
然后，當 native 端檢測到 iframe src 的變化時，會走到 isQueueMessageURL 的判斷邏輯，然后執(zhí)行 WKFlushMessageQueue 函數，獲取到 JS 側的 sendMessageQueue 中的所有 message。
- (void)WKFlushMessageQueue {
[_webView evaluateJavaScript:[_base webViewJavascriptFetchQueyCommand] completionHandler:^(NSString* result, NSError* error) {
if (error != nil) {
NSLog(@"WebViewJavascriptBridge: WARNING: Error when trying to fetch data from WKWebView: %@", error);
}
[_base flushMessageQueue:result];
}];
}
- (void)flushMessageQueue:(NSString *)messageQueueString{
if (messageQueueString == nil || messageQueueString.length == 0) {
NSLog(@"WebViewJavascriptBridge: WARNING: ObjC got nil while fetching the message queue JSON from webview. This can happen if the WebViewJavascriptBridge JS is not currently present in the webview, e.g if the webview just loaded a new page.");
return;
}
id messages = [self _deserializeMessageJSON:messageQueueString];
for (WVJBMessage* message in messages) {
if (![message isKindOfClass:[WVJBMessage class]]) {
NSLog(@"WebViewJavascriptBridge: WARNING: Invalid %@ received: %@", [message class], message);
continue;
}
[self _log:@"RCVD" json:message];
NSString* responseId = message[@"responseId"];
if (responseId) {
WVJBResponseCallback responseCallback = _responseCallbacks[responseId];
responseCallback(message[@"responseData"]);
[self.responseCallbacks removeObjectForKey:responseId];
} else {
WVJBResponseCallback responseCallback = NULL;
NSString* callbackId = message[@"callbackId"];
if (callbackId) {
responseCallback = ^(id responseData) {
if (responseData == nil) {
responseData = [NSNull null];
}
WVJBMessage* msg = @{ @"responseId":callbackId, @"responseData":responseData };
[self _queueMessage:msg];
};
} else {
responseCallback = ^(id ignoreResponseData) {
// Do nothing
};
}
WVJBHandler handler = self.messageHandlers[message[@"handlerName"]];
if (!handler) {
NSLog(@"WVJBNoHandlerException, No handler for message from JS: %@", message);
continue;
}
handler(message[@"data"], responseCallback);
}
}
}
當一個 message 結構存在 responseId 的時候說明這個 message 是執(zhí)行 bridge 后傳回的。取不到 responseId 說明是第一次調用 bridge 傳過來的，這個時候會生成一個返回給調用方的 message，其 reponseId 是傳過來的 message 的 callbackId，當 native 執(zhí)行 responseCallback 時，會觸發(fā)_dispatchMessage 方法執(zhí)行 webview 環(huán)境的的 js 邏輯，將生成的包含 responseId 的 message 返回給 webview。
2-4-3、webview 側 handleMessageFromObjC
function _handleMessageFromObjC(messageJSON) {
_dispatchMessageFromObjC(messageJSON);
}
function _dispatchMessageFromObjC(messageJSON) {
if (dispatchMessagesWithTimeoutSafety) {
setTimeout(_doDispatchMessageFromObjC);
} else {
_doDispatchMessageFromObjC();
}
function _doDispatchMessageFromObjC() {
var message = JSON.parse(messageJSON);
var messageHandler;
var responseCallback;
if (message.responseId) {
responseCallback = responseCallbacks[message.responseId];
if (!responseCallback) {
return;
}
responseCallback(message.responseData);
delete responseCallbacks[message.responseId];
} else {
if (message.callbackId) {
var callbackResponseId = message.callbackId;
responseCallback = function(responseData) {
_doSend({ handlerName:message.handlerName, responseId:callbackResponseId, responseData:responseData });
};
}
var handler = messageHandlers[message.handlerName];
if (!handler) {
console.log("WebViewJavascriptBridge: WARNING: no handler for message from ObjC:", message);
} else {
handler(message.data, responseCallback);
}
}
}
}
如果從 native 獲取到的 message 中有 responseId，說明這個 message 是 JS 調 Native 之后回調接收的 message，所以從一開始 sendData 中添加的 responseCallbacks 中根據 responseId（一開始存的時候是用的 callbackId，兩個值是相同的）取出這個回調函數并執(zhí)行，這樣就完成了一次 JS 調用 Native 的流程。
2-4-4、過程總結
過程如下圖
1、native 端注冊 jsb
2、webview 側創(chuàng)建 iframe，設置 src 為__bridge_load__
3、native 端捕獲請求，注入 jsb 初始化代碼，在 window 上掛載相關對象和方法
4、webview 側調用callHandler方法，并在responseCallback上添加callbackId: responseCallback，并修改 iframe 的 src，觸發(fā)捕獲
5、native 收到 message，生成一個responseCallback，并執(zhí)行 native 側注冊好的方法
6、native 執(zhí)行完畢后，通過 webview 執(zhí)行_handleMessageFromObjC方法，取出 callback 函數，并執(zhí)行
2-5、native 調用 webview 能力
native 調用 webview 注冊的 jsb 的邏輯是相似的，不過就不是通過觸發(fā) iframe 的 src 觸發(fā)執(zhí)行的了，因為 Native 可以自己主動調用 JS 側的方法。其具體過程如下圖：
1、native 側調用callHandler方法，并在responseCallback上添加callbackId: responseCallback
2、native 側主動調用_handleMessageFromObjC方法，在 webview 中執(zhí)行對應的邏輯
3、webview 側執(zhí)行結束后，生成帶有responseId的 message，添加到sendMessageQueue中，并修改 iframe 的 src 為__wvjb_queue_message__
4、native 端攔截到 url 變化，調用 webview 的邏輯獲取到 message，拿到responseId，并執(zhí)行對應的 callback 函數
