Exploring WebView and WebPage in SwiftUI for iOS 26

In iOS 26, SwiftUI lastly launched certainly one of its most extremely anticipated parts: WebView, a local resolution for displaying internet content material. Earlier than this replace, SwiftUI builders needed to depend on the UIKit framework, utilizing UIViewRepresentable to wrap WKWebView or SFSafariViewController with a view to embed an internet view. With the arrival of WebView, Apple now offers a totally native SwiftUI strategy to integrating internet looking capabilities into apps. On this tutorial, I’ll offer you a fast overview of the brand new WebView and present you easy methods to use it in your individual app growth.

The Fundamental Utilization of WebView

To load an internet 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 immediately in your app—powered by the identical WebKit engine that runs Safari.

An Different Manner of Loading Net Content material

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

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

Usually, when you merely have to show internet content material or embed a browser in your app, WebView is probably the most easy strategy. In the event you want finer management over how internet content material behaves and interacts together with your utility, WebPage gives extra detailed customization choices like accessing internet web page properties and programmatic navigation.

For instance, you may 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 can too 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 share of the web page’s loading completion.

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

Aside from accessing its properties, the WebPage class additionally allows you to management the loading conduct of an internet web page. For instance, you may name reload() to refresh the present web page, or stopLoading() to halt the loading course of.

Loading Customized HTML Content material Utilizing WebPage

Apart from loading a URLRequest, the WebPage class’s load methodology may deal with customized HTML content material immediately. Beneath 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 lets you execute JavaScript. You should utilize the callJavaScript methodology and move within the script you need 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 {
                    strive 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 internet content material inside iOS apps, eradicating the necessity to depend on UIKit wrappers. SwiftUI builders can select between two key approaches:

• WebView: Perfect for easy use instances the place you simply have to load and show an internet web page.
• WebPage: Presents 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 internet content material in your apps.