彻底突破：基于WKWebView的API实现Hybrid容器，告别拦截Request！

2023-09-19 21:18:56

基于WKWebView API的Hybrid容器：彻底告别拦截Request的桎梏

随着Hybrid App开发的蓬勃发展，WebView作为承载Web内容的容器，其与原生端的通信至关重要。传统上，拦截Request的方式一直被广泛采用，但随着WKWebView的出现，一种基于其API的全新通信方式应运而生。这不仅简化了开发流程，更避免了拦截Request的局限性，为Hybrid容器带来了革命性的突破。

抛弃拦截Request的枷锁

拦截Request的方式依赖于注入一段JS代码，这种方式虽然实现简单，但也存在诸多弊端。首先，它需要修改WebView的源代码，存在安全隐患；其次，由于Web内容不受控，存在注入代码失败的风险；最后，它无法拦截所有请求，对于一些特殊的请求（如HTTPS），拦截失效。

拥抱WKWebView的原生API

WKWebView提供了丰富的API，其中包括用于与原生端通信的WKScriptMessageHandler和WKUserContentController。通过这些API，我们可以建立一个高效、安全的通信通道，而无需拦截Request。

实现原理

注册WKScriptMessageHandler： 在WKWebView中注册一个WKScriptMessageHandler，用于监听来自Web端的调用。
创建WKUserContentController： 创建一个WKUserContentController，并将其添加到WKWebView中。
添加WKScriptMessageHandler： 将注册好的WKScriptMessageHandler添加到WKUserContentController中。
Web端调用： Web端通过window.webkit.messageHandlers.方法名(数据)调用原生端。
原生端处理： 原生端收到调用后，通过WKScriptMessageHandler的userContentController:didReceiveScriptMessage:frame:方法进行处理。

优势显著

基于WKWebView API实现Hybrid容器具有以下优势：

原生化程度高： 直接使用WKWebView提供的API，原生化程度高，安全性和稳定性更佳。
开发简便： 无需拦截Request，减少了代码量和复杂度，开发更加便捷。
跨平台一致性： WKWebView是iOS和macOS平台的原生组件，可以实现跨平台一致的开发体验。
高效稳定： 基于API的通信方式更加高效稳定，避免了拦截Request可能导致的性能问题。

示例代码

// 在WKWebView中注册WKScriptMessageHandler
let scriptHandler = WKScriptMessageHandler()
wkWebView.configuration.userContentController.add(scriptHandler, name: "methodName")

// 在Web端调用原生方法
window.webkit.messageHandlers.methodName.postMessage(data)

// 在原生端处理调用
func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
    if message.name == "methodName" {
        // 处理数据...
    }
}