WebViewJavascriptBridge源碼解讀

介紹

在App開發中，會遇到不少和H5交互的問題，雙方之間須要能互相調用方法，並接收回調，WebViewJavascriptBridge是一個很不錯的選擇，它只須要經過在JS中注入少許代碼，就能夠實現上面的操做。下面，就讓咱們一塊兒來看看它是如何使用的吧。

用法

App中先初始化WebViewJavascriptBridge：

self.bridge = WebViewJavascriptBridge(bridgeForWebView:webView)
複製代碼

App中註冊事件、調用JS中的事件：

self.bridge.registerHandler("ObjC Echo", handler: { data, responseCallback) in
	NSLog(@"ObjC Echo called with: %@", data)
	responseCallback(data)
})

self.bridge.callHandler("JS Echo", data:nil responseCallback: { responseData in
	NSLog(@"ObjC received response: %@", responseData)
})
複製代碼

JS中放入如下固定方法：

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)
}
複製代碼

JS中註冊事件、調用App中的事件：

setupWebViewJavascriptBridge(function(bridge) {
	
	/* Initialize your app here */

	bridge.registerHandler('JS Echo', function(data, responseCallback) {
		console.log("JS Echo called with:", data)
		responseCallback(data)
	})
	bridge.callHandler('ObjC Echo', {'key':'value'}, function responseCallback(responseData) {
		console.log("JS received response:", responseData)
	})
})
複製代碼

流程

知道如何使用以後，讓咱們來了解一下它運行的基本流程。主要能夠分爲三個部分：初始化、App調用H5，JS調用H5。

初始化

App發送消息到H5

H5發送消息到App

源碼

下面讓咱們仔細來分析它的源碼實現。

WebViewJavascriptBridgeBase

#define kOldProtocolScheme @"wvjbscheme"
#define kNewProtocolScheme @"https"
#define kQueueHasMessage   @"__wvjb_queue_message__" //表示有H5調用App的事件待處理
#define kBridgeLoaded      @"__bridge_loaded__"

var id <WebViewJavascriptBridgeBaseDelegate> delegate
var startupMessageQueue: []
var responseCallbacks: [:]
var messageHandlers: [:]
var messageHandler: WVJBHandler

func enableLogging()
func setLogMaxLength(length: Int)
func reset()
func sendData(data: Any, responseCallback: WVJBResponseCallback, handlerName: String)
func flushMessageQueue(messageQueueString: String)
func injectJavascriptFile()
func isWebViewJavascriptBridgeURL(url: URL) -> Bool
func isQueueMessageURL(url: URL) -> Bool
func isBridgeLoadedURL(url: URL) -> Bool
func logUnkownMessage(url: URL)
func webViewJavascriptCheckCommand() -> String
func webViewJavascriptFetchQueyCommand -> String func disableJavscriptAlertBoxSafetyTimeout()
複製代碼

Inject Javascript：向H5注入JS方法

• 把WebViewJavascriptBridge_js注入H5
• 若是startupMessageQueue裏有消息，用_dispatchMessage方法把消息所有消費掉

func injectJavascriptFile()

func _dispatchMessage(message: WVJBMessage)

在主線程執行JS方法"WebViewJavascriptBridge._handleMessageFromObjC('\(JSON(message))');"

複製代碼

Send Data：從App向H5發送一條消息事件

• 構造message對象
• responseCallbacks追加responseCallback
• 調用H5的_dispatchMessageFromObjC方法把message傳入H5

func sendData(data: Any, responseCallback: WVJBResponseCallback, handlerName: String)

message: 
{
    data: data,
    callbackId: String = "objc_cb_\(++_uniqueId)",
    handlerName: handlerName
}
複製代碼

Flush Message Queue：處理從H5向App發來的消息

• 遍歷Queue裏面的全部消息
• 若是message裏有responseId（說明是App調用H5的方法回來的回調）
  • 從responseCallback中找到callback方法
  • 執行callback(message["responseData"])
  • 從responseCallback中移除callback方法
• 若是message裏沒有responseId（說明是H5調用App的方法）
  • 若是message裏有callbackId（說明H5須要App回調）
    • 定義一個新的callback，callback裏構造一個新的messgeCallback對象
    • 把messgeCallback對象放入startupMessageQueue
  • 若是message裏沒有callbackId，構造一個空callback
  • messageHandlers裏找到message["handlerName"]對應的handler
  • 執行handler(message["data"], callback)

func flushMessageQueue(messageQueueString: String)


message: 
{
    responseId: String?,
    responseData: Any,
    handlerName: handlerName,
    callbackId: String?
}

messgeCallback:
{ 
    responseId: callbackId,
    responseData: responseData
}

複製代碼

WebViewJavascriptBridge_JS

NSString * WebViewJavascriptBridge_js(void);
複製代碼

給window的WebViewJavascriptBridge賦值

window.WebViewJavascriptBridge = {
		registerHandler: registerHandler,
		callHandler: callHandler,
		disableJavscriptAlertBoxSafetyTimeout: disableJavscriptAlertBoxSafetyTimeout,
		_fetchQueue: _fetchQueue,
		_handleMessageFromObjC: _handleMessageFromObjC
	};
複製代碼

變量

var messagingIframe;
var sendMessageQueue = [];
var messageHandlers = {};

var CUSTOM_PROTOCOL_SCHEME = 'https';
var QUEUE_HAS_MESSAGE = '__wvjb_queue_message__';

var responseCallbacks = {};
var uniqueId = 1;
var dispatchMessagesWithTimeoutSafety = true;
複製代碼

registerHandler：messageHandlers追加handler

function registerHandler(handlerName, handler) {
	messageHandlers[handlerName] = handler;
}
複製代碼

callHandler：H5調用App事件

• 若是有callback，設置一個callbackId，把callback存入responseCallbacks字典，message對象加入callbackId
• sendMessageQueue放入message
• 修改messagingIframe的src爲"wvjb_queue_message"，觸發iframe刷新

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;
}
複製代碼

_fetchQueue：把sendMessageQueue的隊列所有消費

function _fetchQueue() {
	var messageQueueString = JSON.stringify(sendMessageQueue);
	sendMessageQueue = [];
	return messageQueueString;
}
複製代碼

_handleMessageFromObjC：接受從App發來的消息

• 若是message有responseId（說明是H5調用App的方法回來的回調）
  • 從responseCallbacks取出callback並移除，調用callback(message.responseData)
• 若是message沒有responseId（說明是App調用H5的方法）
  • 若是message有callbackId（說明App須要H5回調）
    • 構造一個新的callback，callback裏調用_doSend方法發送消息{ handlerName:message.handlerName, responseId:callbackResponseId, responseData:responseData }
  • 從messageHandlers裏找到handler並調用

function _handleMessageFromObjC(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);
			}
		}
	}
}
複製代碼

_callWVJBCallbacks：將window的全部WVJBCallbacks調用，並傳入WebViewJavascriptBridge

function _callWVJBCallbacks() {
	var callbacks = window.WVJBCallbacks;
	delete window.WVJBCallbacks;
	for (var i=0; i<callbacks.length; i++) {
		callbacks[i](WebViewJavascriptBridge);
	}
}
複製代碼

WebViewJavascriptBridge

init(bridgeForWebView: WebView)
init(bridge: WebView)

func enableLogging()
func setLogMaxLength(length: Int)

func registerHandler(handlerName: String, handler: WVJBHandler)
func removeHandler(handlerName: String)
func callHandler(handlerName: String)
func callHandler(handlerName: String, data:Any)
func callHandler(handlerName: String, data:Any, responseCallback: WVJBResponseCallback)
func setWebViewDelegate(webViewDelegate: Any)
func disableJavscriptAlertBoxSafetyTimeout()
複製代碼

WKWebViewJavascriptBridge

init(bridgeForWebView: WebView)

func enableLogging()
func registerHandler(handlerName: String, handler: WVJBHandler)
func removeHandler(handlerName: String)
func callHandler(handlerName: String)
func callHandler(handlerName: String, data:Any)
func callHandler(handlerName: String, data:Any, responseCallback: WVJBResponseCallback)
func setWebViewDelegate(webViewDelegate: Any)
func disableJavscriptAlertBoxSafetyTimeout()
複製代碼

BridgeForWebView：初始化

• _setupInstance(webView)
  • 將webView的navigationDelegate設爲本身
  • 初始化WebViewJavascriptBridgeBase
  • 將base的delegate設爲本身
• reset()

init(bridgeForWebView: WebView)


- (void) _setupInstance:(WKWebView*)webView {
    _webView = webView;
    _webView.navigationDelegate = self;
    _base = [[WebViewJavascriptBridgeBase alloc] init];
    _base.delegate = self;
}
複製代碼

Register Handler：註冊事件

• 向base的messageHandlers追加handler

func registerHandler(handlerName: String, handler: WVJBHandler)

複製代碼

Remove Handler：移除事件

• 向base的messageHandlers刪除handler

func removeHandler(handlerName: String)

複製代碼

Call Handler：App調用H5方法

• 調用base的sendData方法

func callHandler(handlerName: String, data:Any, responseCallback: WVJBResponseCallback)

複製代碼

Flush Message Queue：消費H5調用App方法的消息

• 執行js：WebViewJavascriptBridge._fetchQueue();
• 拿到結果以後調用base的flushMessageQueue(result)

func WKFlushMessageQueue()
複製代碼

WebView decidePolicyForNavigationAction

• 若是url host是"bridge_loaded"，表示初始化，調用base的injectJavascriptFile方法
• 若是url host是"wvjb_queue_message"，表示有H5到App的消息傳遞，調用WKFlushMessageQueue方法
• 不然正常請求WebView Url

- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler
複製代碼

setWebViewDelegate：透傳WebView Delegate

- (void)setWebViewDelegate:(id<WKNavigationDelegate>)webViewDelegate
複製代碼

總結

簡而言之，App和H5雙方都註冊本身的方法事件，App經過webView提供的stringByEvaluatingJavaScriptFromString方法來調用H5，H5則經過更改隱藏iframe中的src來觸發iframe刷新，讓App接收到更新信號，而後App再從H5拉取消息。這樣就能實現App和H5之間的雙向通訊了。