Skip to main content

Serving HTML content in an iOS app that works in iOS 7 and later (using Swift)

As I have mentioned in an earlier post, I really enjoying coding in Swift. Now what am I doing with it? Well I am trying to build an HTML5 app that must work on devices with iOS 7. So in iOS8 apple has introduced a whole bunch of features that facilitate easy communication between web content and lets just call it back-end Swift code, but those features are not in iOS 7. So why do I want to build something that would work in an older OS? well I do not expect existing iOS users to upgrade to iOS 8 straight away and i also know a couple of people who would be very reluctant to upgrade their iPhones to iOS 8.

Now in case you do not, you can have a read of the "Working with WebViews" section of this post, to know how to serve HTML content with WebViews. So when I started building my app, I wanted to know:

How do I invoke some Swift code from my HTML content?

Well the solution to this may feel a little bit "hacky" but it is a solution to achieve this.  The following are the steps to achieve it:
  • Add a UIWebViewDelegate to your class definition: The UIWebViewDelegate is a protocol in Swift. You can think of a protocol like a Java interface, which means the method that implements or conforms to the protocol must implement the methods defined by that protocol.
  • Implement the UIWebVIewDelegate protocol's methods: which in this case would be as follows 
optional func webView(webView: UIWebView, shouldStartLoadWithRequest request:   NSURLRequest, navigationType: UIWebViewNavigationType) -> Bool
optional func webViewDidStartLoad(webView: UIWebView)
optional func webViewDidFinishLoad(webView: UIWebView)
optional func webView(webView: UIWebView, didFailLoadWithError error: NSError)
  • The method of interest here is the one with the shouldStartLoadWithRequest parameter: So every time we send a request to load a url from a webpage in a webView, this method is invoked.
  • As you can see the method has a boolean return type: So if this method returns true, it means we load the url and if false, means we do not load the url. 
  • Great, so what do we do with all this info? To tie this all up, one way to trigger execution of Swift code from some HTML content in a webview is 
    • Have a javascript function in your html page, which on being called modifies window.location
    • This will invoke the webView method with the shouldStartLoadWithRequest parameter. At this point we can execute any Swift code that we would like to in our Swift class which in this case I suppose would be a ViewController.
    • Now use the shouldStartLoadWithRequest.path property to determine the request for the path to be loaded. 
    • So if it is just a request to trigger some Swift code then we just return false from that method.
So now we know how to trigger some Swift code from HTML code, so what about 

Getting some data in our Swift code from the HTML?

One way to accomplish this  is using the UIWebView method stringByEvaluatingJavaScriptFromString that fetches us an optional String. So say we have a DOM element in our HTML file called "test", we can store some data in it and get it in our Swift code. Something like this,

 
var fromHtml:String? = view?.stringByEvaluatingJavaScriptFromString("document.getElementById('test').value")

To know more about an Optional value in Swift, I would recommend having a read of this article.

I will soon post a link to a Github or Bitbucket repository that hosts an XCode project that shows a working example of the concepts discussed here.




Labels:

Comments

Post a Comment

Popular posts from this blog

Html5 based widget for an iOS app: Today extension powered by the Ionic framework

At some point the thought of adding a Widget to my iOS app came to mind which was followed by starting work on adding a widget for my app, My Day Todos . Obviously the first step was to learn how to add a Widget to an iOS app and in that learning process I discovered many things about widgets in iOS first of which was a widget in iOS is a an app extension i.e a  Today Extension . While I am still haven't finished working on the widget for my iOS app, I thought I would take some time out and share what I have learned. In this post, I will share a few important tips and provide an example of how to add a Widget to an iOS app and have the widget UI powered by Html5 via  Ionic framework . I added some code to my Github repo, Html5StarterAppWithSwift in order to show how this can be achieved. There are already too many tutorials out on the Web on how to add a Today extension to an iOS app so I won't be including that here. Instead I will focus on sharing some of the useful tip...
3 comments
Read more

Why can't I cancel a local notification in my iOS app?(in Swift)

Prelude I have mentioned the fact that I am working on my first iOS app in a number of my previous posts and as such I face a number of newbie/noob(?) problems. They are not really problems as much as they are simply things that I do not know, for e.g. the following, how do I get the day of the week? where is my string.replaceAll in Swift? knowing which local notification brought my app to foreground ? serving HTML content in an iOS app that works on iOS 7 and above Thankfully, I have managed to make at least one generic solution and contribute it to the community i.e. my open-source Xcode project template( HTML5StarterAppWithSwift ) which you can get from Github . So this post basically describes another very simple problem that I have found a solution to, but I do not fully understand why the problem was occurring in the first place. Introduction As I have mentioned in this post , my iOS app uses local notifications i.e. UILocalNotification   and i...
Post a Comment
Read more

App update, discovering Protractor(testing) and an Angularjs State machine

So for the last couple of weeks, I have not be able to update my blog or finish a couple of the posts that I started writing. Well, I have...been a bit busy, with some the following things,  Testing my app I have been using the app( iOS ) on my iPhone for the past couple of months now, which is both good and bad. The good thing is I can test it and the bad thing is, I can use it every day. Part of the reason, I started building this app is to have something that I can and like to use everyday and since I am already using it, the incentive to release it is not as high as if it were something that I could not use. Anyway I did make some good progress over the last couple of weeks, like  Delete the app from my iPhone and do a clean install: this did help me find a few simple bugs that would pop-up when the app is first installed GET AN APP ICON, FINALLY! this was a bit of a hurdle and I thanks to Fiverr  and fivercrazyguy , I finally have my app icon. The day job ...
1 comment
Read more