[iOS - swift] Javascript Interface (웹뷰와 자바스트립트 연동, WKWebView, WKScriptMessageHandler)

Javascript의 인터렉션 -> iOS에서 받는 방법

• javacript에서 특정 이벤트가 발생한 경우 메세지를 iOS에 넘기는 방식
• iOS에서 메세지를 파싱하여, 해당 메세지에 관한 이벤트 처리를 하는 방식(뒤로가기, statusBar색상 변경)
• iOS에서 WKScriptMessageHandler 델리게이트를 구현하여 이벤트를 받는 형태

javasript interface 정의

시그니처	javascript
statusBar 색상 변경: changeStatusBarColor	webkit.messageHandlers.MyJavacriptInterfaces.postMessage([     action: 'changeStatusBarColor',     bgColor: '#FFFFFF'     isDarkIcon: true ])
뒤로가기 버튼 누른 경우: goBack	webkit.messageHandlers.MyJavascriptInterfaces.postMessages([     action: 'goBack', ])

사용 방법

• 델리게이트 할당

let messageHandlerName = "MyJavascriptInterfaces"

func setUpWebView(with config: KWebViewConfiguration) {
    let contentController = WKUserContentController()
    contentController.add(self, name: messageHandlerName) // delegate와 name설정
    config.userContentController = contentController
    webView = WKWebView(frame: .zero, configuration: config)
}

• 델리게이트 구현

enum WebAction: String {
    case changeStatusBarColor
    case goBack
}

extension BaseWebViewController: WKScriptMessageHandler {
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {

        if message.name == messageHandlerName {
            if let dics: [String: Any] = message.body as? Dictionary, let action = dics["action"] as? String {

                let webAction = WebAction(rawValue: action)
                switch webAction {
                case .changeStatusBarColor:
                    if let color = dics["bgColor"] as? String, let isDarkIcon = dics["isDarkIcon"] as? Bool {
                        self.statusBarView?.backgroundColor = UIColor(hexString: color)
                        if isDarkIcon == true {
                            statusBarStyle = .default
                        } else {
                            statusBarStyle = .lightContent
                        }
                        setNeedsStatusBarAppearanceUpdate()
                    }
                case .goBack:
                    self.popVC()
                default:
                    print("Undefined action: \(String(describing: webAction))")
                }
            }
        }
    }
}