WKWebview Link Preview (Responding to Force Touch Actions, Peek and Pop)

이번주는 그냥 뭐할까 생각하다가 문득 생겨난 기능 해보려고 합니다.

 

바로 아래 사진의 기능입니다. 포스터치로 링크 내용을 팝업 형식으로 볼 수 있는 기능입니다.

 

 

 

평소에 커뮤니티 사이트를 돌아다니면서 사용하고 있는데요 실제로 어떻게 동작을 하는지 보겠습니다.

 

위 기능은 WKWebview에서 제공하는 기능이며 iOS 10.0 이상 버전에서 사용이 가능합니다. 

자료를 찾는 과정에서 정확한 명칭을 몰라서 고생을 했는데 그냥 "Link Preview" 라고 하도록 하겠습니다.

 

우선 프로젝트를 생성을 합니다. 저는 "WKWebviewLinkPreview"로 생성을 했습니다.

 

"WKWebview"를 사용하기 위해서는 "WebKit" Library를 import 합니다.

 

 

 

import WebKit

 

 

 

웹뷰를 위한 "WKWebView" 변수를 선언합니다.

 

 

 

var webView: WKWebView!

 

 

 

"WKUIDelegate" 의 함수들을 작성하기 위한 extension 을 작성합니다. 

이 부분은 클래스가 모두 끝나고 작성을 해야 합니다.

 

 

 

 

extension ViewController : WKUIDelegate {

 

}

 

 

만약 위의 방법이 마음에 안든다면 아래와 같이 클래스 선언부에서 상속을 받고 클래스 안에서 "WKUIDelegate" 의 함수들을 작성해도 상관은 없습니다.

 

 

 

class ViewController: UIViewController, WKUIDelegate {

 

}

 

 

 

loadView() 부분에서 웹뷰를 생성합니다.

아래 내용중에 "webView.allowsLinkPreview = true" 부분이 있는데요. 힘들여 작성을 하지 않아도 됩니다.

왜냐면 "allowsLinkPreview는 기본값이 "true" 이기 때문입니다.

 

 

override func loadView() {

    let webConfiguration = WKWebViewConfiguration()

    webView = WKWebView(frame: .zero, configuration: webConfiguration)

    webView.uiDelegate = self

 

    webView.allowsLinkPreview = true

    view = webView

 

}

 

 

 

그리고 위에서 생성한 웹뷰에 특정 URL을 로드 합니다.

 

 

override func viewDidLoad() {

    super.viewDidLoad()

        

    let myURL = URL(string:"https://www.apple.com")

    let myRequest = URLRequest(url: myURL!)

    webView.load(myRequest)

 

}

 

 

 

프로젝트를 실행 시키면 다음과 같이 애플 사이트가 이쁘진 않지만 나옵니다.

 

 

 

이제 기본 작업이 끝났습니다. 이제 본격적으로 Link Preview 를 위한 작업을 하도록 하겠습니다.

 

 

WKUIDelegate 함수 작성.

 

Link Preview 기능을 적용 하려면 애플에서 제공하는 3가지 함수를 작성하면 됩니다. 

 

1. 첫번째 함수는 Force Touch 액션을 받아서 실행을 할지 안 할지 여부를 반환합니다. 파라미터의 "WKPreviewElementInfo"에는 linkURL이 있습니다. 이 링크 URL은 선택되어진 링크 "a" 테그의 "href"의 속성 값이 넘어 옵니다. 그래서 이 링크 값을 확인해서  Link Preview 기능을 적용 여부를 판단 하시면 될 것 같습니다.

 

 

func webView(_ webView: WKWebView, shouldPreviewElement elementInfo: WKPreviewElementInfo) -> Bool {

    return true

 

}

 

 

 

2. 두번째는 위함수에서 Link Preview 기능을 적용 한다고 했을때 미리보기를 보여주는 뷰를 생성하는 부분입니다. 

"PreviewViewController" 부분은 아래 부분에서 설명하겠습니다.

이 미리보기 뷰는 이글의 맨 처음에 나오는 뷰를 생성해 주는 부분입니다.

 

 

func webView(_ webView: WKWebView, previewingViewControllerForElement elementInfo: WKPreviewElementInfo, defaultActions previewActions: [WKPreviewActionItem]) -> UIViewController? {

        

    let storyboard = UIStoryboard(name: "Main", bundle: nil)

        

    let viewController: PreviewViewController = storyboard.instantiateViewController(withIdentifier: "PreviewViewController") as! PreviewViewController

    viewController.path = elementInfo.linkURL?.absoluteString

        

    return viewController

        

 

}

 

 

 

3. 세번재는 미리보기 화면에서 한번더 Force Touch가 되면 호출이 됩니다.

이 함수에서는 위 함수에서 생성된 ViewController가 넘어오고 이 뷰를 present 해주게 됩니다. 

미리 보기 하다가 큰화면으로 넘어가는데 이 부분이 그런 동작을 합니다.

 

 

func webView(_ webView: WKWebView, commitPreviewingViewController previewingViewController: UIViewController) {

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

 

}

 

 

 

PreviewViewController 상세 내용입니다.

이 부분에서는 ViewController.swift 부분과 동일하게 웹뷰를 생성하고 넘어온 "path"를 확인해서 웹뷰를 로딩합니다. 

 

 

import UIKit

import WebKit

 

class PreviewViewController: UIViewController {

 

    var path: String?

    var webView: WKWebView!

    

    override func loadView() {

        let webConfiguration = WKWebViewConfiguration()

        webView = WKWebView(frame: .zero, configuration: webConfiguration)

        view = webView

    }

    

    override func viewDidLoad() {

        super.viewDidLoad()

        

        guard (path != nil) else {

            return

        }

        

        let myRequest = URLRequest(url: URL(string: path!)!)

        webView.load(myRequest)

    }

    

 

}

 

 

 

이상 Force Touch Action? Link Preview?,  Peek and Pop? 이라고 하는 웹 링크 미리보기에 관한 내용입니다.

 

아래 링크들은 위 내용에 참고한 내용 들입니다.

 

즐코딩 하세요~

 

WKWebviewLinkPreview.zip

다운로드

 

https://developer.apple.com/documentation/webkit/wkwebview

https://developer.apple.com/documentation/webkit/wkwebview/1415000-allowslinkpreview

https://developer.apple.com/documentation/webkit/wkuidelegate?changes=latest_minor

https://webkit.org/blog/7016/ios-10-link-preview-api-in-wkwebview/