Create WKWebView Programmatically and Load Webpage URL

WKWebView is a powerful class in the WebKit framework that allows you to embed web content in your iOS app. It’s essentially a mini-browser that provides a rich, interactive web experience within your application.

Unlike UIWebView, which was deprecated and removed from iOS 12 onwards, WKWebView is more efficient, has better performance, and offers advanced features like responsive 60 fps scrolling and built-in gesture support.

In this tutorial, you will learn how to create WKWebView programmatically and load a remote webpage using a URL.

Important Classes and Protocols

WKWebView: The primary class responsible for displaying web content. It’s a view that combines a web view with a scroll view, allowing you to display web content in your app.
WKUIDelegate: A protocol that defines methods for handling user interface events. By conforming to this protocol, you can display native UI elements and handle JavaScript alerts and other interactions.
WKNavigationDelegate: This protocol defines methods for receiving notifications about navigation events, such as when the web view starts or finishes loading a page.

I divide this tutorial into two steps. First, you will learn how to create a WKWebView programmatically and then load the web page using the URL.

Step 1: Create WKWebView Programmatically

First, import the UIKit and WebKit frameworks into your Swift file. These frameworks provide the classes and methods necessary to work with user interfaces and web content.

import UIKit // For UI
import WebKit // For Web content

Next, create a subclass of UIViewController and conform to the WKUIDelegate protocol. This delegate is used to handle user interface events for the WKWebView.

Also inside the ViewWillAppear method you create a new instance of WKWebView is created with the frame set to the bounds of the main screen. This means the web view will take up the entire screen space. You have to set the delegate to self and add the webview as a subview to the view controller’s main view.

class ViewController: UIViewController, WKUIDelegate {
    override func viewWillAppear(_ animated: Bool) {
        let webView = WKWebView(frame: UIScreen.main.bounds) 
        webView.uiDelegate = self 
        self.view.addSubview(webView)    
    }
}

Then, implement the WKNavigationDelegate methods to respond to various navigation events. For simplicity, I’ll focus on webViewDidStartLoad and webViewDidFinishLoad.

// Webview start loading
func webView(_ webView: WKWebView, didStartProvisionalNavigation navigation: WKNavigation!) {
    print("Started loading")
}

// Webview loading finish    
func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
    print("Finished loading")
}

Step 2: Load Webpage Using the URL

Now, create a URL object with the remote URL you wish to load and create a URLRequest from it. Then, call the load(_:) method on your WKWebView instance to start loading the web page.

override func viewWillAppear(_ animated: Bool) {
        
        let webView = WKWebView(frame: UIScreen.main.bounds)
        webView.uiDelegate = self
        self.view.addSubview(webView)
        
        guard let url = URL(string: "https://www.appsdeveloperblog.com") else {
            print("Invalid URL")
            return
        }
        
        let request = URLRequest(url: url)
        webView.load(request)
}

Complete Code Example

Here is the complete code example incorporating all the above steps:

import UIKit
import WebKit

class ViewController: UIViewController, WKUIDelegate, WKNavigationDelegate {
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    
    override func viewWillAppear(_ animated: Bool) {
        
        let webView = WKWebView(frame: UIScreen.main.bounds)
        webView.uiDelegate = self
        self.view.addSubview(webView)
        
        guard let url = URL(string: "https://www.appsdeveloperblog.com") else {
            print("Invalid URL")
            return
        }
        
        let request = URLRequest(url: url)
        webView.load(request)
    }
    
    func webView(_ webView: WKWebView, didStartProvisionalNavigation navigation: WKNavigation!) {
        print("Started loading")
    }
    
    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        print("Finished loading")
    }
}

Conclusion

I hope this tutorial was helpful to you. You now know how to create a WKWebView programmatically and how to load a webpage using the URL.

To learn more about Swift and find more Swift code examples and tutorials, please check my Swift Code Examples page.

If you are interested in video lessons on how to write Unit tests and UI tests to test your Swift mobile app, check out this page: Unit Testing Swift Mobile App