Ios webview에서 javascript를 통해 ios 기능 호출하기 ℡

WKWebView와 UiWebView의 차이점

원래 UiWebView가 존재하였지만 ios8에서 WKWebView가 등장하였습니다.
이 과정에서 UiWebView는 deprecated 되었습니다.

WKWebView는 UiWebView 보다 성능이 좋고 효율적으로 동작합니다.
WKWebView는 javascript를 비동기 적으로 처리합니다.
Javascript와 네이티브 코드 간의 통신은 비동기 적으로 처리되고 일반적으로 더 빠르게 실행이 됩니다.

하지만 WKWebView에서는 쿠키를 직접 관리해야 합니다.
쿠키 설정이 필요해서 쿠키를 설정하는 스크립트를 시작시에 실행시켜 주어서 원했던 동작을 구현했던 경험이 있습니다.
(이 부분은 좀 더 develop 예정입니다.)

 

Ios의 Webview를 이용할때

window.webkit.messageHandlers.[method].postMessage 를 이용해 javascript에서 네이티브의 함수를 호출할 수 있습니다.

 

swift 웹뷰 설정 코드

class ViewController: UIViewController {
  var webView: WKWebView!
  
  override func viewDidLoad(){
    super.viewDidLoad()
    setConfig()
    
    let urlRequest = URLRequest(url: URL(string: "https://dkrnfls.tistory.com")!);
    webView.load(urlRequest)
    self.view.addSubview(webView)
  }
  
  func setConfig(){
    let contentController = WKUserContentController()
    contentController.add(self, name: "getToast")
    contentController.add(self, name: "getMainToast")
    
    
    let config = WKWebviewConfiguration()
    config.userContentController = contentController
    
    webView = WKWebView(frame: CGRect.zero, configuration: config)
  }

  func showToast(message: String) {
    let toastLabel = UILabel(frame: CGRect(x: self.view.frame.size.width/2 - 75, y: self.view.frame.size.height-100, width: 150, height: 35)) 
    toastLabel.backgroundColor = UIColor.black.withAlphaComponent(0.6) 
    toastLabel.textColor = UIColor.white 
    toastLabel.font = font 
    toastLabel.textAlignment = .center; 
    toastLabel.text = message 
    toastLabel.alpha = 1.0 
    toastLabel.layer.cornerRadius = 10; 
    toastLabel.clipsToBounds = true 
    self.view.addSubview(toastLabel) 
    UIView.animate(withDuration: 4.0, delay: 0.1, options: .curveEaseOut, 
       animations: { toastLabel.alpha = 0.0 }, 
       completion: {(isCompleted) in toastLabel.removeFromSuperview() }
    )
  }
  
  func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptmMessage) {
    switch message.name {
      case "getToast" :
        showToast(message: mmessage.body as! String)
      case "getMainToast" :
        showToast(message: message.body as! String)
      default :
        ()
    }    
  }
}

 

javascript 호출 코드 

getToast, getMainToast가 직접 설정하신 커스텀 함수의 이름이 됩니다.

window.webkit.messageHandlers.getToast.pushMessage('hihi')
window.webkit.messageHandlers.getMainToast.pushMessage('hihi')

 

1. config 설정할때 이름을 등록 

2. config를 webView의 configuration에 넣어줌

3. useContentController 함수에서 이름에 따른 동작을 취해줌

 

위의 1 -> 2 -> 3 흐름으로 javascript에서 swift의 커스텀 함수를 호출할 수 있습니다

 

 

 

 

출처 : https://developer.apple.com/documentation/webkit/wkwebviewconfiguration

Apple Developer Documentation

https://eddiekwon.github.io/swift/2018/08/02/WebView101/

iOS에서 WKWebView 붙이는 방법 · eddie's development log

https://royhelen.tistory.com/46

[iOS/Swift] Toast Message 만들기