Logo for tanaschita.com

How to present a local html file in SwiftUI

Learn how to use WKWebView with SwiftUI.

11 Sep 2023 · 3 min read

When developing iOS applications, we might need to show a locally stored html file to the user. We can implement that by using Apple's WebKit framework and its WKWebView class which allows us to incorporate web content into an iOS application.

Let's see how to do that.

Sponsorship logo
Preparing for a technical iOS job interview - updated for iOS 17
Check out my book on preparing for a technical iOS job interview with over 200 questions & answers. Test your knowledge on iOS topics such as Swift, SwiftUI, Combine, HTTP Networking, Authentication, SwiftData & Core Data, Concurrency with async/await, Security, Automated Testing, Machine Learning and more.
LEARN MORE

Since WKWebView is a UIView subclass, the first step is to create a UIKit view wrapper that we can use to integrate that view into our SwiftUI view hierarchy:

struct HTMLView: UIViewRepresentable {
let fileName: String
func makeUIView(context: Context) -> WKWebView {
return WKWebView()
}
func updateUIView(_ webView: WKWebView, context: Context) {
// TODO: Load HTML file contents into the web view.
}
}

With that in place, we can now create a resource URL and then use WKWebView's load(_ request: URLRequest) method to show it:

func updateUIView(_ webView: WKWebView, context: Context) {
guard let url = Bundle.main.url(forResource: fileName, withExtension: "html") else { return }
webView.load(URLRequest(url: url))
}

If we need to process or modify the html content programmatically before showing it, we could alternatively use the loadHTMLString(_ string: String, baseURL: URL?) method:

func updateUIView(_ webView: WKWebView, context: Context) {
guard let url = Bundle.main.url(forResource: fileName, withExtension: "html") else { return }
guard let htmlString = try? String(contentsOf: url, encoding: .utf8) else { return }
webView.loadHTMLString(htmlString, baseURL: url)
}

With that in place, we can now use it in a SwiftUI hierarchy, for example by embedding it in a sheet:

@State private var isTermsSheetPresented = false
var body: some View {
Button("Terms & Conditions") {
isTermsSheetPresented.toggle()
}.sheet(isPresented: $isTermsSheetPresented) {
HTMLView(fileName: "terms")
}
}
Sponsorship logo
Preparing for a technical iOS job interview - updated for iOS 17
Check out my book on preparing for a technical iOS job interview with over 200 questions & answers. Test your knowledge on iOS topics such as Swift, SwiftUI, Combine, HTTP Networking, Authentication, SwiftData & Core Data, Concurrency with async/await, Security, Automated Testing, Machine Learning and more.
LEARN MORE

Newsletter

Image of a reading marmot
Subscribe

Like to support my work?

Say hi

Related tags

Articles with related topics

swiftui

swift

ios

How to use NavigationPath for routing in SwiftUI

Learn how to manage navigation in SwiftUI programmatically.

09 Jun 2024 · 5 min read

Latest articles and tips

© 2024 tanaschita.com

Privacy policy

Impressum