網頁與 iOS App 雙向溝通

前言

2024 面試過程, 公司常問網頁端與 App webView 溝通, 記錄一下實作內容.

實作

網頁向 App 發出消息

網頁透過 webkit api 向 app 發出訊息, ex:

window?.webkit?.messageHandlers?.<#someString#>?.postMessage({
    message: "",
})

App 透過 WKScriptMessageHandler 接收訊息, ex:

extension HTMLHandler: WKScriptMessageHandler {
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        if message.name == <#someString#> {
            // do something
        }
    }
}

其中 someString 是網頁與 App 共同定義好的.

App 向網頁發出消息

網頁先定義好 function, ex:

function getUserName(name) {
  // do something
}

App 透過 evaluateJavaScript(_ javaScriptString: String) 向網頁發出消息, ex:

webView.evaluateJavaScript("getUserName(\"Joe")")

Demo

GitHub