June 12, 2014

Swift Hybrid Development

Posted in iPhone development, mac development tagged , , , , , , , , , , , , at 3:02 pm by tetontech

From 2007 until 2012 when my doctoral degree got in the way I created and then supported a hybrid development environment call QC Hybrid. It was designed to allow you to build an installable application in Javascript, HTML, and CSS. It also allowed you to make calls and pass JSON data from Javascript down to the native execution code, Objective-C for iOS and Java for Android.

My doctoral degree is now done. I could begin supporting that code set again but it would be better to implement it in Swift or current Objective-C and gain access to the new WebKit API  common to both iOS 8 and OS X Yosemite. Another reason to ‘start from scratch’ is that the new WKWebView is much more powerful that the old UIWebView. According to Apple, it has all the new HTML 5 abilities and now the same webkit engine as Safari so tools like QC Hybrid, PhoneGap, and the other hybrid tools are not needed by the vast majority of Hybrid developers. That was not true in the past. Never the less, I maintain that this type of project should, in most cases, be a temporary and stop-gap solution while you develop your app in the native languages of the platform. At least for now.

With all that history out of the way, lets get to a Swift code example.

For a hybrid application, the HTML, Javascript, CSS, and image files are included as part of the project just like any other file. This image shows the single-view Swift project I created for this posting. Also make sure you add the WebKit.framework to your project.


You can see I have a file called index.html. This is the file that the example code is going to load and trigger the loading of the main.css and main.js files just like any normal web page.

In the project’s ViewController.viewDidLoad() method I inserted added code to create a WKWebView, load index.html, and add the WKWebView to the main view.

(Note: This code example has been updated for Swift 2.0 on my gitHub repository.)

        //get a string path to the file
        var path = NSBundle.mainBundle().pathForResource("index",
                             ofType: ".html")
        //create a URL for the path
        var url = NSURL(fileURLWithPath:path)
        //create a request for the URL
        var request = NSURLRequest(URL:url)
        //create the WKWebView and set the size to match 
        //the window's full view 
        var theWebView:WKWebView = WKWebView(frame:self.view.frame)
        //have the web view load the page
        //add the web view to the main view

The reason I started the load before adding the web view was to get a little buffering going on before the display. The web view will load without being displayed.

I’m going to do another posting on how to communicate between Swift and Javascript in a later post. That has changed dramatically as well.



  1. dineshramitc said,

    Reblogged this on Dinesh Ram Kali..

  2. Dustin said,

    Looking forward to the next article on this subject. Thanks for sharing.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: