วิธีการใช้งาน WKWebView ร่วมกับ SwiftUI

พัฒนาด้วย Xcode 12 Beta

SwiftUI นั้นไม่มีWebViewให้เราใช้งาน ดังนั้นเราจะใช้งาน WKWebView ซึ่งเป็นส่วนหนึ่งของ WebKit Framework เพื่อที่จะให้เราสามารถแสดง WebView บน SwiftUI Application ของเราได้

สร้างไฟล์

เริ่มจากการสร้างSwift Fileขึ้นมาใหม่ ตั้งชื่ออะไรก็ได้ตามที่ต้องการ โดยในตัวอย่างคือชื่อWebView

สร้างWebView

เริ่มแรกให้ทำการ Import SwiftUIและWebKit Framework จากนั้นสร้างStructโดยใช้ UIViewPresentable Protocol เพื่อที่จะสร้าง UIView Object ใช้ร่วมกับ SwiftUI กำหนด

UIViewPresentable มี require function 2 ตัวคือ

1. updateUIView: อัพเดตviewด้วย SwiftUI

กำหนดuiView เป็นWKWebViewโดยเราจะปล่อยว่างไว้ก่อน ยังไม่ต้องimplementอะไร

func updateUIView(_ uiView: WKWebView, context: Context) {
}

2. makeUIView: สร้าง view object และกำหนดค่าเริ่มต้น

ให้retrun UIViewType ที่เราต้องการ โดยเราจะ return WKWebView

func makeUIView(context: Context) -> WKWebView {
    let webView = WKWebView()
    return webView
}

การเรียกใช้งาน

1. สร้าง property เพื่อรับค่า url string มาแสดงที่WebView

var url: String

2.สร้างURL Request เพื่อเรียกใช้งานWebView

let request = URLRequest(url: URL(string: url)!)

3. ใช้WebViewload request ที่สร้าง

webView.load(request)

Complete Code:

การแสดงผล

ให้เรามาเรียกใช้งานWebViewที่ไฟล์ ContentView.swift เพื่อที่เราจะแสดง WebView โดยเรียกใช้ WebView ที่ContentView ที่ body กำหนดค่าชื่อwebsite ที่เราต้องการแสดง เพียงเท่านี้เราก็จะสามารถเปิดWebView ด้วย SwiftUI

ความสามารถของ SwiftUI เราสามารถ Live Preview บนโปรแกรม Xcode ได้เลย

Source Code

https://github.com/thopatomphong/SwiftUIWebViewExample

Reference

https://developer.apple.com/documentation/swiftui/uiviewrepresentable