iOS/Xcode 14X, Swift5.7.2 WKWebView

Language/iOS,AOS

iOS/Xcode 14X, Swift5.7.2 WKWebView - 1. 기본 (SwiftUI)

건담아빠 2022. 12. 19. 11:44

Xcode 14.2 기반으로 작성

1. 프로젝트 생성

Create a new Xcode project

App 선택

구분	설명
Product Name	프로젝트 이름 (나중에 수정 가능)
Team
Organization Identifier	Bundle Identifier를 생성하는데 사용되는 prefix, 도메인을 뒤집어서 사용하는 것이 컨벤션
Interface
Language
Use Core Data
Include Tests

Team 선택 후 Accounts 설정이 가능하다.

저장할 결로를 선택 후 Create

Create Git repository on my Mac : Git으로 버전관리 할 생각이면 체크 -> git init이 기본적으로..

WKWebView

ios 8.0부터 가장 많이 사용되고 오래전에 나온 UIWebView 보다 성능이 좋다.

웹 페이지에서 할당하는 메모리는 앱과 별도의 쓰레드에서 관리하다.

Library 추가

프로젝트 설정 파일 -> General -> Frameworks, Libraries, and Embedded Content -> + 클릭

또는

프로젝트 설정 파일 -> Build Phases -> Link Binary With Libraries -> + 클릭

-> WebKit.framework 추가

프로젝트 설정 파일 -> General -> Frameworks, Libraries, and Embedded Content

프로젝트 설정 파일 -> Build Phases -> Link Binary With Libraries -> WebKit.framework

구현하기

ContentView: VIew

import SwiftUI

extension View {
    func toAnyView() -> AnyView {
        AnyView(self)
    }
}

struct ContentView: View {
    
    @State private var showLoading: Bool = false
    
    var body: some View {
        VStack {
            WebView(url: URL(string: "http://www.google.com")!, showLoading: $showLoading)
                .overlay(showLoading ? ProgressView("Loading...").toAnyView():
                            EmptyView().toAnyView())
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

WebView: UIViewRepresentable

//
//  WebView.swift
//  Swift5WKWebview
//
//  Created by 강덕준 on 12/29/22.
//

import Foundation
import SwiftUI
import WebKit

struct WebView: UIViewRepresentable {
    
    let url: URL
    @Binding var showLoading: Bool
    
    func makeUIView(context: Context) -> some UIView {
        let webView = WKWebView()
        webView.navigationDelegate = context.coordinator
        let request = URLRequest(url: url)
        webView.load(request)
        
        return webView
    }
    
    func updateUIView(_ uiView: UIViewType, context: Context) {
        
    }
    
    func makeCoordinator() -> WebViewCoordinator {
        WebViewCoordinator(didStart: {
            showLoading = true
        }, didFinish: {
            showLoading = false
        })
    }
}


// context.coordinator를 사용할 때마다 mk 탐색 위임을 수행할 것
// TODO. 이벤트 관리???
class WebViewCoordinator: NSObject, WKNavigationDelegate {
    
    var didStart: () -> Void
    var didFinish: () -> Void

    init(didStart: @escaping () -> Void, didFinish: @escaping () -> Void) {
        self.didStart = didStart
        self.didFinish = didFinish
    }
    
    // TODO. 권한 탐색을 시작될 때마다, 리소스를 로드하거나 완료할 떄마다 (다운로드가 시작될 떄마다)
    func webView(_ webView: WKWebView, didStartProvisionalNavigation navigation: WKNavigation!) {
        didStart()
    }
    
    // TODO. 웹 페이지가 완전히 다운로드 되고 다운로드가 완료될 때마다 (웹뷰 로딩 완료 시)
    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        didFinish()
    }
    
    // 웹뷰 로딩 실패 시
    func webView(_ webView: WKWebView, didFail navigation: WKNavigation!, withError error: Error) {
        print(error)
    }
}