[iOS/Swift] 웹뷰 브릿지 등록, WebKit과 브릿지, userContentController, 데이터 전송

세상에 많은 앱들은 네이티브 + 웹으로 구성되어있다. 코어한 부분은 네이티브로.. 수정이 많지만 배포를 줄이고 싶은 경우, 이미 웹으로 만들어서 두번 작업하기 싫은 경우.

 

iOS에서는 WebKit을 사용해서 네이티브 앱 안에서 웹을 보여준다. 

 

단순하게 보여주는 것 뿐만 아니라 서로 소통하게 도와준다. 그게 바로 userContentController다.

 

적용은 너무 간단하다. 

self.loginWebKitView.configuration.userContentController.add(self, name: "bridge")

원하는 WebKit에 위 코드를 통해서 등록한다. name 자리에 웹에서 전송하는 브릿지와 동일해야한다.

 

위를 등록해두면 bridge라는 이름으로 메세지가 들어오게되고 그 안에 데이터를 넣어서 전달할 수도 있다.

 

func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
    var command: String = ""
    var payload: String = ""

    // 브릿지 파라미터 처리 방식 2
    if let jsonString = message.body as? String,
       let jsonData = jsonString.data(using: .utf8),
       let jsonDict = try? JSONSerialization.jsonObject(with: jsonData, options: []) as? [String: Any],
       let tempCommand = jsonDict["command"] as? String {

        command = tempCommand

        if let tempPayload = jsonDict["payload"] as? String {
            payload = tempPayload
        }
    } else {
        // 예외 상황 처리
        return
    }
    print("message : \(message.name)")
    print("message : \(message.body)")

    // 브릿지 종류 구분
    if message.name == "bridge" {
        // Command 구분
        동작 수행
    }
}

데이터를 받기 위해서는 위에 처럼 didReceive 함수를 꼭 선언해야한다. 그리고 내용을 파싱해야한다. 사람마다 다르지만 나는 위 처럼 사용했다. 

 

WKScriptMessageHandler는 꼭 상속 받아야한다.

 

 

[iOS/Swift] WebKit, window.open을 통해서 새로운 탭 열기 feat.nice 본인 인증. window.close (tistory.com)

[iOS/Swift] WebKit, window.open을 통해서 새로운 탭 열기 feat.nice 본인 인증. window.close

[iOS/Swift] 웹뷰 브릿지 삭제, userContentController 제거 | removeScriptMessageHandler... (두개의 WebKit과 브릿지,) (tistory.com)

[iOS/Swift] 웹뷰 브릿지 삭제, userContentController 제거 | removeScriptMessageHandler... (두개의 WebKit과 브릿지