【Swift UI】WKWebViewクラスでWebページを表示!WKNavigationDelegateの実装
この記事からわかること
- Swift UIでWebサイトをiOSアプリから開く方法
- WKWebViewクラスとは?
- WKNavigationDelegateなどのデリゲートの実装
index
[open]
\ アプリをリリースしました /
友達や家族の誕生日をメモ!通知も届く-みんなの誕生日-
posted withアプリーチ
Swift UIではWebページを表示させるViewが無い
現在Swift UIのみを使用してWebページを表示させるViewが存在しない状況です。Swift UIで実装するにはUIKitのWKWebView
クラスやSFSafariViewController
をUIViewRepresentable
を使用して実装します。今回はWKWebView
クラスで実装していきます。
WKWebView
クラスとUIViewRepresentable
の詳細な使用方法は以下の記事を参考にしてください。
おすすめ記事
【Swift/UIKit】WKWebViewクラスの使い方!サイトをアプリから開く方法
Swift UIでWKWebViewを使用する
まずはWKWebViewをSwift UIで表示できるようにUIWebView
を定義していきます。ここでは
struct UIWebView: UIViewRepresentable {
private let webView = WKWebView()
let url: URL
func makeUIView(context: Context) -> WKWebView {
return webView
}
func updateUIView(_ webView: WKWebView, context: Context) {
let request = URLRequest(url: url)
// あとでコメントを解除
// webView.navigationDelegate = context.coordinator
webView.load(request)
}
}
extension UIWebView {
public func reload(){
webView.reload()
}
public func goBack(){
webView.goBack()
}
public func goForward(){
webView.goForward()
}
}
UI側は以下のようになります。
struct ContentView: View {
private let uiWebView = UIWebView(url: URL(string: "https://appdev-room.com/")!)
private func reload() {
uiWebView.reload()
}
private func goBack(){
uiWebView.goBack()
}
private func goForward(){
uiWebView.goForward()
}
var body: some View {
VStack{
uiWebView
Button {
reload()
} label: {
Text("reload")
}
Button {
goBack()
} label: {
Text("goBack")
}
Button {
goForward()
} label: {
Text("goForward")
}
}
}
}
UIViewRepresentable
続いて接続エラーなどが起きた際にエラー内容を取得できるようにUIViewRepresentable
を準拠させていきたいと思います。準拠させるにはCoordinator
を使用します。デリゲートメソッドwebView(_:didFailProvisionalNavigation,withError)
でエラーを取得できます。
extension UIWebView {
func makeCoordinator() -> Coordinator {
Coordinator(self)
}
class Coordinator:NSObject,WKNavigationDelegate {
var webView: UIWebView
init(_ webView: UIWebView){
self.webView = webView
}
func webView(_ webView: WKWebView, didFailProvisionalNavigation navigation: WKNavigation!, withError error: Error) {
print("------")
print(error)
}
}
}
最後にupdateUIView
内でnavigationDelegate
にCoordinatorをセットすれば完了です。
func updateUIView(_ webView: WKWebView, context: Context) {
let request = URLRequest(url: url)
// 以下をコメント解除
webView.navigationDelegate = context.coordinator
webView.load(request)
}
target="_blank"のリンクを開く方法
WKWebViewではデフォルトではtarget="_blank"
のリンクを開くことができません。開けるようにする方法は以下の記事を参考にしてください。
表示しているWebページのURLやタイトルなどを取得する方法
表示されているWebページのURLやタイトルなどを取得することも可能です。実装方法は以下の記事を参考にしてください。
まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。
ご覧いただきありがとうございました。