2023/8/18

【Swift UI】WKWebViewクラスでWebページを表示！WKNavigationDelegateの実装

この記事からわかること

Swift UIでWebサイトをiOSアプリから開く方法
WKWebViewクラスとは？
WKNavigationDelegateなどのデリゲートの実装

index

[open]

Swift UIではWebページを表示させるViewが無い
Swift UIでWKWebViewを使用する
UIViewRepresentable
target="_blank"のリンクを開く方法
表示しているWebページのURLやタイトルなどを取得する方法

＼アプリをリリースしました／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

環境

Xcode：16.0
iOS：18.0
Swift：5.9
macOS：Sonoma 14.6.1

Swift UIではWebページを表示させるViewが無い

現在Swift UIのみを使用してWebページを表示させるViewが存在しない状況です。Swift UIで実装するにはUIKitのWKWebViewクラスやSFSafariViewControllerをUIViewRepresentableを使用して実装します。今回はWKWebViewクラスで実装していきます。

WKWebViewクラスとUIViewRepresentableの詳細な使用方法は以下の記事を参考にしてください。

Swift UIでWKWebViewを使用する

まずはWKWebViewをSwift UIで表示できるようにUIViewRepresentableに準拠した独自のクラスUIWebViewを定義していきます。ここではUIViewRepresentableの使い方を知っていれば特に変わったことをしていません。ついでにリロードなどができるようにしておきました。

UIWebView.swift
import SwiftUI
import WebKit

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.uiDelegate = context.coordinator
        webView.load(request)
    }
}

extension UIWebView {
    public func reload(){
        webView.reload()
    }
    
    public func goBack(){
        webView.goBack()
    }
    
    public func goForward(){
        webView.goForward()
    }
}

UI側は以下のようになります。

ContentView.swift
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)でエラーを取得できるようになったりします。

UIWebView.swift
extension UIWebView {
    func makeCoordinator() -> Coordinator {
            Coordinator(self)
    }
    
    class Coordinator: NSObject, WKNavigationDelegate, WKUIDelegate {
        
        var webView: UIWebView
        init(_ webView: UIWebView){
            self.webView = webView
        }
        func webView(_ webView: WKWebView, didFailProvisionalNavigation navigation: WKNavigation!, withError error: Error) {
            print("ERROR：", error)
        }
    }
}

最後にupdateUIView内でnavigationDelegateにCoordinatorをセットすれば完了です。

UIWebView.swift
func updateUIView(_ webView: WKWebView, context: Context) {
    let request = URLRequest(url: url)
    // 以下をコメント解除
    webView.navigationDelegate = context.coordinator
    webView.uiDelegate = context.coordinator
    webView.load(request)
}