WebViewJavascriptBridge源码解读

2,885 阅读5分钟

介绍

在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之间的双向通信了。