Building cross-platform mobile apps with HTML5.

From this blog on, we'll talk about technical stuff that matter to people like you- web developers and app engineers. So, HTML5 is a powerful set of features that enable web developers to build rich and engaging web experiences. We write the structure in HTML, style it in CSS and write the logic in JavaScript. This works in web browsers, but when it comes to building mobile apps for platforms like Android or iOS people get frightened as they often think that they have to rebuild the entire app in a native language. In this blog lets talk about building an HTML app for the mobile web and use it for all the platforms.

Building the mobile website

First, we'll build the app in HTML5. Just make your app, the way you want it (you should already be a web developer, I'm not going to discuss building the app itself). But make sure that the app that you build is tested in phones and tablets of different sizes and it works well. 

Tip: If you want to focus on the functionality of your app and don't want to spend a lot of time behind the design, layout or the code for cross-device responsiveness, you might want to try some ready-made templates available at HTML5 UP!. You also might want to try Bootstrap which is very popular.

Turning it into an app

There's a different way you do this in different platform. But the idea is simple. In most platforms, there's a widget that allows you to embed websites in your app. So, the plan is to build an app entirely on HTML, such that there's nothing you need the native features for (thanks to HTML5 we have so many features that we don't need the standard native features). And then just embed the HTML files in your app.

In android you do this with the help of  <WebView /> . iOS and Windows Phone also have similar elements. And then the entire app is technically just a webpage running as an app. But remember, HTML5 has so many features that you don't even need the native features.

But... What if you do? Let's see...

Using native platform features from within HTML5 apps

But, let's admit it. No matter how powerful HTML5 is, there are some things that are built into the platform that you would like to use. Rebuilding it entirely in HTML5 is just too time consuming or difficult.

Note: I'll be talking about Android since I'm an Android developer. But you'll get the idea and you can always browse the documentation for your platform to learn more...

In android to use android's java functions from JavaScript, we call addJavascriptInterface() and pass a class instance to it that contains your java functions. An example class would look like this:

public class WebAppInterface {
    Context mContext;

    /** Instantiate the interface and set the context */
    WebAppInterface(Context c) {
        mContext = c;
    }

    /** Show a toast from the web page */
    @JavascriptInterface
    public void showToast(String toast) {
        Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
    }
}

Now lets use the function that we discussed before to bind this class to our web app.

WebView webView = (WebView) findViewById(R.id.webview);
webView.addJavascriptInterface(new WebAppInterface(this), "Android");

Here the name of our interface is "Android". Now, to call the Java function "showToast" from JavaScript, all you have to do is:

<input onclick="showAndroidToast('Hello Android!')" type="button" value="Say hello" />

<script type="text/javascript">
    function showAndroidToast(toast) {
        Android.showToast(toast);
    }
</script>

Conclusion

So, that's how you do it in android. iOS and Windows also have such elements where you can embed web pages within your apps. The web app should be enough but if you feel you need some native features, you can always consult your platform documentation.