Getting started with WKWebView using Swift in iOS 8

In iOS 8 and Mac OS X Yosemite Apple introduces the new WKWebView and the Swift language among a slew of other amazing stuff. In this article we'll take a quick look at how you can get started writing Swift by implementing a basic browser using the WKWebView class.

For more information about Swift and WKWebView, please visit http://developer.apple.com

Disclaimer: Swift is a brand new language and also new to me, so I'm not stating that the code in this article in any represents the "correct" way of doing things. If you think something is wrong or should have been done differently please do add a comment.

Setting it up

Open xCode 6 and create a Single Page View Application (iOS) project and select a Swift as the project language. This will create a «Main.storyboard» file and a «ViewController.swift» file which are the two files we are concerned with in this article.

Importing WebKit

Open «ViewController.swift» and add an import statement for WebKit using import WebKit, put this line just below the existing UIKit import statement. We need to do this since the WKWebView class is now a part of WebKit itself.

Creating an outlet

Next create an outlet to reference the container view in Interface Builder. Enter the following at the top of the «ViewController» class.

@IBOutlet var containerView : UIView = nil

This piece of code allows the «ViewController» to get a reference to our WKWebView. To finish this connection select the «Main.storyboard» in the assistant editor, so you can see both the storyboard and the «ViewController». To tell the view in interface builder to reference this outlet you can make a connection by dragging from the outlet to the view and letting go.

Creating a variable for the webView

Back in «ViewController.swift», below the containerView outlet make a variable

var webView: WKWebView?

The question mark means that the webView property / variable is a wrapped variable, which again means that this variable might be empty and that it does not have the properties of WKWebView, because it's of type WKWebView? - riiight.

Think about it this way; As the word "wrapped" implies, the webView variable is wrapped inside a "container" which might be empty, but it might also contain something, in our case this is hopefully a WKWebView, but for now it's nothing in it.

We'll get back to what this means in practice when we reference this variable later.

Instantiating the webView

Back in «ViewController.swift» lets create an override for ´loadView´ and write the initialization for the WebView there. This function will look like this:

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

After calling super (which you should always do when overriding methods) we instantiate the webView itself

self.webView = WKWebView()

and then we tell the current view of the viewController (self) that the webView is the view we need to show

self.view = self.webView.

You might be thinking that we could have just instantiated the WKWebView when defining the variable, and we could have, for this simple example. However later on when you actually need to pass parameters to the WKWebView() constructor, this approach will make more sense.

Loading and showing a web-page

Moving on.. lets load a webpage! In the viewDidLoad function, which should be defined in ViewController.swift already, type the following:

override func viewDidLoad() {
    super.viewDidLoad()
    var url = NSURL(string:"http://www.kinderas.com/")
    var req = NSURLRequest(URL:url)
    self.webView!.loadRequest(req)
}

Now run your application! It should load this web-page in the simulator, how's that for meta!

Let's take a look at this code. The first line defines an NSURL using the NSURL(string:) constructor. The next line constructs a NSURLRequest using the url constructed on the previous line. Then we tell the webView to load the request. Notice how self.webView is referenced using the ! at the end. This goes back to the part where we created the webView variable using the ?. Since webView is wrapped it actually refers to the "container" and not the WKWebView instance, which is what we want. Therefore we need to unwrap it and we do this using the !.

Summary

In this article we have briefly touched on using Swift and the brand spanking new WKWebView which is available in iOS 8 and Mac OS X Yosemite. We have seen how a WKWebView can be initialized and rendered to the screen and we have seen how to use Swift when interacting with CocoaTouch.

All the code

The whole ViewController.swift file now looks like this:

import UIKit
import WebKit

class ViewController: UIViewController {
    
    @IBOutlet var containerView : UIView! = nil
    var webView: WKWebView?
                            
    override func loadView() {
        super.loadView()
        
        self.webView = WKWebView()
        self.view = self.webView!
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
       
        var url = NSURL(string:"http://www.kinderas.com/")
        var req = NSURLRequest(URL:url)
        self.webView!.loadRequest(req)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
    
}