iOS ) App에서 Web페이지를 여는 방법 정리

안녕하세요 :) Zedd입니다.

<WKWebView에 Back/Forward Button만들기>글을 쓰고..... 어케어케하다가 SFSafariViewController를 하게 됐는데......뒤로가기도있고....앞으로가는것도 있고..공유도 있음

그래서 급하게 <WKWebView에 Back/Forward Button만들기>글에 

SFSafariViewController쓰라고 추가.

순간 아 내가 왜 WKWebView써가면서 일일이 뒤로가기 / 앞으로가기를 다 만들고 그랬나라는 생각이 잠깐 들었지만......

일단 뭔 차이가 있긴 있겠죠????????????!??!?!?!?

차이가 있어야만합니다...그래서 WKWebView랑 SFSafariViewController의 차이가 무엇인지!!! 알아볼려다가 그럼 iOS에서 WebView를 보여주는 방식이 그럼 총 3가지가 되는거잖아요? 

1. 아예 사파리앱을 열어줌

2. WKWebView로 열어줌(UIWebView는 Deprecate됐으니 언급안할게요)

3. SFSafariViewController로 열어줌

그럼 일단 각각 차이점이 있을텐데...그 차이점이 궁금해졌습니다. 제목을 진짜 어떻게 지어야하지...?하고 고민하다가 저렇게 지었는데..음..좋은제목있으면 댓글로 달아주세요 :) 

그 전에 UIWebView와 WKWebView의 차이점을 알고싶다면 <UIWebView와 WKWebView의 차이>를 읽어주세요 :)

 App에서 Web페이지를 여는 방법

---

자..위에서 언급했다시피 App에서 Web페이지를 보고싶으면!!!!!!! 3가지 방법이 있습니다. 

하나씩 뭔지 보고, 어떻게 구현하는지 보겠습니다.

1. 아예 사파리앱을 열어줌

그러니까 내 앱 "안에서" 열어주는게 아니라 사파리앱을 앱에서 열어주는 것이죠.

@IBAction func openSafariAction(_ sender: Any) {

 guard let url = URL(string: "http://zeddios.tistory.com"), UIApplication.shared.canOpenURL(url) else { return }
 UIApplication.shared.open(url, options: [:], completionHandler: nil)

}

원래 앱으로 돌아가려면? 

저걸 눌러서 원래 앱으로 돌아가야 하죠.

2. WKWebView사용하기

import WebKit

guard let url = URL(string:"https://zeddios.tistory.com") else {return}

let request = URLRequest(url: url)

webView?.load(request)

WKWebView는 앱 안에서 보여주죠? 스레드는 앱과 별도로 돌아가긴 하지만요 :)

그리고 WKWebView는 info.plist에

<key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
    </dict>

NSAppTransportSecurity Key를 추가해줘야 합니다.

3. SFSafariViewController로 열어줌

import SafariServices

@IBAction func oepnSFSafariViewControllerAction(_ sender: Any) {

    guard let url = URL(string: "https://zeddios.tistory.com") else { return }

    let safariViewController = SFSafariViewController(url: url)

    present(safariViewController, animated: true, completion: nil)

 }

3개가 미묘하게 다른것을 볼 수 있죠.

먼저 각자의 차이점이라기 보다는...각각이 할 수 있는 일이 다른 것 같습니다.

일단 1번은 아예 앱을 잠시 떠나서 Safari로 보여주죠?

일단 이거의 장점을..엄청 찾아봤는데....잘 안나오네요.....

제가 생각하는 장점이자 단점은 앱과 따로 실행된다는것..?

그렇기 때문에, 사용자는 Safari의 모든 기능을 사용할 수 있지만, App을 다시 방문하지 못할 수도 있다고 합니다. 또한 iOS 9 이전에는 reader view나 자동완성을 위한 KeyChain기능을 사용하려면 App에서 이렇게 Safari를 열어줬다고 합니다. (지금은 SFSafariViewController로 가능해짐)

혹시 이거말고 Safari 앱으로 여는 것에, 특별한 장점이 있다면 알려주세요 :)

2번째! WKWebView.

WKWebView의 성능에 대해서는 <UIWebView와 WKWebView의 차이>글에서 설명했었죠!

WKWebView는 웹 콘텐츠를 수정하거나 조작해야하는 경우 가장 높은 유연성을 제공한다고 합니다.

3번째! SFSafariViewController.

이걸 먼저 넣을 걸 그랬나 ㅠㅠ 

SFSafariViewController를 사용하는 것은 Safari앱을 여는 것과 똑같은 효과를 낼 수 있어요.

1. 친숙한 Safari 인터페이스 : Safari처럼 맨위에는 웹 주소 텍스트 필드가 있으며, 아래에는 뒤로가기 / 앞으로가기 버튼과 공유버튼이 있습니다. Safari 아이콘을 누르면 Safari앱으로 현재 웹사이트가 열립니다.

(참고 : 웹주소 텍스트 필드는 편집 할 수 없다고 해요 :) 사용자는 링크를 누르거나 탐색버튼을 사용하여 탐색할 수는 있지만 수동으로 URL을 입력할 수 는 없습니다.)

(이렇게 고정임)

2. SFSafariViewController는 https를 사용하여 페이지를 안전하게 로드 할 때 잠금 아이콘을 표시합니다. 또한 피싱이 의심되는 페이지를 로드 할 때 경고 메시지를 표시합니다. 이렇게하면 사용자는 자신이보고있는 콘텐츠에 대해 더 큰 인식과 자신감을 갖게됩니다.

3. 콘텐츠 차단

iOS 9의 새로운 기능인 콘텐츠 차단 기능은 Safari에서와 마찬가지로 SFSafariViewController에서 작동합니다. 콘텐츠 차단기는 소프트웨어, 명시 적 콘텐츠, 광고 등을 추적하지 못하도록하는 옵션을 사용자에게 제공합니다. 이렇게하면 더 빠르고 안전하게 검색 할 수 있습니다.

4. 자동 완성 및 쿠키

SFSafariViewController를 사용하면 사용자가 iCloud 키 체인에서 중요한 정보와 자격 증명을 안전하게 자동 완성 할 수 있습니다. 여기에는 비밀번호, 신용 카드 번호 및 연락처 정보 입력이 포함됩니다. 이는 이전에는 앱에서 불가능했던 수준의 보안과 편의성을 제공합니다. 또한 쿠키는 Safari와 SFSafariViewController간에 공유되므로 사용자 세션과 환경 설정이 둘 사이에 유지됩니다. 예를 들어 앱이 Twitter 나 Facebook에 액세스하도록 승인하면 사용자가 이미 Safari에 로그인 한 상태이거나 비밀번호가 iCloud Keychain에 저장되어있는 경우 간소화 된 환경이됩니다.

앱을 통해 사용자가 인터넷의 어느 곳에서나 웹 사이트를 볼 수있게하는 경우 SFSafariViewController 클래스를 사용하세요.

SFSafariViewController 클래스는 웹 검색을위한 표준 인터페이스를 제공합니다. 보기 컨트롤러에는 리더, 자동 채우기, 사기성 웹 사이트 감지 및 콘텐츠 차단과 같은 Safari 기능이 포함되어 있습니다. Safari와 쿠키 및 기타 웹 사이트 데이터를 공유합니다. 

하지만 SFSafariViewController에도 단점이 있으니...

사용자의 활동 및 SFSafariViewController와의 상호 작용은 앱에서 볼 수 없다고 합니다. 또한, 인터넷 사용 기록 또는 웹 사이트 데이터에 액세스 할 수 없다고 해요.

위에서 말한 기능은 SFSafariViewController에서 되는거니 WKWebView에서는 안되겠죠? 

본인이 하고싶은 기능에 따라 WKWebView로 할지 SFSafariViewController로 할지 선택하면 될 것 같아요.

출처 : http://developer.outbrain.com/ios-best-practices-for-opening-a-web-page-within-an-app/

위 링크에서 한눈에 볼 수 있는 표가 있길래..UIWebView는 뭐........딱히 안봐도 될 것 같습니다. WKWebView와 SFSafariViewController가 어떤점이 다른지 집중해서 봐주세요 :)

나는 좀 customize behavior를 Web페이지 안에서 하고싶다!! => WKWebView

나는 뭐..사용자가 안전하게...Safari의 모든 기능을 앱 내에서 즐기면서 Safari와 쿠키를 공유하게 하고싶다 => SFSafariViewController

(SFSafariViewController사용하면 뒤로가기 / 앞으로가기 / 공유버튼 이런거 안만들어도됨..다 만들어져있어요. )

WKWebView는 WebKit을 import하고, SFSafariViewController는 SafariServices를 import해야한다는 것도 잊지마세용

흠..제 앱 같은경우에는 딱히 customize behavior가 없었으니 SFSafariViewController를 사용하는게 맞았던 걸까요 ㅎㅎ...

아무튼 오늘도 도움이 되었길 바랍니다 :) 오늘 너무 추운데 감기조심하세요 ☃️

출처 :

http://developer.outbrain.com/ios-best-practices-for-opening-a-web-page-within-an-app/

https://www.captechconsulting.com/blogs/ios-9-tutorial-series-sfsafariviewcontroller

https://stackoverflow.com/questions/41541449/what-is-the-main-advantage-of-using-sfsafariviewcontroller

https://code.tutsplus.com/tutorials/ios-9-getting-started-with-sfsafariviewcontroller--cms-24260