How to Use WebView in SwiftUI - A Comprehensive Tutorial

July 14, 2023 · 4 min read

Full Stack Developer

How to Use WebView in SwiftUI

SwiftUI apps can embed trusted web content by wrapping WKWebView in a UIViewRepresentable. This tutorial now focuses on a production-safe WebView pattern: a small wrapper, navigation controls, loading and error state, and clear boundaries around external content.

Quick Answer

Use WKWebView through SwiftUI's UIViewRepresentable when an iOS app needs trusted web content inside a native screen. Keep the wrapper small, expose loading and error state, and handle navigation decisions through a coordinator instead of letting any URL load silently.

Apple's UIViewRepresentable and WKWebView docs are the baseline for this pattern. Use it for help centers, terms, checkout, OAuth handoff, and controlled content screens. Avoid it for complex native flows that need deep offline behavior, heavy gestures, or secure credential entry.

Production Checklist

Restrict allowed hosts before loading external URLs.
Show loading, error, and offline states.
Keep JavaScript injection minimal and auditable.
Use WKNavigationDelegate for route decisions and downloads.
Keep auth tokens out of query strings.
Test Dynamic Type, VoiceOver, dark mode, and back navigation.

Introduction

SwiftUI, Apple’s declarative UI framework, does not have a built-in WebView. However, SwiftUI allows you to integrate UIKit views, meaning we can use the WKWebView from the WebKit framework to create a WebView. Let’s learn how to do this.

Getting Started: Integrating WKWebView with SwiftUI

First, we need to create a SwiftUI View that represents a WKWebView. We can do this using the UIViewRepresentable protocol:

import SwiftUI
import WebKit

struct WebView: UIViewRepresentable {
    let url: URL

    func makeUIView(context: Context) -> WKWebView {
        let webView = WKWebView()
        webView.load(URLRequest(url: url))
        return webView
    }

    func updateUIView(_ uiView: WKWebView, context: Context) {
        // This space can be left blank
    }
}

This WebView struct takes a URL and creates a WKWebView that loads that URL.

Customizing the WebView

To customize our WebView, we can make use of the various delegate methods provided by WKWebView.

To track the loading progress of a webpage or handle navigation decisions, we can use the WKNavigationDelegate. Let’s update our WebView struct to include a Coordinator class that acts as the navigation delegate:

struct WebView: UIViewRepresentable {
    let url: URL

    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }

    func makeUIView(context: Context) -> WKWebView {
        let webView = WKWebView()
        webView.navigationDelegate = context.coordinator
        webView.load(URLRequest(url: url))
        return webView
    }

    func updateUIView(_ uiView: WKWebView, context: Context) {
        // This space can be left blank
    }

    class Coordinator: NSObject, WKNavigationDelegate {
        let parent: WebView

        init(_ parent: WebView) {
            self.parent = parent
        }

        func webView(_ webView: WKWebView, didStartProvisionalNavigation navigation: WKNavigation!) {
            print("Webview started loading.")
        }

        func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
            print("Webview finished loading.")
        }

        func webView(_ webView: WKWebView, didFail navigation: WKNavigation!, withError error: Error) {
            print("Webview failed with error: \(error.localizedDescription)")
        }
    }
}

Now, whenever a webpage starts loading, finishes loading, or fails to load, the corresponding message will be printed to the console.

Using the WebView in your SwiftUI App Using the WebView in your app is as simple as using any other SwiftUI View. Here’s an example:

struct ContentView: View {
    var body: some View {
        WebView(url: URL(string: "https://www.example.com")!)
    }
}

Wrapping Up

In this tutorial, we learned how to use a WebView in SwiftUI, and how to customize it to track webpage loading status. By leveraging the power of UIViewRepresentable, we can integrate virtually any UIKit view into our SwiftUI apps.

The code above shows the core wrapper pattern. Check Apple's current SwiftUI and WebKit APIs before copying it into a production app, because navigation, permissions, and delegate behavior can vary by product needs.

Conclusion

Now that you’ve mastered the basics of using a WebView in SwiftUI, you’re all set to include web content in your iOS applications more smoothly. This could include anything from loading websites to interacting with HTML interfaces directly within your application. Through the use of SwiftUI and WebKit, Apple has opened up vast possibilities for enhancing your app’s user experience.

Quick Answer​

Production Checklist​

Introduction​

Getting Started: Integrating WKWebView with SwiftUI​

Customizing the WebView​

WebView Navigation Delegate​

Now, whenever a webpage starts loading, finishes loading, or fails to load, the corresponding message will be printed to the console.​

Wrapping Up​

Conclusion​

Get the next useful guide