Methods to Use Show Internet Web page in SwiftUI Utilizing WKWebView


It is rather widespread that you should show net content material in your apps. The iOS SDK gives three choices for builders to indicate net content material: Cell Safari, WKWebView, and SFSafariViewController. In iOS 14 (or later), the SwiftUI framework gives a view known as Hyperlink so that you can open an internet hyperlink in cellular Safari. The utilization may be very easy. You simply must specify the textual content of the hyperlink and the vacation spot URL like this:

This presents a textual content hyperlink in orange. When a consumer faucets the textual content, the app opens the hyperlink within the Safari browser. You aren’t restricted to make use of a textual content hyperlink. Within the label closure, you possibly can change the code to current a picture hyperlink utilizing an Picture view or different customized views.

Nevertheless, the present model of SwiftUI doesn’t include an embedded net view. To show net content material inside your purposes, you have to to faucet into the UIKit framework. On this tutorial, I’ll stroll you thru the procedures to undertake WKWebView in SwiftUI tasks.

Adopting WKWebView Utilizing UIViewRepresentable

Assuming you’ve gotten some expertise with the combination of SwiftUI and UIKit, we have to undertake the UIViewRepresentable protocol to make use of the parts from UIKit.

For this demo, I’ll create a brand new file known as WebView.swift to implement a customized net view for SwiftUI. Within the challenge navigator, proper click on the challenge folder and select New File…. Choose the Swift File template and identify the file WebView.swift. Exchange the file content material like this:

To make use of a UIKit view in SwiftUI, you wrap the view with the UIViewRepresentable protocol. Mainly, you simply must create a struct in SwiftUI that adopts the protocol to create and handle a UIView object. Within the code above, we create a WebView struct adopts the UIViewRepresentable protocol and implement the required strategies.

Within the makeUIView methodology, we return an occasion of WKWebView. That is the way you wrap a UIKit view and make the net view accessible to SwiftUI.

Whereas the makeUIView methodology is chargeable for creating and initializing the view object, the updateUIView methodology is chargeable for updating the state of the UIKit view. So, we load the given URL within the updateUIView methodology.

Now it is able to use WebView in our SwiftUI challenge. Change over to ContentView.swift and add a state variable to retailer the present hyperlink:

To carry up the net view, connect the .sheet modifier to the Button view:

We current the customized net view utilizing a sheet. You possibly can run the app on a simulator to have a check. Whenever you faucet the button, the app brings up an internet view to load the web site in a modal view.

By utilizing the identical method, you possibly can combine SFSafariViewController in your SwiftUI tasks. I’ll depart it to you as an train.

If you wish to be taught extra about SwiftUI, you possibly can try our up to date Swift course.

Founding father of AppCoda. Writer of a number of iOS programming books together with Starting iOS Programming with Swift and Mastering SwiftUI. iOS App Developer and Blogger. Comply with me at Fb, Twitter and Google+.