Although RubyRiot was held a week ago, and Sravish already blogged about the usage of the official RubyRiot app made by Kinvey here, I will revisit the app one more time. As you know, the app is available for both iOS and Android. However, it originally started out as an HTML5 app. MarkBlog-HTML5-Hybrid

Instead of developing two separate versions, we decided to code a large part of the desired functionalities in HTML5. This way, we avoided coding the same functionalities twice, while still being sure they worked across platforms. Eventually, we had to hybridize the app due to constraints with the HTML5 platform. For example, implementing push notifications requires a native approach. Also, we had to circumvent Cross-Origin Resource Sharing (CORS) issues with the Twitter API.

To get to know how to convert your Kinvey app to a hybrid one to really make it shine, read on. Different phases are discussed in separate sections.


Different solutions are available to convert your HTML5 app into a hybrid one. All of them have in common that your HTML5 code is running inside some WebView. By bridging functionalities between HTML5 and native, a hybrid app is capable of accessing a device’s hardware, like the camera. For RubyRiot we used PhoneGap, but others, like Titanium Mobile, are available.

PhoneGap has tutorials for setting up a hybrid app in iOS or Android. All you have to do is download the application skeleton, and drop your HTML5 code into a sub folder.


Good news is, you don’t have to change anything as far as the Kinvey API is concerned. Since Kinvey supports CORS out of the box, we do not require you to hybridize your app. However, sometimes you want to use features not available in HTML5. For example, when you want to implement push notifications, a hybrid approach is the only way to go.

Third Parties

The RubyRiot app allows for authentication using Facebook and Twitter. Both parties offer an API to connect their services with your app. In the Facebook Developer area, it is important to set app credentials for the native platform you are converting to.

For Twitter, most of its API can be accessed from JavaScript using JSONP. However, this is not true for Twitter’s oAuth authentication flow. So, when you want to implement authentication through Twitter, a bridge to the native platform is required. iOS 5 offers Twitter support out of the box. Android does not, but Twitter libraries are available.

Push Notifications

RubyRiot uses Urban Airship to implement push notifications. Enabling push notifications for your Kinvey app is really easy, thanks to our partnership. In our console, you can set up push, and we automatically provide you with keys to use.

PhoneGap offers a bridging plugin for Urban Airship, making setting up push notifications a breeze. Note that PhoneGap’s plugins may slightly differ between platforms. This is because of fundamental differences in underlying architecture. However, it is still a lot quicker than implementing features like push notifications from scratch for each platform separately.


Now your hybrid app is able to use Kinvey, login through social media, and notify users when something interesting happens. The only thing left to do is submit the app to the markets!

The action plan below can be used as rule of thumb when converting an HTML5 app into a hybrid one.

1. Code as much as possible in HTML5.

2. Pick a tool to convert your app. Create a project and drop in your code created under 1.

3. For third parties not compatible with HTML5, now is the time to connect them natively.

4. Spice things up with additional features, like push notifications.

5. Deploy, sell, and make some money!

Unfortunately, HTML5 is not quite there yet when it comes to supporting all mobile features. Also, a lot of parties still don’t support CORS. Although Kinvey does not require you to convert your app, you’ll often be using services that do. Therefore, creating hybrid apps is a powerful way to save development costs, and still have a complete and great app in place. On top, your app will have the same look and feel across platforms, improving the user experience.