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

 

Xcode 14.2 기반으로 작성

1. 프로젝트 생성

Create a new Xcode project

Create a new Xcode project

 

App 선택

Choose a template for your new project > App 선택

 

Project setting

구분	설명
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

 

WebKit.framework

 

프로젝트 설정 파일 -> 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)
    }
}

 

완성

 

 

깃주소

https://github.com/dchkang83/Swift5WKWebview

GitHub - dchkang83/Swift5WKWebview: swift5 MKWebview Xcode14X

https://github.com/dchkang83/Swift5WKWebview/releases/tag/1.0

Release 1.0 · dchkang83/Swift5WKWebview

 

 

참조

https://devxoul.gitbooks.io/ios-with-swift-in-40-hours/content/Chapter-1/ios-project.html

첫 iOS 프로젝트 시작해보기 · 40시간만에 Swift로 iOS 앱 만들기

https://shanepark.tistory.com/181

아이폰 어플 만들기 01 - iOS 개발환경 세팅하기

https://jingyu.tistory.com/2

[iOS]WKWebView를 이용한 하이브리드 앱(Hybrid App) 제작하기

https://velog.io/@gnwjd309/iOS-WKWebView

[iOS] WKWebView로 웹뷰(WebView) 구현하기