HTML5 in mobile devices
HTML5 provides developers with tools such as Offline Web Storage, GeoLocation API, Canvas Drawing, CSS3, and many more.
- 1 Key features for mobile devices
- 2 HTML5 capabilities in top mobile devices
- 3 Frameworks for app development
- 3.1 Appear IQ
- 3.2 Enyo
- 3.3 DaVinci Studio
- 3.4 DHTMLX Touch
- 3.5 Google Web Toolkit
- 3.7 Jo
- 3.8 jQuery Mobile
- 3.9 jQTouch
- 3.10 KonyOne
- 3.11 M-Project
- 3.12 LungoJs
- 3.13 MobileNationHQ
- 3.14 qooxdoo Mobile
- 3.15 Sencha Touch
- 3.16 Smart Mobile Studio
- 3.17 SproutCore
- 3.18 ViziApps
- 3.19 Worklight
- 4 Hybrid Mobile Apps
- 5 See also
- 6 References
- 7 External links
Key features for mobile devices
The AppCache and database make it possible for mobile developers to store things locally on the device and interruptions in connectivity will not affect the ability for someone to get their work done.
Offline support helps browsers cache static pages. They depend more on HTTP response headers sent by web servers to fetch HTML, CSS and multimedia required to render the web page. If everything required to render is cached, then a page loads quickly, but even if one item is not cached then everything slows down dramatically.
To provide offline support, a cache manifest file should be created to specify the offline application's resources—i.e. its pages, images, and other files needed to run offline. Typically, the manifest also contains a comment that is changed when any of the resources change, prompting the browser to refresh the cache.
CACHE MANIFEST # Version 0.1 offline.html /iui/iui.js /iui/iui.css /iui/loading.gif /iui/toolbar.png /iui/whiteButton.png /images/gymnastics.jpg /images/soccer.png /images/gym.jpg /images/soccer.jpg
The "manifest" attribute of the app's "html" element should specify the URL of the manifest file.
Sites can mark off a space on a page where interactive pictures, charts and graphs, game components, and other imaginations can be drawn directly by programming code and user interaction — no Flash or other plug-ins are required.
Video and audio streaming support
Development is in the very early stages and subject to format disruption, but sites like YouTube and Pandora could one day skip Flash entirely and bring streaming audio and video, with timed playback and further features.
navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options);
Geolocation is an object which is part of Navigator object. It uses the getCurrentPosition() method. Finding location is an asynchronous operation as it requires the user’s permission for access. Hence callback functions for success and failure are required.
HTML5 capabilities in top mobile devices
A Mobile Web Metrics Report demonstrates HTML5 capabilities in mobile devices. The report checked how many HTML5 features are supported by different devices that access the mobile web.
Top 5 supported features
GeolocationAPI, offline web application support, WebStorage, CSS3 Selectors and 2D animations are the top five supported features referred to by the term HTML5 across the top 15 mobile devices in all USA, UK, Germany, Malaysia, Australia markets examined.
Top 5 partially supported features
Misc. Element types and attributes, extended user interaction concept, CSS3 in General, extended form concept, and extended video / audio support are the top five partially supported HTML5 features across the top 15 mobile devices in all USA, UK, Germany, Malaysia, Australia markets examined.
Top 5 not supported features
Microdata, 3D animation rendering, FileReader API, IndexedDB, and local Device support or the WebWorkers feature respectively are the top five HTML5 features not supported across the top 15 mobile devices in all USA, UK, Germany, Malaysia, Australia markets examined.
This report concludes that HTML5 is a welcome addition to the mobile party, but it does not negate device and OS fragmentation.
Frameworks for app development
With HTML5 and mobile web development new tools and frameworks are popping up to provide a more consistent and comprehensive HTML5 support across mobile browsers. Such HTML5 mobile web frameworks are:
DaVinci is a framework that supports HTML5 mobile app development. The tool has a WYSIWYG (What You See Is What You Get) authoring environment in which users may drag and drop components to build applications. It also comes with a jQuery framework as well as other libraries and allows users to integrate open source libraries of their choice into the tool.
Google Web Toolkit
LungoJs is a framework powered by HTML5, CSS3 for iOS, Android, BlackBerry and WebOS. It has support for touch events like tap, double-tap or swipe and does not use images (including the icons), as everything is vectorized.
Sencha Touch is the first HTML5 framework for mobile devices. This framework builds web applications that make sense for mobile devices. It comes with a comprehensive UI widget library, complete touch event management with CSS transitions and an extensive data package.
Smart Mobile Studio
Worklight is a mobile application platform that supports the development of HTML5, hybrid and native mobile applications. The Worklight Studio - the platform's IDE - allows mobile developers to make full use of all existing HTML5 functionality as well as further enhance these capabilities with utilities and mechanisms required by modern organizations such as encryption of locally stored data, offline authentication, combined HTML5 and native coding, 3rd-party library integration with frameworks such as PhoneGap, Sencha Touch, JQuery, and more.
Hybrid Mobile Apps
Differences from Native Apps and Mobile Web Apps
Pros and Cons of Hybrid Apps
Hybrid mobile apps have their pros and cons. When choosing what type of mobile application to develop it is important to keep these in mind.
- The apps interface and logic can be built and debugged in the web browser using an emulation framework. This could lower development costs depending on the tools required to develop native apps for the target platforms.
- Hybrid mobile apps are more susceptible to user interface lag due to the extra layers of abstraction.
- Only a certain subset of native functionality is available which depends on the framework. All others native functions are accessible developing Plugins
- As for native apps, the hybrid code base requires recompilation and resubmission to the distribution network where it is possible to instantly update a mobile web app’s codebase.
Hybrid Mobile App Frameworks
|Apache Cordova (previously PhoneGap)||||Apache License, v2.0||3.0.0||Docs|
|Appcelerator Titanium||||Proprietary||3.1.1||Titanium docs|
|Oracle ADF Mobile Framework||||Proprietary||18.104.22.168||Java JDK 1.4|
|KonyOne||||Non-Proprietary[dubious ]||5.0||-|
|CocoonJS by Ludei||||Proprietary||1.4.4||Ludei|
- "» HTML5 from a Mobile Perspective Cloud Four Blog". Cloudfour.com. 2009-07-22. Retrieved 2013-11-13.
- Michael Galpin. "Creating mobile Web applications with HTML 5, Part 3: Make mobile Web applications work offline with HTML 5". Ibm.com. Retrieved 2013-11-13.
- [dead link]
- "Geolocation". Dive Into HTML5. Retrieved 2013-11-13.
- [dead link]
- [dead link]
- "Appear". Appear. Retrieved 2013-12-09.
- "FAQ | Enyo JS". Enyojs.com. Retrieved 2013-05-14.
- "DaVinci Homepage". Davincisdk.com. 2013-06-16. Retrieved 2013-11-13.
- "Jo HTML5 Mobile App Framework Documentaion". Joapp.com. Retrieved 2013-11-13.
- "jQuery Mobile". jQuery Mobile. Retrieved 2013-11-13.
- "jQT (formerly jQTouch) — Zepto/jQuery plugin for mobile web development". Jqtouch.com. Retrieved 2013-11-13.
- "Development Cloud | Enterprise multi-channel & mobile app development". Kony. Retrieved 2013-11-13.
- "The-M-Project Absinthe". The-m-project.net. Retrieved 2013-11-13.
- "MobileNation | The cloud based mobile app builder for the web, iOS and Android". Mobilenationhq.com. 2012-10-25. Retrieved 2013-11-13.
- "About". Smart Mobile Studio. Retrieved 2013-11-13.
- "Build iPhone Apps, Build Android Apps". ViziApps. Retrieved 2013-11-13.
- "IBM Worklight - United States". Worklight.com. Retrieved 2013-11-13.
- What is a Hybrid Mobile App?
- Native, HTML5, or Hybrid
- "Apache Cordova". Cordova.apache.org. Retrieved 2013-11-13.
- "Titanium SDK | Mobile App Development | Appcelerator Inc". Appcelerator.com. 2013-09-15. Retrieved 2013-11-13.
- "Appear IQ". Appear. Retrieved 2013-12-09.
- "IBM Worklight - United States". 01.ibm.com. Retrieved 2013-11-13.
- "Oracle ADF Mobile Home Page". Oracle.com. Retrieved 2013-11-13.
- "We love HTML5 games". Ludei. Retrieved 2013-11-13.
- "HTML5 and jQuery Mobile Development Framework | Kendo UI Mobile". Kendoui.com. Retrieved 2013-11-13.
- WHAT HTML5 Editor's Draft
- W3C HTML5 Associated Vocabulary and APIs
- W3C The HTML5 differences with HTML4
- W3C GeoLocation API