JSBridge原理解析——以WebviewJavascriptBridge實現(xiàn)方式為例
一、什么是 JSBridge？
JSBridge 是一種 webview 側(cè)和 native 側(cè)進行通信的手段，webview 可以通過 jsb 調(diào)用 native 的能力，native 也可以通過 jsb 在 webview 上執(zhí)行一些邏輯。
二、JSB 的實現(xiàn)方式
在比較流行的 JSBridge 中，主要是通過攔截 URL 請求來達到 native 端和 webview 端相互通信的效果的。
這里我們以比較火的 WebviewJavascriptBridge 為例，來解析一下它的實現(xiàn)方式。
源碼地址：https://github.com/marcuswestin/WebViewJavascriptBridge
2-1、在 native 端和 webview 端注冊 Bridge
注冊的時候，需要在 webview 側(cè)和 native 側(cè)分別注冊 bridge，其實就是用一個對象把所有函數(shù)儲存起來。
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 的數(shù)組，將傳入的 callback 參數(shù)放到數(shù)組內(nèi)
（2）創(chuàng)建一個 iframe，設(shè)置不可見，設(shè)置 src 為https://__bridge_loaded__
（3）設(shè)置定時器移除這個 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，那么這就是個處理消息的回調(diào)，需要執(zhí)行一些消息處理的方法（第四步會詳細講）
2-4、webview 調(diào)用 native 能力
當(dāng) native 和 webview 都注冊好了 Bridge 之后，雙方就可以互相調(diào)用了，這里先介紹 webview 調(diào)用 native 能力的過程。
2-4-1、webview 側(cè) callHandler
當(dāng) webview 調(diào)用 native 時，會調(diào)用 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 側(cè) flushMessageQueue
然后，當(dāng) native 端檢測到 iframe src 的變化時，會走到 isQueueMessageURL 的判斷邏輯，然后執(zhí)行 WKFlushMessageQueue 函數(shù)，獲取到 JS 側(cè)的 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);
}
}
}
當(dāng)一個 message 結(jié)構(gòu)存在 responseId 的時候說明這個 message 是執(zhí)行 bridge 后傳回的。取不到 responseId 說明是第一次調(diào)用 bridge 傳過來的，這個時候會生成一個返回給調(diào)用方的 message，其 reponseId 是傳過來的 message 的 callbackId，當(dāng) native 執(zhí)行 responseCallback 時，會觸發(fā)_dispatchMessage 方法執(zhí)行 webview 環(huán)境的的 js 邏輯，將生成的包含 responseId 的 message 返回給 webview。
2-4-3、webview 側(cè) 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 調(diào) Native 之后回調(diào)接收的 message，所以從一開始 sendData 中添加的 responseCallbacks 中根據(jù) responseId（一開始存的時候是用的 callbackId，兩個值是相同的）取出這個回調(diào)函數(shù)并執(zhí)行，這樣就完成了一次 JS 調(diào)用 Native 的流程。
2-4-4、過程總結(jié)
過程如下圖
1、native 端注冊 jsb
2、webview 側(cè)創(chuàng)建 iframe，設(shè)置 src 為__bridge_load__
3、native 端捕獲請求，注入 jsb 初始化代碼，在 window 上掛載相關(guān)對象和方法
4、webview 側(cè)調(diào)用callHandler方法，并在responseCallback上添加callbackId: responseCallback，并修改 iframe 的 src，觸發(fā)捕獲
5、native 收到 message，生成一個responseCallback，并執(zhí)行 native 側(cè)注冊好的方法
6、native 執(zhí)行完畢后，通過 webview 執(zhí)行_handleMessageFromObjC方法，取出 callback 函數(shù)，并執(zhí)行
2-5、native 調(diào)用 webview 能力
native 調(diào)用 webview 注冊的 jsb 的邏輯是相似的，不過就不是通過觸發(fā) iframe 的 src 觸發(fā)執(zhí)行的了，因為 Native 可以自己主動調(diào)用 JS 側(cè)的方法。其具體過程如下圖：
1、native 側(cè)調(diào)用callHandler方法，并在responseCallback上添加callbackId: responseCallback
2、native 側(cè)主動調(diào)用_handleMessageFromObjC方法，在 webview 中執(zhí)行對應(yīng)的邏輯
3、webview 側(cè)執(zhí)行結(jié)束后，生成帶有responseId的 message，添加到sendMessageQueue中，并修改 iframe 的 src 為__wvjb_queue_message__
4、native 端攔截到 url 變化，調(diào)用 webview 的邏輯獲取到 message，拿到responseId，并執(zhí)行對應(yīng)的 callback 函數(shù)
以上便是本次分享的全部內(nèi)容，希望對你有所幫助^_^
喜歡的話別忘了 分享、點贊、收藏 三連哦~。
歡迎關(guān)注公眾號 前端Sharing