[iOS/Swift] WKWebView (+ SFSafariViewController)

 

 

Q. 지난 PHP 글에 이어서 iOS 글을 쓰는 이유 ?

A. 알 수 없다.

 

아직 맥북도 XCode 도 낯설지만 웹뷰에 대해서

며칠간 너무 열심히 조사했기 때문에 잊지 않기 위해 정리하고자 한다.

 

이번 게시글에서는 앱에서 웹 페이지를 여는 세가지 방법에 대해 알아보자!

 

(1) 사파리 앱을 열어줌

(2) WKWebView 로 열어줌

(3) SFSafariViewController 로 열어줌

 

 

 

---

 

 

1. Safari 앱

아이폰에 설치된 Safari 를 열어서 웹 페이지를 로딩하는 방법이다.

 

별도의 설정이 필요 없어 간편하지만, 커스텀이 전혀 불가능하고 Safari 로부터

어떠한 이벤트를 받아온다던가 앱 사이의 상호작용은 불가능하다는 단점이 있다.

@IBAction func openSafariApp(_ sender: Any) {
    guard let appleUrl = URL(string: "https://www.apple.com")   else { return }
    guard UIApplication.shared.canOpenURL(appleUrl)             else { return }

    UIApplication.shared.open(appleUrl, options: [:], completionHandler: nil)
}

// guard 조건 else { 조건이 false인 경우 수행되는 구문 }

 

 

---

 

2. WKWebView

보통 WebView 에서 커스텀이 필요한 경우나 Web 과의 상호작용이 필요한 경우에 사용한다.

(*WebKit 프레임워크에 속해있는 객체들은 WK 가 앞에 붙는다)

 

Web 과의 여러 상호작용이 가능한데,

WKUserController 를 사용해 웹으로부터 메시지를 전달받을 수도 있고

웹으로 자바 스크립트 코드를 앱에서 전달할 수도 있다.

 

또한 WKUIDelegate 를 활용해서 앱에서 WebView 가 Alert 메시지를 호출할 때, 앱에서 처리도 가능하다.

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

로딩을 완료했을 때, 로딩을 시작했을 때 등의 처리가 가능하다.

import WebKit

var webView: WKWebView!

func loadWeb() {
    self.webView.uiDelegate = self
    self.webView.navigationDelegate = self

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

extension ViewController: WKUIDelegate {}
extension ViewController: WKNavigationDelegate {}

 

위와 같이 설정하면 WebView 에서 호출하는 것들을 Delegate 로 선언해서 받아 이벤트 핸들링이 가능하다.

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

웹과 앱 사이의 상호작용을 가능하게 해주는 메소드들이 많고 이를 활용해서 핸들링하기 쉽다는 점이 있다.

 

장점이 많은 WKWebView 이지만, 아래와 같은 이슈들이 존재한다.

• iOS 9 이상 디바이스에서만 실행 가능
• 로컬로 저장된 파일에 대한 AJAX 요청을 지원하지 않음
• 쿠키 허용 설정을 지원하지 않음
• 고급 캐시 설정 (Advanced Cache Settings) 을 지원하지 않음
• 앱 종료시 HTML5 로컬 스토리지가 지워짐

 

+ WKWebView Delegate Method

WKWebView 는 델리게이트 메서드 패턴을 통해 웹페이지 로딩 상황을 추적하거나

사용자의 액션을 제어할 수 있도록 지원한다고 한다. (자세한 내용은 여기를 눌러주세요)

*델리게이션 패턴은 자신의 객체 중 하나를 다른 object 에 소개하는 것

 

 WKUIDelegate

= 웹킷 뷰의 로딩 상황을 추적하거나 제어하는데 필요한 프로토콜을 담음

이 프로토콜은 사용자의 유저 인터페이스 요소들을 보여주기 위한 메소드이다.

예를 들어 새로운 웹뷰 창을 만든다던지, 알림 창 패널을 보여주는 역할을 한다.

 

 WKNavigationDelegate

= 사용자의 유저 인터페이스 요소들을 보여주기 위한 메소드

이 프로토콜은 웹킷 뷰의 로딩 상황을 추적하거나 제어하는데 필요한 프로토콜을 담고 있다.

해당 프로토콜을 통해서 인디케이터 뷰 (몇 번째 화면인지 표시) 를 적당한 위치에 구현한다.

 

 

 

---

 

3. SFSafariViewController

마지막으로 앱 내에서 웹을 여는 방식, SFSafariViewController 이다.

앱에서 SFSafariViewController 를 불러서 Safari 에서 사용하는 기능들을 전부 사용할 수 있다.

(ex. 뒤로 가기, 앞으로 가기, 공유하기 등 / 단, URL 입력은 불가능)

 

그리고 아이폰의 Safari 와 쿠키 정보들을 공유할 수 있다. 그러나 이 정보들은 앱에서는 사용할 수 없다.

단지 보여주고 SFSafariViewController 내에서만 활용된다. 앱 내에서 개인적으로 사용은 불가능하다.

 

또한 Delegate 를 이용해 SFSafariViewController 에서 어떤 이벤트가 들어왔을 때, 전달하는 것도 가능하다.

import SafariServices

@IBAction func openSafariViewController(_ sender: Any) {
    guard let appleUrl = URL(string: "https://www.apple.com")   else { return }

    let safariViewController = SFSafariViewController(url: appleUrl)
    safariViewController.delegate = self
    safariViewController.modalPresentationStyle = .automatic
    self.present(safariViewController, animated: true, completion: nil)
}

extension ViewController: SFSafariViewControllerDelegate {}

 

쿠키 관리를 수동으로 해주어야 하는 WKWebView 와 다르게 SFSafariViewControlller 에서

쿠키는 Safari 와 SFSafariViewController 간에 공유되므로 사용자 세션과 환경 설정이 둘 사이에 유지된다.

 

이 외에도 아래와 같은 이점들이 있다.

• 친숙한 Safari 인터페이스 (수동으로 URL 을 입력할 수는 없음)
• https를 사용해 페이지를 안전하게 로드할 때 잠금 아이콘 표시함
• 콘텐츠 차단 기능 제공함 (소프트웨어, 명시적 콘텐츠, 광고 등 추적하지 못하도록 함)
• 자동 완성 및 쿠키 (SFSafariViewController 와의 상호작용은 앱에서 볼 수 없음)

 

 

 

---

 

 

 

현 프로젝트에서는 WKWebView / SFSafariViewController 방식 둘 다 차용하고 있는데,

둘의 특성을 생각해보았을 때, 현재 앱에서 새 창을 띄워보여줄 때

커스텀이 필요한 부분이 크게 보이지 않아서 SFSafariViewController 만으로도 충분할 것 같다는 생각이 든다.

아무튼 만들어져 있는 범위 내에서 우선 해결책을 찾아내야 하니

쿠키 공유 관련해서 to be continued . . 

 

 

 

 

 

© 참고

https://dongminyoon.tistory.com/57 (iOS / 앱에서 웹 보여주기)

https://zeddios.tistory.com/332 (UIWebView 와 WKWebView 의 차이)

https://zeddios.tistory.com/375 (SFSafariViewController 의 이점들)

[iOS] 앱에서 Web 보여주기 (WKWebView, SFSafariViewController, Safari 열기)