iOS) WKWebView

💡 WKWebView가 나온 배경

iOS 8 아래 버전에서는 UIWebView를 사용했지만, 성능상의 문제로 deprecated 되었다고 함

iOS 8 부터 WKWebView가 도입되었고, 이유는 HTML의 컨텐츠를 표출하기 위해서 탄생 !

 

❓ UIWebView와 차이가 몬데??

이렇게 몇 개의 주제로 비교가 가능한데, 성능 면에서 WKWebView가 우수해보이네용 !

그리고 애플에서도 더 이상 지원을 안한다고 하니, WKWebView를 사용해야합니다.. ! ㅎ

 

👌🏻 더 자세히 설명하자면..

WKWebView는 앱과는 별도 프로세스로 실행됩니다 !

앱의 메인 프로세스에서 실행하지 않고 WKWebView에 별도 메모리를 할당해 분리하므로

WKWebView 가 중단되더라도 앱이 중단 되지 않습니다 !! 와웅 

또, 웹뷰에 할당된 메모리를 초과한다면 앱을 중단하지 않고 충돌하게 되어

페이지를 다시 로드하려고 시도하게 됩니다 !

구글링을 통해 알아보니 WKWebView를 사용하는 경우는

네이티브 앱에서 웹뷰를 앱의 UI처럼 사용하고 싶을 때 사용할 수 있고

여러 콜백함수들로 웹에서의 상태들에 대한 시점을 알아서 커스텀하기도 쉽다고 합니다 🙂

 

 

---

 

즉, 쉽게 말해서 웹의 요소를 커스텀해서 사용해야할 때

여러가지 기능들을 지원하는 컴포넌트 !

 

Web과의 여러 상호작용이 가능한데, WKUserController를 사용해서

웹으로부터 메세지를 전달받을 수도 있고, 앱에서 웹으로 자바스크립트 코드를 전달할 수도 있습니다 !

또한, WKUIDelegate를 활용해서 앱에서 웹뷰가 Alert 메세지를 호출했을때, 앱에서 처리도 가능합니다 !

WKNavigationDelegate를 활용해서는 웹뷰가 호출되는 시점들을 알 수 있습니다.

( 로딩을 완료했을때 혹은 로딩을 시작했을 때 등의 처리 )

 

🌀 간단한 코드로 웹뷰 띄우는 방식 !!

import WebKit

class ViewController: UIViewController {

    private lazy var webView: WKWebView = {
        let webView = WKWebView(frame: self.view.frame)
        webView.allowsBackForwardNavigationGestures = true
        webView.uiDelegate = self
        webView.navigationDelegate = self
        return webView
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
                loadWeb()
    }

    func loadWeb() {
        self.view.addSubview(webView)

        guard let url = URL(string: "https://apple.com") else { return }
        let request = URLRequest(url: url)

        webView.load(request)
    }
}
extension ViewController: WKUIDelegate {}
extension ViewController: WKNavigationDelegate {}

이렇게 설정하면 웹뷰에서 호출하는 것들을 delegate로 선언해서 받아서 이벤트 핸들링이 가능합니다 !

사파리에서 기본적으로 사용하는 뒤로가기, 공유하기 , url을 입력하는 창들이 없으므로,

커스텀하여 사용하는 것이 가능합니다 !

 

앱 안에서 웹사이트를 호출하는 동작이 가능해지는데,

웹과 앱 사이의 상호작용을 가능하게 해주는 메소드 들이 많고

이를 활용하여 핸들링하기가 쉽다는 점이 있습니다 ! !

 

 

 

1. WKUIDelegate : UI 요소들을 보여주기 위한 메서드

 

WKUIDelegate는 말그대로 UI요소들을 보여주기 위한 메서드입니다.

예를들어, 새로운 웹 뷰 창을 만드는 경우나 alert를 보여줄 때 쓰입니다! 아래는 주로 자주 쓰이는 메서드들을 가져와 봤습니당

// 새 창열기
// 가장 자주 사용하게 되는 기능인데, 
func webView(_ webView: WKWebView, 
    createWebViewWith configuration: WKWebViewConfiguration, 
                  for navigationAction: WKNavigationAction, 
       windowFeatures: WKWindowFeatures) -> WKWebView? {

        //navigationAction내에 새로 요청하는 webview에 대한 정보가 들어있다.
        //아래와 같은 형식으로 request를 받아 새 웹뷰를 띄우거나 기존 웹뷰에 load 해줄 수 있다. 
        if let url = navigationAction.request.url {
        }

}

//Alert
func webView(_ webView: WKWebView, 
runJavaScriptAlertPanelWithMessage message: String, 
     initiatedByFrame frame: WKFrameInfo, 
    completionHandler: @escaping () -> Void) {

        //자바스크립트에서 표시해주는 기본 얼럿에 대해서도 별도 처리를 해주어야한다.
        //이곳에서 message를 포함하는 UIAlertController를 생성해 처리해주면 된다.
}

//Confirm
//Confirmd인데 위의 Alert 방식으로 completionHandler를 호출해주면 된다.
func webView(_ webView: WKWebView, 
runJavaScriptConfirmPanelWithMessage: String, 
initiatedByFrame: WKFrameInfo, 
completionHandler: (Bool) -> Void) {

}

 

2. WKNavigationDelegate : 웹 뷰에서 일어나는 변경사항들을

감지하고 제어할 수 있는 프로토콜

 

WKWebView에서 지원하는 기능은 웹에서 한 페이지를 로드하는 것 뿐만 아니라, 정말 웹을 사용하는 것처럼 앞으로 가기, 뒤로가기도 지원됩니다. 그리고 WKNavigationDelegtae를 채택해서 웹뷰의 로드 시점들에 대한 콜백을 받을 수 있습니다 !

 

📌 자주 사용하는 메소드들

 

webView(_:decidePolicyFor:descisionHandler:) 웹 페이지의 탐색 허용 여부를 결정

webView(_:didStartProvisionNavigation:) 웹뷰가 콘텐츠 탐색을 시작할 때 호출

webView(:didCommit:) 웹뷰가 콘텐츠를 받기 시작할때 호출

webView(_:didFinish:) 웹뷰가 콘텐츠 받기를 완료했을 때 호출

webView(_:didFail:withError:) 웹 뷰가 콘텐츠를 받기 실패했을 때 호출

 

 

💥 WKNavigationDelegate 에 대해 더 자세히 알고 싶다묜 아래 포스팅 참고 !

[Swift iOS] WKNavigationDelegate 하이브리드 앱에서 webview 탐색 및 관리

 

3. WKWebViewConfiguration : 웹 뷰 구성에 관한 옵션 지정하기

 

🌿 WKWebView의 요소 중에는 configuration: WKWebViewConfiguration이라는 프로퍼티가 있는데요.

이 프로퍼티를 활용하면 웹 뷰를 구성하는 방법에 대한 정보를 컨트롤할 수 있습니다 !

즉, 여러가지 옵션 값들을 주어서 웹에서 제한되는 항목이나 이런 값에 대한 설정이 가능합니다.

( 제가 찾아본 예시로는,, 웹 페이지 렌더링 속도, 미디어 재생 처리 방법 등이라고 합니당.. ? )

또한 WebView에 JavaScript 코드를 주입하거나 JavaScript로부터 메세지를 받아와서 컨트롤하는 것도 가능합니다.

 

앗챠챠 글고 WKWebViewConfiguration은 WKWebView가 처음 초기화될 때에만 사용됩니다.

WKWebView가 생성된 이후에는 이 클래스를 통해 속성들을 변경할 수 없습니다 ~~ !

 

 

애플 개발자 문서에서 설정 가능한 기능들과 어떤 옵션들을 사용할 수 있는지 설명되어있답니다 !

Apple Developer Documentation

 

4. JavaScript 통신 !!

 

📖  실제로 웹뷰가 많이 있는 앱의 경우엔 자바스크립트와 통신을 해야합니다!

WKWebView에서 자바스크립트의 요청을 수신할 수 있고, 자바스크립트의 함수를 호출할 수 있습니다.

[iOS SWIFT] WKWebview에서 WKUserContentContoller 를 JavaScript 연동 (Native <-> JavaScript) 통신

이 블로그는 웹뷰에서 자바스크립트 통신을 전체적으로 보여주는 것 같아서 가져와봤숩니당

자바스크립트 통신은 음 잘 모르겠고 이해안되는데 일단......가져왔고... 찾아보다 보니까 길어졌습니다 쿄쿄..

 

 

 

 

- 참고한 사이트 !!

[iOS] WKWebView (1) - 웹 뷰 사용하기

WKWebView