In iOS 26, SwiftUI lastly launched one in all its most extremely anticipated elements: WebView, a local answer 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 the intention to embed an online view. With the arrival of WebView, Apple now offers a completely 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 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 cell Safari expertise instantly in your app—powered by the identical WebKit engine that runs Safari.
An Various Approach of Loading Internet Content material
Along with WebView, the WebKit framework additionally introduces a brand new class referred to as WebPage. Reasonably 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 non-public 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, in case you merely must show internet content material or embed a browser in your app, WebView is essentially the most simple strategy. In the event you want finer management over how internet content material behaves and interacts together with your software, WebPage affords 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)
It’s also possible to use the url property to entry the present URL of the online web page.
If you wish to monitor 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 habits of an online 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
In addition to loading a URLRequest, the WebPage class’s load technique also can deal with customized HTML content material instantly. Beneath is the pattern code for loading a YouTuber participant:
struct ContentView: View {
@State non-public var web page = WebPage()
non-public 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 permits you to execute JavaScript. You should utilize the callJavaScript technique and go within the script you need to run. Right here is an instance:
struct ContentView: View {
@State non-public var web page = WebPage()
non-public let snippet = """
doc.write("");
"""
var physique: some View {
WebView(web page)
.process {
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 internet content material inside iOS apps, eradicating the necessity to depend on UIKit wrappers. SwiftUI builders can select between two key approaches:
WebView: Best for simple use instances the place you simply must load and show an online web page.WebPage: Provides extra granular management, permitting you to entry web page properties, monitor loading progress, reload or cease loading, and even execute JavaScript.
This native SwiftUI answer brings a cleaner, extra streamlined expertise to embedding internet content material in your apps.