Building a basic browser using WKWebView

We did a lot of layout work in our previous blogs using Interface Builder, but this time, our layout is going to be so straightforward that we can write the entire thing in code. As you can see, we used to add buttons and images to our view, but since the web view will take up the entire space in this project, it might as well serve as the primary view for the view controller.

To load an external website page into your app, Swift uses WebKit and WKWebView. To guarantee complete implementation, WKWebView has related functions. Additionally, it would help if you used UIProgressView to track the website page loading so that the user is aware that the page is loading rather than seeing a blank screen until the page has fully loaded.

You can easily integrate web content into the user interface of your app by using a platform-native view called a WKWebView object. In addition to displaying your app’s native views, a web view facilitates full web browsing by displaying HTML, CSS, and JavaScript content. When web technologies more easily meet the layout and styling needs of your app than native views, use them. You could use it, for instance, if the content of your app changes regularly.

You can add a WKWebView object with Interface Builder or embed it programmatically into your view hierarchy. Configuring media playback, data detectors, and interaction behaviors are just a few of the many customizations that Interface Builder allows. Use a WKWebViewConfiguration object to programmatically create your web view for more detailed customizations. For instance, you can manage cookies, set preferences for your web content, and designate handlers for unique URL schemes using a web view configuration object.

We’re going to look at how to use Swift to create a simple iOS application that displays web content on an iPhone. Please be aware that you must own a Mac to develop apps for iOS. Let’s go ahead and begin.

Open Xcode on your Mac, then select File > New > Project. Select iOS as the platform,  App as the project template, and click Next on the pop-up window.

To define a Bundle Identifier for your app, provide a Product Name and Organization Identifier on the following screen. In addition, you can enter values for the Team and Organization Name, or you can use the current default values. You will be asked to select a directory to store project files when you click Next. After making your selection, click Create.

If everything has gone well so far, you should see the screen below; if so, you can begin editing the code. If not, carefully follow the aforementioned steps to determine what went wrong. Open the ViewController.swift file, which has the code that needs to be changed, from the pane on the left.

import WebKit

Insert the above line into ViewController.swift to import the WebKit framework.

To refer to the web view later, we must save it as a property when we create it. Now let’s add this property to the class:

var webView: WKWebView?

To implement the WKNavigationDelegate protocol, we must next extend the ViewController class as indicated below.

class ViewController: UIViewController, WKNavigationDelegate {

We are going to modify the default implementation of the loadView function in the ViewController class. The WKWebView browser component from Apple is first created as a new instance. The second thing we’re doing is setting the web view’s navigationDelegate property to self, which indicates, “Please notify me—the current view controller—when any web page navigation occurs.” Finally, we turn our view into a web view.

override func loadView() {
  webView = WKWebView()
  webView?.navigationDelegate = self
  view = webView
}

Finally, before viewDidLoad(), add the above new method

It is not necessary to place loadView() before viewDidLoad(); in fact, it can be placed anywhere from the final closing brace in the file to class ViewController: UIViewController {. Though loadView() is called before viewDidLoad(), it makes sense to place the code above it as well, I still advise you to organize your methods.

Finally, immediately after the super call in the viewDidLoad() function, insert the following lines of code. The first line creates a property of type URL and stores the supplied string web address. A new URLRequest object is created from that URL in the second line. To move backward or forward while web browsing, users can swipe from the left or right edge of the view when the third line is enabled.

override func viewDidLoad() {
    super.viewDidLoad()
    let urlString = "https://www.google.com"
    if let url = URL(string: urlString) {
      webView?.load(URLRequest(url: url))
      webView?.allowsBackForwardNavigationGestures = true
    } else {
       print("invalid URL")
    }
}

This method should never be called directly. When a view controller’s view property is requested but is not yet null, it invokes this method. By using this technique, a view is loaded or created and assigned to the view property.

In the second line, we create a new URLRequest object from that URL and pass it to our web view so that it loads.

Although WKWebViews don’t load webpages from strings like “www.codegeekworld.com” or even from a URL made out of those strings, this may seem like Apple’s pointless obfuscation. The string needs to be converted to a URL, which should then be entered into a URLRequest so that WKWebView can load it. Thankfully, it’s not difficult to do.

So, For this process, your URL needs to be valid and complete. This entails adding the “https://” portion.

The third line activates a feature of the web view that lets users navigate backward and forward in their web browsing by swiping from the left or right edge.

It should be possible for us to test a functional app on a real device or in a simulator by now. After using the app inside the iPhone XI Simulator on my Mac, the video is below.

If you have any queries Please Comment Below.

Thank you!