I’m a big fan of HTML5; it gives me the speed of development that my creativity needs.

But since the rise of mobile, the development with this technology started to be complex. On the desktop, everything was clear. Website development is in a constant evolution; still people have expertise on it. But on mobile, it’s just a nightmare. Developers are confused in the way of developing an HTML5 mobile app, so I hope this guide will help them.

As I said in this previous article, you have to be a web developer before thinking of realizing a mobile app.

Before starting to show you the different platforms, frameworks available, let me tell you that I don’t consider Titanium Mobile as an HTML5 solution. Read my previous article to understand why.

There are four known solutions (many new others are created, but are still in an early status) to create HTML5 mobile apps.

Web App

It’s the easiest way. In short, it’s just a website accessible by a browser. Android and iOS offer have a feature to add a shortcut of a web app in your dashboard. The app would be full screen if you set the right option and works offline with Appcache.

Edit: Daniel Appelquist precises me that Firefox OS, Firefox on Android and soon Chrome present the user that a web app can be added in his mobile. You need to declare a web app manifest in your page. Good to know ☺

For me, it’s not a reliable option:

First, Appcache is just awful: http://alistapart.com/article/application-cache-is-a-douchebag

ServiceWorker, the substitute of Appcache, is still not ready but the specs are damn cool: https://github.com/slightlyoff/ServiceWorker/blob/master/explainer.md

The current HTML5 APIs coverage in iOS or Android before 4.x is too poor to rely on it.

No push notifications (Firefox OS allows it)

No interactions with native SDKs (FirefoxOS is more friendly with that)

Phonegap / Cordova

It’s currently, the best compromise. There is already an entire ecosystem of tools, forums, developers. You can take profit of HTML5 APIs as much as the native ones. In the end, you have a real app. They’re trying to follow HTML5 APIs specification in their platform to help the transition of web apps.

Homemade bridge

This solution is chosen when the team is quite big and already has knowledges in native code. Many big companies choose it. They can mix native UI components for performance and HTML for flexibility.

If you are interested, have a look to these links:

Intel XDK

I can’t give an honest opinion on it. When I installed the editor the first time, I found it too complicated and didn’t give me motivation to continue. As I understand, it’s in the same spirit as Phonegap but they provide a complete IDE too. I don’t know precisely what are the differences. If an Intel guy reads this article, can you send me more details?

Native HTML

It’s the perfect solution. Instead of having a bridge between native code and HTML, the OS will execute the code directly. You have access to all the APIs, and the debugger is just perfect. In practise, only Firefox OS and Tizen have such a system.