[iOS] 웹뷰의 델리게이트 메서드 ( WKNavigationDelegate & WKUIDelegate) - HoonIOS

안녕하세요, HoonIOS입니다. :)

저번에는 WKWebView의 기본적인 메서드에 대해 포스팅을 했습니다.

<WKWebView 기본 메서드>

 

이번에는 기본 메서드가 아닌 델리게이트 메서드에 대해 포스팅을 해보려고 하는데요.

 

 WKWebView의 델리게이트 메서드

 

WKWebView는 델리게이트 메서드 패턴을 통해서 웹페이지 로딩상황을 추적하거나 콘텐츠나 사용자의 액션을 제어할 수 있도록 지원을 한다고 합니다.

 

WKWebView의 델리게이트 프로토콜은 한개가 아니라 2개나 지원합니다. :)

 

• WKNavigationDelegate
• WKUIDelegate

그럼 한개씩 한번 애플 문서를 봐보겠습니다. :)

 

• 이 프로토콜은 사용자의 유저 인터페이스 요소들을 보여주기 위한 메서 드라고 합니다.
  
  음 예를 들어서 새로운 웹뷰 창을 만든다든지 알림 창 패널을 보여주는 역할을 합니다.

 

• 이 프로토콜은 웹킷 뷰의 로딩 상황을 추적하거나 제어하는데 필요한 프로토콜을 담고 있습니다.
• 해당 프로토콜을 통해서 인디케이터 뷰를 적당한 위치에 구현을  할 때 많이 사용하는 델리게이트 메서드가 있습니다.

 

먼저 WKNavigationDelegate의 메서드에 대해 알아보겠습니다.

 

 WKNavigationDelegate

 

해당 프로토콜에서 웹페이지 로딩이 호출될 때 사용되는 메서드를 살펴보겠습니다.

 

1. webView(_:decidePolicyFor:descisionHandler:)
   - 웹 페이지의 탐색 허용 여부를 결정
2. webView(_:didStartProvisionNavigation:)
   - 웹뷰가 콘텐츠 탐색을 시작할 때 호출
3. webView(_:didCommit:)
   _ 웹뷰가 콘텐츠를 받기 시작할때 호출
4. webView(_:didFinish:)
   - 웹뷰가 콘텐츠 받기를 완료했을 때 호출
5. webView(_:didFail:withError:)
   - 웹 뷰가 콘텐츠를 받기 실패했을 때 호출

이 메서드는 load메서드를 통해 웹페이지를 로딩했을 때 호출이 되고 만약 웹페이지 안에서 다른 페이지로 넘어갔을 때도 호출이 됩니다.

그런데 만약에 웹 전체를 교체하는 게 아니라 AJAX방식인 부분적인 웹 부분만 교체하는 방식의 웹뷰라면 델리게이트 메서드 호출 순서가 다를 수가 있어 조심하게 다뤄야 합니다.

 

 WebView(_:decidePolicyFor: decisionHandler:)

 

이 메서드의 설명을 보면 웹뷰가 웹페이지를 읽어올지 말지를 결정하는 메서드라고 합니다.

 

이 메서드의 각 매개변수를 한번 살펴보겠습니다.

• webView
  - 요구가 시작되는 것으로부터의 웹뷰
• navigationAction
  - 탐색 요청을 트리 거한 작업에 대한 세부 정보를 포함하고 있는 객체
  - URLRequest로부터 URL을 호출할 때 해당 매개변수로 접근
• preferences
  - 새로운 웹페이지를 보여줄 때 사용하는 기본 환경설정 정보
• decisionHandler
  - 함수 타입으로 특정 인자 값을 넣어 호출을 함으로써 웹페이지의 로딩 여부를 결정하는 것입니다.
  - 이 매개변수를 사용하면 특정 url을 들어가는 웹페이지를 차단을 할 수 있는데 그 방법은 해당 함수의 인자 값을. cancel로 바꿔서 호출하면 됩니다.

decisionHandler에 대해 자세히 한번 살펴보겠습니다.

1. 차단을 하고 싶으면
   decisionHandler(. cancel)
2. 허용을 하고 싶으면
   decisionHandler(. allow)

만약 특정 urldmf 차단을 하고 싶으면 아래와 같이 코드를 작성하며 됩니다.

optional func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, preferences: WKWebpagePreferences, 
decisionHandler: @escaping (WKNavigationActionPolicy )-> Void) {

guard let url = navigationAction.request.url?.absoluteString else { return }

    if url.start(with: “http”) {
    
    decisionHandler(.cancel)    
    
    }
}

* 코드 설명

• navigationAction의 매개변수를 통해서 request 했던 url을 읽어와 해당 URL이 http이 시작을 하면 decisionHandler(. cancel)을 통해 차단을 하는 방식입니다.

 

 webView(_:didStartProvisionalNavigation:)

 

 

웹뷰가 콘텐츠를 로드하기 시작하면 호출되는 메서드입니다.

 

웹킷 뷰가 콘텐츠를 로딩하려고 준비할 때 호출되는 메서드라고 생각을 하시면 될 거 같습니다.

 

 webView(_:didCommit:)

 

 

웹뷰가 메인 프레임을 위한 콘텐츠를 받기 시작할 때 호출되는 메서드로 콘텐츠를 받기 시작할때 처리해줄 것이 있을 때 사용을 하면 됩니다.

 

로딩 상태를 표시해주는 액티비티 인디케이터 뷰를 사용할 때 사용이 되는 메서드입니다.
( 액티비티 인디케이터 뷰를 사용하는 목적은 웹페이지를 로딩할 때 시간이 꽤 걸리는 경우가 있어 사용자에게 앱이 죽은 게 아니라 로딩이 되어있다는 것을 보여주기 위해 액티비티 인디케이터 뷰를 사용하게 됩니다. )

 

 webView(_:didFinish:)

 

 

웹뷰가 콘텐츠 데이터를 받아오는 것을 모두 마쳤을 때 호출되는 메서드입니다. 즉 웹페이지가 웹뷰에 완전히 보여주고 나면 호출이 된다고 생각을 하시면 됩니다.

 

또 이때 didCommit때 보여줬던 액티비티 인디케이터 뷰를 보여줬는데요, 만약 웹뷰에 모두 로딩이 되었는데도 로딩이 계속되면 사용자가 당황 하겠죠? 그러므로 인디케이터뷰를 숨겨주는 코드를 여기에 작성을 해주면 됩니다.

 

 webView(_:didFail:withError:)

 

이 메서드는 콘텐츠 로딩이 실패를 했을 때 호출이 되는 메서드로 웹페이지를 불러오는 도중에 실패했을 때 호출이 되는 메서드입니다. 

 

세 번째 매개변수인 withError를 통해 에러를 확인할 수 있어 에러가 발생했을 때 해당 메서드를 통해서 에러를 확인할수 있습니다.

 

 webView(_:didFailProvisionalNavigation:withError:)

 

 

이 메서드는 위의 didFail메서드와 같이 에러가 발생했을때 호출되는 메서드인데요,

 

대신 웹페이지 로딩되었을 때  호출되는 것이 아니라 URL이 잘못되었거나 네트워크 오류가 발생해 웹페이지 자체를 아예 불러오지 못했을 때 호출되는 메서드입니다.

 

이것도 마찬가지로 error 매개변수를 통해 무슨 에러인지 확인을 할 수 있습니다. :)

 

이렇게 WKNavigationDelegate에 대해 알아봤습니다.

 

이제는 나머지 델리게이트 메서드 WKUIDelegate에 대해 몇 개 메서드를 포스팅하겠습니다.

 

 WKUIDelegate

 

사용자의 유저 인터페이스를 보여주는 유저 인터페이스의 요소들을 보여주기 위한 메서드로 말 그대로 UIDelegate라고 생각을 하시면 될 거 같습니다.

 

1. webView(_:createWebViewWith:for:windowFeatures:)
   - 새로운 웹뷰를 만들어주는 메서드
2. webViewDidClose(_:)
   - webView창이 성공적으로 닫혔음을 알려줍니다.
3. webView(_:runJavaScriptAlertPanelWithMessage:initiatedBtFrame:completionHandler:)
   - 자바스크립트 알람 패널을 보여줍니다.
4. webView(_:runOpenPanelWith:initiatedByFrame:completionHandler:)
   - 패널에 파일을 업로드하는 것을 보여줍니다.

우선  해당 델리게이트 메서드가 많지만 자바스크립트와 연동해서 처리하는 결과를 호출하는 것으로 이 정도 메시지만 설명해 보겠습니다.

 

 webVIew(_:createWebViewWith:for:windowFeatures:)

 

해당 메서드에는 4개의 매개변수가 있습니다.

 

하나씩 한번 나열해 보겠습니다.

 

• webView
  - 델리게이트 메서드를 호출할 웹뷰
• configuration
  - 새로운 웹뷰를 만들 때 사용할 구성
• navigationAction
  - 새로운 웹뷰를 만들어서 호출할 때 야기할 행동
• windowFeatures
  - 웹페이지의 요구 특징

 webViewDidClose(_:)

 

 

DOM 윈도우를 성공적으로 닫을 때 앱에 알려주는 메서드입니다.

 

 webView(_:runJavaScriptAlertPanelWithMessage:initiatedByFrame:completionHandler:)

-

자바스크립트의 알람 패널을 보여주는 것입니다.

 

해당 메서드에는 4개의 매개변수가 있습니다.

 

하나씩 한번 나열해 보겠습니다.

 

• webView
  - 델리게이트 메서드를 호출할 웹뷰
• message
  - 보여줄 메시지
• frame
  - 자바스크립트 프로세스가 호출을 시작한 프레임에 대한 정보
• completionHandler
  - 알림 창 패널이 사라지고 난 후에 호출될 클로저 함수

 webView(_:runOpenPanelWith:initiatedByFrame:completionHandler:)

 

 

파일 업로드 패널을 보여주는 메서드입니다.

 

이제 매개변수를 봐야겠죠?

 

• webView
  - 델리게이트 메서드를 호출할 웹뷰
• parameters
  - 파일 업로드 control을 보여주는 파라미터
• frame
  - 파일 업로드 호출을 시작하면 불려지는 파라미터
• completionHandler
  - 열려있던 파넬이 사라지고 불려지는 후행 클로저로 만약에 사용자가 OK를 선택하면 통과하게 됩니다.

 

 

이렇게 WKNavigationDelegate와 WKUIDelegate에 대해 알아봤습니다. WKUIDelegate는 뭔가... 어렵네요... 자바스크립트도 들어가다 보니 ㅠㅠ 

 

다음 포스팅에는 WKNavigationDelegate를 이용해서 블로그랑 깃허브를 호출해보겠습니다.