Exploring WebView and WebPage in SwiftUI for iOS 26

In iOS 26, SwiftUI lastly launched one in all its most extremely anticipated elements: WebView, a local resolution for displaying net content material. Earlier than this replace, SwiftUI builders needed to depend on the UIKit framework, utilizing UIViewRepresentable to wrap WKWebView or SFSafariViewController to be able to embed an online view. With the arrival of WebView, Apple now gives a completely native SwiftUI method to integrating net looking capabilities into apps. On this tutorial, I’ll offer you a fast overview of the brand new WebView and present you the way to use it in your individual app improvement.

The Primary Utilization of WebView

To load an online web page utilizing the brand new WebView, you merely import the WebKit framework and instantiate the view with a URL. Right here is an instance:

import SwiftUI
import WebKit

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

With only a single line of code, now you can embed a full-featured cellular Safari expertise straight in your app—powered by the identical WebKit engine that runs Safari.

An Different Manner of Loading Internet Content material

Along with WebView, the WebKit framework additionally introduces a brand new class known as WebPage. Somewhat than passing a URL on to WebView, you possibly can first create a WebPage occasion with the URL after which use it to show the online content material. Under is the pattern code that achieves the identical outcome:

struct ContentView: View {
    @State personal var web page = WebPage()
    
    var physique: some View {
        
        WebView(web page)
            .ignoresSafeArea()
            .onAppear {
                if let pageURL = URL(string: "https://www.appcoda.com") {
                    let urlRequest = URLRequest(url: pageURL)
                    web page.load(urlRequest)
                }
            }
    }
}

Working with WebPage

Most often, if you happen to merely have to show net content material or embed a browser in your app, WebView is essentially the most simple method. In the event you want finer management over how net content material behaves and interacts together with your software, WebPage presents extra detailed customization choices like accessing net web page properties and programmatic navigation.

For instance, you possibly can entry the title property of the WebPage object to retrieve the title of the online web page:

Textual content(web page.title)
Textual content(web page.url)

You may also use the url property to entry the present URL of the online web page.

If you wish to observe the loading progress, the estimatedProgress property provides you an approximate proportion of the web page’s loading completion.

Textual content(web page.estimatedProgress.formatted(.p.c.precision(.fractionLength(0))))

Apart from accessing its properties, the WebPage class additionally allows you to management the loading habits of an online web page. For instance, you possibly can name reload() to refresh the present web page, or stopLoading() to halt the loading course of.

Loading Customized HTML Content material Utilizing WebPage

Moreover loading a URLRequest, the WebPage class’s load technique also can deal with customized HTML content material straight. Under is the pattern code for loading a YouTuber participant:

struct ContentView: View {
    
    @State personal var web page = WebPage()
    
    personal let htmlContent: String = """
        

        

        

        """
    var physique: some View {
        
        WebView(web page)
            .onAppear {
                web page.load(html: htmlContent, baseURL: URL(string: "about:clean")!)
            }
    }
}

In the event you place the code in Xcode, the preview ought to present you the YouTube participant.

Executing Javascript

The WebPage object not solely allows you to load HTML content material—it additionally means that you can execute JavaScript. You need to use the callJavaScript technique and cross within the script you wish to run. Right here is an instance:

struct ContentView: View {
    
    @State personal var web page = WebPage()
    
    personal let snippet = """
        doc.write("");
        """
    
    var physique: some View {
        
        WebView(web page)
            .activity {
                do {
                    attempt await web page.callJavaScript(snippet)
                } catch {
                    print("JavaScript execution failed: (error)")
                }
            }
    }
}

Abstract

The brand new native WebView element in SwiftUI makes it a lot simpler to show net content material inside iOS apps, eradicating the necessity to depend on UIKit wrappers. SwiftUI builders can select between two key approaches:

• WebView: Superb for simple use instances the place you simply have to load and show an online web page.
• WebPage: Gives extra granular management, permitting you to entry web page properties, observe loading progress, reload or cease loading, and even execute JavaScript.

This native SwiftUI resolution brings a cleaner, extra streamlined expertise to embedding net content material in your apps.