Native app vs HTML5 is most discussed topic in the web community. No doubt native app is leading in terms of performance, speed and user experience. The decision to go with native or HTML5 approach, can be made  by evaluating the different parameters, budget and project requirement.

HTML5 is gradually booming and used by many giants like Facebook, YouTube and Flickr. HTML5 now allows rich user experience and powerful web apps. Developers have access to device resources that were only available for native apps. This post is not supporting any approach but focusing some features of HTML5 for a mobile app that provides fruitful thoughts while making the decision to go with Native or HTML5 approach.

Some HTML5 features that may attract to take HTML5 approach for mobile app

HTML5 development is focusing more on apps instead of server web pages. It helps to make mobile app more interactive. There are some great features for developers that bridge the gap between native and HTML5 app.

Offline Web Application Support

Offline availability of native app is one pros of native app and cons of web app. “Web” and “offline” are two words that are not associated together. HTML5′s offline web application feature solves this problem. By using the cache manifest file, a list of resources that may require access of the app, when it is not connected from the network. See the W3c Spec…

HTML5 is not a silver bullet solution as support for all HTML5 APIs not same in all browsers, a fallback plan is required when certain APIs are not available.

Touch events that make HTML5 app more interactive

Major difference in terms of interaction between desktop and mobile app is mouse and touch interaction. W3c working group has come up with touch event API in html5 that make HTML5 app more interactive. Three basic touch events that implemented widely across mobile devices are:

• touchstart: a finger is placed on a DOM element.
• touchmove: a finger is dragged along a DOM element.
• touchend: a finger is removed from a DOM element.

Geolocation API

Most of the mobile devices are fitted with GPS hardware that tells the geographical location. Native app can get access to the device features, and getting the geographical data is not a challenge in native app, that of course influence while making a choice between native or web app. But geolocation API of HTML5 changed the game, developers can take the advantage of geolocation technology in the HTML5 app.

Advance Form

New HTML5 form elements make life easier in mobile application. Form elements like input type url, number, datetime, email, tel enhance the user experience by popping up the right keyboard.

Media Capturing and Audio/Video

Mobile’s camera and microphone can be accessed via Media capture that removes the gap between native and web app, while accessing media of mobile. Browsers provide a default control set for video and audio player. By utilizing the powerful APIs custom audio and video player can be created that fits for a mobile app.

There are great JavaScript framework such as Sencha Touch, jQuery Mobile, Kendo and more… to get the native looking applications.

Device Orientation events

A web app is more interactive if Orientation and Motion information of device can be captured. W3c has come up with DeviceOrientation event in HTML5 that helps to make web app more interactive.

Canvas drawing and animation

HTML5 canvas is widely supported standard for multimedia projects, visualizations and games. It helps to make graphics and animation lighter and interactive in small devices.

Conclusion

HTML5 has introduced many cutting-edge features that help to create great mobile apps with speed, performance and good user experience but HTML5 is an under development technology and its browser support is different in every browser. HTML5Test.com and mobilehtml5.org can be used to test the browser compatibility and make a fallback plan for the browsers that do not support the required features.