SwiftUIでWebViewを使う

画像出典：Appleサイトよりスクリーンショット

開発

タグ SwiftUI WebView

SwiftUIでWebViewを使ってみました。 SwiftUI専用のWebViewはまだないようで、WebKitのWKWebViewや、SafariServiceのSFSafariViewControllerを使う必要があります。

WKWebView

WKWebViewを使うには、まずUIViewRepresentableを使ってWKWebViewを表示するViewを作成します。

import SwiftUI
import WebKit

struct WebView : UIViewRepresentable {
    var url: URL

    func makeUIView(context: Context) -> WKWebView  {
        return WKWebView(frame: .zero)
    }
    func updateUIView(_ uiView: WKWebView, context: Context) {
        let req = URLRequest(url: url)
        uiView.load(req)
    }
}

#if DEBUG
struct WebView_Previews: PreviewProvider {
    static var previews: some View {
        WebView(url: URL(string: "https://apple.com")!)
    }
}
#endif

このWebViewを使うと、WebViewを表示することができます。

import SwiftUI

struct MyView : View {
    var url: URL
    var body: some View {
        WebView(url: url)
    }
}

#if DEBUG
struct MyView_Previews : PreviewProvider {
    static var previews: some View {
        MyView(url: URL(string: "https://apple.com")!)
    }
}
#endif

SFSafariViewController

SFSafariViewControllerもWKWebViewと同様にUIViewControllerRepresentableを使ってブリッジする必要があります。

import SwiftUI
import SafariService

struct SafariView: UIViewControllerRepresentable {
    var url: URL

    func makeUIViewController(context: UIViewControllerRepresentableContext<SafariView>) -> SFSafariViewController {
        return SFSafariViewController(url: url)
    }

    func updateUIViewController(_ uiViewController: SFSafariViewController, context: UIViewControllerRepresentableContext<SafariView>) { }
}

#if DEBUG
struct SafariView_Previews: PreviewProvider {
    static var previews: some View {
        SafariView(url: URL(string: "https://apple.com")!)
    }
}
#endif

今のところモーダルで表示する場合は問題無いようですが、プッシュで表示すると、ナビゲーションバーが2重で表示される問題があるようです。

How do I use SFSafariViewController with SwiftUI?

オススメ記事

MasamichiUeta

ソフトウェアエンジニアです。ソフトウェアエンジニアリング、アプリ開発、趣味などについて書いてます

カテゴリー
新着記事
Twitter