Creating a simple browser for iOS using WKWebView with Swift

Published in

Mac O’Clock

3 min readJun 5, 2020

We’re going to have a look on how to create a minimal iOS app using Swift to render a web content on an iPhone. Please note that in order to build apps for iOS you need to have a Mac. Let’s get started.

On your Mac open Xcode and go to File > New > Project. On the popup window choose iOS as the platform and select Single View App as the project template and press Next.

On the next screen provide a Product Name and Organization Identifier which will be used to define a Bundle Identifier for your app. You can also provide values for Team and Organization Name or leave it with the default values for now. When your press Next you’ll be prompted to choose a directory for storing project files. Select your preferred location and click on Create.

If you have been successful so far you’ll be landing on below given screen, if so you’re ready to start making code changes. Else go through the above steps carefully and find out what went wrong. From your left hand pane, open ViewController.swift file which contains the code we need to change.

Import WebKit framework by adding below line to ViewController.swift

import WebKit

Next we need to extend ViewController class by promising to implement WKNavigationDelegate protocol as shown below.

class ViewController: UIViewController, WKNavigationDelegate {

Then within the ViewController class define a property of type WKWebView, which we’ll be using later to store the reference object.

var webView: WKWebView!

Now we’ll be overriding loadView function’s default implementation within ViewController class. First we create a new instance of Apple’s WKWebView browser component. Second we’re setting the web view’s navigationDelegate property to self, which means “when any web page navigation happens, please tell me — the current view controller.” Third we make our view a web view.

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

Finally place the below lines of code within the viewDidLoad() function, just after the super call. First line creates a property of type URL and stores the web site address provided as an string. Second line creates a new URLRequest object from that URL. The third line enables a property on the web view that allows users to swipe from the left or right edge to move backward or forward in their web browsing.

let url = URL(string: “https://www.google.com")!
webView.load(URLRequest(url: url))
webView.allowsBackForwardNavigationGestures = true

By now we should have a working app which we can try to run inside a simulator or on a physical device. Below is a screenshot taken after running the app inside iPhone X simulator on my Mac.