회사에서 webView의 특정 버튼을 누르면 앱 UI의 변화를 줘야하는 기능을 구현해야 했다. 그중 생각한 것이 webView의 특정 버튼을 눌렀을 때, 이벤트를 받아와 처리해주면 되겠다는 생각을 했다. 그래서 front 개발자에게 버튼을 누르면 이벤트를 앱으로 보내주는 방법을 설명해 해당 함수를 작성해 달라고 요청했고, 나는 front에서 보낸 메시지를 받는 방법을 구현했다.
이번 노트에서는 WKWebView가 javascript의 함수를 호출해 메시지를 받아오는 방법에 대해 작성해 보려한다.
웹에서 앱으로 보내는 방법 또한 기술하면 좋겠지만.. 아직 front기술에 무지한 터라 앱에서 이벤트를 받는 방법에 대해서만 기술하려한다. 추후 스택이 더 쌓이면 추가 포스트 해보겠다.
import WebKitWKWebView를 사용하기 위해 WebKit을 import 해준다.
var webView: WKWebView?웹뷰도 하나 선언해 준다.
override func viewDidLoad() {
super.viewDidLoad()
self.webView?.configuration.userContentController.add(WebScriptMessageHandler(delegate: self), name: "ReceivedMessage")
}viewDidLoad에 웹에서 받을 메시지를 WKUserContentController를 사용해 WKWebView에 등록한다.
여기서 WKUserContentController는 JavaScript코드와 Native webView 사이의 상호작용을 관리하고 Native webView에서 콘텐츠를 필터링하기 위한 객체를 말한다.
위에 설정한 WebScriptMessageHandler에는 여러 웹에서 보내는 여러 메시지가 들어올 수 있으므로 ReceivedMessage라는 이름으로 구분하여 필터링한다.
// MARK: - WKScriptMessageHandler
override func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
guard message.name == "ReceivedMessage" else { return }
print("내가 받은 메시지: message.body")
}이제 WKScriptMessageHandler의 userContentController(_:didReceive:) 인스턴스 메서드로 우리가 등록한 ReceivedMessage라는 이름의 메시지를 받을 수 있다.
아 중요한 한가지!! JavaScript에서 메시지를 보내줄 때도 앞서 설정한 ReceivedMessage라는 동일한 이름으로 보내줘야 앱에서 메시지를 정확히 받을 수 있다!!!! 아주 중요!!!!!!!
