WKWebView 및 웹뷰 관련 정리

Minsang Kang·2024년 10월 9일
1

iOS Develop

목록 보기
4/4

서론

iOS 앱에서 웹을 표시하는 경우, 또는 웹뷰 앱을 만드는 경우 WKWebView를 통해 구현합니다.
iOS와 웹뷰간의 소통은 브릿지, javaScript 실행, scheme 수신 등으로 동작되며
웹뷰 로드, 새로고침, cookie 설정, post body 등을 설정할 수 있습니다.

웹뷰를 사용하기 위해 핵심적인 클래스이므로 좀 더 명확하게 분석해보고자 합니다.

WKWebView

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

Overview

  • 상호작용 가능한 web content를 표시하기 위한 object 라고 합니다.
  • 기존 iOS 8 이전의 UIWebView 와 macOS 10.10 이전의 WebView 클래스를 대신합니다.
  • WKWebViewConfiguration 객체를 사용하여 웹 콘텐츠에 대한 기본 설정을 사용자가 정의합니다.
  • URLRequest 를 사용하여 웹 콘텐츠를 로드하거나 HTML 문자열에서 직업 콘텐츠를 로드합니다.

Sample code

import UIKit
import WebKit // WKWebView를 사용하기 위한 프레임워크


class ViewController: UIViewController, WKUIDelegate {
    
    var webView: WKWebView! // 웹뷰가 표시되는 객체
    
    override func loadView() {
        let webConfiguration = WKWebViewConfiguration() // configuration으로 기본 설정 정의
        webView = WKWebView(frame: .zero, configuration: webConfiguration)
        webView.uiDelegate = self
        view = webView
    }


    override func viewDidLoad() {
        super.viewDidLoad()
        
        let myURL = URL(string:"https://www.apple.com")
        let myRequest = URLRequest(url: myURL!) // 웹뷰 로드를 위한 URLRequest 생성
        webView.load(myRequest) // load 를 통해 웹뷰 로드, 표시
    }
}

Manage the navigation

  • WKWebView는 앞, 뒤로 이동하는 등 웹 페이지 간의 탐색 기능을 제공합니다.
  • WKNavigationDelegate 프로토콜을 통해 delegate로 탐색 동작을 제어할 수 있습니다.
  • 또는, 아래 메소드와 프로퍼티들을 토대로 탐색 기능을 구현할 수 있습니다. (UIButton 에 해당 메소드를 연결)

Sharing

  • UIActivityViewController 룰 사용하여 웹뷰 콘텐츠를 공유할 수 있습니다.
    • activityItems 배열에 WKWebView 인스턴스를 포함하여 공유할 수 있습니다.
    • 이를 통해 홈 화면에 현재 웹페이지를 추가할 수 있습니다.

init

  • init(frame: CGRect, configuration: WKWebViewConfiguration)

Functions

load

loading process 관리

JavaScript 실행

확대 설정

Properties

load

  • var isLoading: Bool
    • 현재 content를 loading 하고있는지 여부
  • var estimatedProgress: Double
    • 현재 탐색의 로드완료여부 추정치 값 (로딩 프로그래스 값, 로드 시작 시 0.0, 완료시 1.0)
  • var configuration: WKWebViewConfiguration
    • web view에 대한 세부 구성 정보를 포함하는 객체
  • var uiDelegate: WKUIDelegate?
    • 메뉴나 패널과 같은 네이티브 UI 요소를 웹 뷰 상호작용에 통합하는데 사용하는 객체
  • var navigationDelegate: WKNavigationDelegate?
    • web view의 navigation 동작을 관리하는데 사용하는 객체

웹 페이지간 탐색

뷰의 데이터

  • var url: URL?
    • 현재 webPage의 URL
  • var hasOnlySecureContent: Bool
    • 모든 리소스가 안전하게 암호화된 connections를 통해 로드되었는지 여부
  • var themeColor: UIColor?
    • 웹 페이지의 첫 번째 유효한 메타 태그에서 가져오는 테마 색상
  • var underPageBackgroundColor: UIColor!
    • 사용자가 페이지 경계를 넘어 스크롤할 때 보이는 웹 뷰가 표시하는 색상

Tip

  • 웹 콘텐츠에 나타나는 전화번호를 자동으로 Phone 링크로 변환합니다. (탭하면 해당 전화번호로 전화가 걸림)

WKWebViewConfiguration

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

URLRequest

https://developer.apple.com/documentation/foundation/urlrequest

WKNavigationDelegate

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

WKUIDelegate

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

profile
 iOS Developer

0개의 댓글

관련 채용 정보