회사에서 webView의 특정 버튼을 누르면 앱 UI의 변화를 줘야하는 기능을 구현해야 했다. 그중 생각한 것이 webView의 특정 버튼을 눌렀을 때, 이벤트를 받아와 처리해주면 되겠다는 생각을 했다. 그래서 front 개발자에게 버튼을 누르면 이벤트를 앱으로 보내주는 방법을 설명해 해당 함수를 작성해 달라고 요청했고, 나는 front에서 보낸 메시지를 받는 방법을 구현했다.
이번 노트에서는 WKWebView
가 javascript의 함수를 호출해 메시지를 받아오는 방법에 대해 작성해 보려한다.
웹에서 앱으로 보내는 방법 또한 기술하면 좋겠지만.. 아직 front기술에 무지한 터라 앱에서 이벤트를 받는 방법에 대해서만 기술하려한다. 추후 스택이 더 쌓이면 추가 포스트 해보겠다.
import WebKit
WKWebView
를 사용하기 위해 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
라는 동일한 이름으로 보내줘야 앱에서 메시지를 정확히 받을 수 있다!!!! 아주 중요!!!!!!!