How do I implement a WebView (WebKit) in SwiftUI?

I just downloaded the new Xcode Beta and I like SwiftUI.

But how do I implement a WebView (WebKit) in SwiftUI?

Replies

ive tried to import webkit but i do not find webkit view in the elements...

You can wrap views with `UIViewRepresentable`:

//
//  WebView.swift
//  Todos
//
//  Created by Bradley Hilton on 6/5/19.
//  Copyright © 2019 Brad Hilton. All rights reserved.
//

import SwiftUI
import WebKit

struct WebView : UIViewRepresentable {
    
    let request: URLRequest
    
    func makeUIView(context: Context) -> WKWebView  {
        return WKWebView()
    }
    
    func updateUIView(_ uiView: WKWebView, context: Context) {
        uiView.load(request)
    }
    
}

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

Thanks this is good, but when I open a new WebView, the last loaded site remains until new url is loaded. Any clue to make it disappear?

How do you implement delegates?

we used to use extensions on the ViewController:


extension WebViewController: WKNavigationDelegate {

    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        track("didFinish")
        self.hideProgressView()
    }
    
    func webViewWebContentProcessDidTerminate(_ webView: WKWebView) {
        track("webViewWebContentProcessDidTerminate")
    }
    
    func webView(_ webView: WKWebView, didFail navigation: WKNavigation!, withError error: Error) {
        track("didFail")
        self.hideProgressView()
    }
}

hi, your code said

"Use of undeclared type 'UIViewRepresentable'"

"Use of undeclared type 'Context'"

"Use of undeclared type 'Context'"

"Return type of static property 'previews' requires that 'WebView' conform to 'View'".


I'm very confused. I don't know how to proceed? Any ideas?

subclass WKWebView and use that in your UIViewRepresentable, e.g. MyWKWebView. Implement the delegate methods on MyWKWebView as usual.


```

struct WebView : UIViewRepresentable {

let request: URLRequest

func makeUIView(context: Context) -> MyWkWebView {

return MyWkWebView()

}

func updateUIView(_ uiView: MyWkWebView, context: Context) {

uiView.load(request)

}

}


===

then


class MyWkWebView: WKWebView {


/*

// Only override draw() if you perform custom drawing.

// An empty implementation adversely affects performance during animation.

override func draw(_ rect: CGRect) {

// Drawing code

}

*/


}


extension MyWkWebView: WKNavigationDelegate {


func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {

// track("didFinish")

// self.hideProgressView()

}

func webViewWebContentProcessDidTerminate(_ webView: WKWebView) {

// track("webViewWebContentProcessDidTerminate")

}

func webView(_ webView: WKWebView, didFail navigation: WKNavigation!, withError error: Error) {

// track("didFail")

// self.hideProgressView()

}

}

Read this article, it shows a lot --> SwiftUI: Mastering WebView

//

//  DetailsView.swift

//  SwiftUI WebView

//

//  Created by Amoo .O. Faruk on 21/05/2022.

//

import SwiftUI

import WebKit

struct DetailsView: View {

    let url: String

    

    var body: some View {

        WebView(urlPath: url)

    }

}

struct WebView: UIViewRepresentable {

    var urlPath: String?

    func makeUIView(context: Context) -> WKWebView {

        return WKWebView()

    }

    

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

        if let response = urlPath {

            if let url = URL(string: response){

                let request = URLRequest(url: url)

                  uiView.load(request)

            }

        }

    }

}

struct DetailsView_Previews: PreviewProvider {

    static var previews: some View {

        DetailsView(url: "https://google.com")

    }

}