Making a simple hybrid iOS8 App with Swift

The Setup

Things you will need:

Step 1: Make a new App

In XCode, create a new single view app and name it whatever you like:

XCode initial Setup



Then make sure you select Swift as a language in the next screen:

Set language dropdown to Swift

Step 2: Setup View Controller

In ViewController.swift, first add an import WebKit statement right below the UIKit import statement so it looks like this:

import UIKit  
import WebKit

class ViewController: UIViewController {  
...

Next, we need to make a reference to the UIView that was created by default in the first step. You can do this by declaring an @IBOutlet in this manner (as the first line inside your class):

@IBOutlet var mainView : UIView?

Open up the assistant editor like this:

Assistant editor image

Then click Main.storyboard in the project outline on the left. This will open up the story board in one of the panes. Now create a connection from you @IBOutlet to the view in Interface Builder by dragging from the from the text editor's gutter to the view:

Create connection to IB

Step 3: The WKWebView

Now that everything is wired up, we will create the WebKit Web View (a.k.a. WKWebView) . These fancy new web views get the full benefit of Safari's JS engine!

First create a place where we can store our WKWebView instance. Write the following statement in ViewController.swift right under your @IBOutlet declaration:

var webView: WKWebView?  

If this syntax is unfamiliar to you be sure to check out this explanation of Swift's Optional Types. In brief, the question mark operator means that this WKWebView might be nil. So we need to use it because we haven't assigned a WKWebView instance to the variable yet.

Let's override the loadView function now. First we declare a new WKWebView and assign it to our webView property that we created above. After that, we assign the webView to the controller's active view

override func loadView() {  
    super.loadView() // call parent loadView 
    self.webView = WKWebView() // instantiate WKWebView
    self.view = self.webView! // make it the main view
}

Step 4: Load the HTML

There's two ways one way to load HTML in the web view. The easiest way is to just point it to a URL. You can do this by making a NSURLRequest which points at any URL you want. The webview will simply load it as it would do any website by using its loadRequest function. We will run this code in an overridden viewDidLoad function so that it loads the page once everything is ready:

override func viewDidLoad() {  
  super.viewDidLoad() // run base class viewDidLoad
  var url = NSURL(string:"http://technical-itch.net") // make a URL
  var req = NSURLRequest(URL:url!) // make a request w/ that URL
  self.webView!.loadRequest(req) // unwrap the webView and load the request.
}    

Pretty straight forward, right? If you run your app now, you should see your URL loaded in a native app.

####Version 2: Bundled HTML
Let's have a look at how to bundle this HTML with your app instead. This method is useful if you don't want to wait for a server load (a canvas game perhaps?)

Stay tuned

That should get you started, but how do we make the native app talk to the web app and vice-versa? Find out in my next entry!