Webkit with SwiftUI

I wanted to use Webkit with SwiftUI.

However, it is not written in the tutorial.

I am a beginner and do not know how to do it.

So please tell me.

Replies

There's a dedicated topic area for SwiftUI in the dev forums and you should better post there.


You can find some articles searching with "Webkit with SwiftUI".

An example in the dev forums:

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


But as far as I checked, all of the ariticles are so primitive rather than practical. I mean, there are not enough info about how to use WKWebView with SwiftUI in some practical scenario found in actual apps.


SwiftUI is relatively a young framework and even experienced programmers are struggling on it.

If you are ready to explore SwiftUI with them, the article above can be a good starting point.


If you really are a beginner and wanting a c&p-ready code, I recommend you to work with Storyboard.

There are many tutorials and guidances and code examples about WKWebView with Storyboard all over the web.

While OOPer is largely correct, I've been working through this on my own. I'll throw my code down below, hopefully it helps you out.


I'm assuming some basic knowledge of both SwiftUI and WebKit here. If you need to know how an individual part works you'll want to look up tutorials on each of these things. The example includes how to load a webpage from url (including an extension to WKWebView to make page loading easier) and how to get key-value observing working, which was a particular issue I had personally.

This code represents a stand alone View, so you can call it from any other View just like you would anything in SwiftUI. For more detail on how to implement this View with your own UI elements I recommend you check out this video: https://youtu.be/5xvvfHNdB5c


//
//  WebView.swift
//
//  Created by Ryan Anderson on 9/23/19.
//  Copyright © 2019 Ryan Anderson. All rights reserved.
//

import SwiftUI
import WebKit

// Small class to hold variables that we'll use in the View body
class observable: ObservableObject {
    @Published var observation:NSKeyValueObservation?
    @Published var loggedIn = false
}

// UIViewRepresentable, wraps UIKit views for use with SwiftUI
struct WebView: UIViewRepresentable {
    var pageURL:String     // Page to load
    @ObservedObject var observe = observable()     // Variables
    
    func makeUIView(context: Context) -> WKWebView {
        return WKWebView() // Just make a new WKWebView, we don't need to do anything else here.
    }
    
    func updateUIView(_ uiView: WKWebView, context: Context) {
          // Set up our key-value observer - we're checking for WKWebView.title changes here 
          // which indicates a new page has loaded.
        observe.observation = uiView.observe(\WKWebView.title, options: .new) { view, change in
            if let title = view.title {
                observe.loggedIn = true     // We loaded the page
                print("Page loaded: \(title)")
            }
        }
        uiView.load(pageURL)     // Send the command to WKWebView to load our page
    }
}

struct WebView_Previews: PreviewProvider {
    static var previews: some View {
        WebView(pageURL: "https://apple.com")
    }
}

// Extension for WKWebView so we can just pass a URL string to .load() instead of all the boilerplate
extension WKWebView {
    func load(_ urlString: String) {
        if let url = URL(string: urlString) {
            let request = URLRequest(url: url)
            load(request)
        }
    }
}

how can we enable webview gestures?


wkWebView.allowsBackForwardNavigationGestures = true does not appear to work.

You can follow this tutorial --> SwiftUI: Mastering WebView