HTML5 in mobile devices

From Wikipedia, the free encyclopedia
Jump to: navigation, search
HTML5 logo and wordmark.svg

In mobile devices, HTML5 is often used for mobile websites and mobile applications on Mobile operating systems such as Firefox OS, Sailfish OS, Tizen, and Ubuntu Touch. It provides developers with tools such as Offline Web Storage, GeoLocation API, Canvas Drawing, CSS3, and many more.

In Windows 8, developers can build HTML5, Metro Style apps.[1]

Key features for mobile devices[edit]

Offline support[edit]

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.[2]

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.[3]

<html manifest="manifest.mf">

The proper MIME type "text/cache-manifest" should also be set on the server for the cache manifest.[3]

Canvas drawing[edit]

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[edit]

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.[4]

GeoLocation API[edit]

This is actually not part of HTML5, but is a separate specification. The geolocation API lets you share your location with trusted web sites. (This is actually the physical location of the device or of your internet connection, decided based on some combination of GPS, accelerometers, cellphone tower triangulation, and ISP address records.) The latitude and longitude are available to JavaScript on the page, which in turn can send it back to the remote web server and show you location-aware content like local businesses or show your location on a map.[5]

Following is the prominent API for a geolocation.

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.[6]

Advanced forms[edit]

Even simple things like the improvements in HTML5 for forms could make life easier for mobile applications. Fields that can be validated by the browser are improvements for mobile devices. The more that can be handled by the browser means less time downloading JavaScript code and fewer round trips to the server if validation can be found before the form is posted.[4]

HTML5 capabilities in top mobile devices[edit]

A Mobile Web Metrics Report demonstrates HTML5 capabilities in mobile devices[7]. The report checked how many HTML5 features are supported by different devices that access the mobile web.

Top 5 supported features[edit]

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[edit]

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[edit]

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.[8]

Frameworks for app development[edit]

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:

Appear IQ[edit]

Appear IQ is a mobility platform that simplifies the development and management of context-aware hybrid mobile web applications (HTML5, CSS3, JavaScript), native mobile applications as well as their integration with enterprise IT systems. It allows developers to make use of their web skills to craft powerful mobile applications that are optimized to the end user's needs.[9]

Enyo[edit]

Enyo is an object-oriented JavaScript cross platform and cross device application framework emphasizing modularity and encapsulation. It was originally launched for developers to create applications for the HP TouchPad with Enyo 1.0 which ran the mobile operating system WebOS version 3.0. In January 2012, Enyo 2.0 was released as an open source project with support for several mobile operating systems and browsers. Since then, Enyo has been updated to version 2.2 for support for many more mobile operating systems and browsers along many other additions of usability to the development framework.[10]

DaVinci Studio[edit]

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.[11]

DHTMLX Touch[edit]

DHTMLX Touch is an HTML5-based JavaScript library for building mobile web applications, in the form of UI widgets and a cross-platform application framework compatible with the major web browsers for mobile platforms. Applications built with DHTMLX Touch will run smoothly on iPad, iPhone, Android-based smartphones, and other popular devices.[12]

Google Web Toolkit[edit]

Google Web Toolkit is a web app framework that can be used for developing mobile html5 apps in Java, especially in combination with optimized mobile widget libraries such as m-gwt

JavaScript[edit]

JavaScript, is a scripting language built into nearly every modern browser. In Windows 8 and Windows RT (both HTML Application and Windows Runtime), any HTML5 apps fully supported mobile operating systems (Firefox OS and WebOS, Tizen and Ubuntu Touch), event handling in HTML5 apps is made possible by JavaScript.

Jo[edit]

Jo is a JavaScript framework for HTML5 capable browsers and devices. It was originally designed to work on mobile platforms as a GUI and light data layer on top of PhoneGap. Since its creation, Jo also works as a lightweight framework for mobile browsers, newer desktop browsers, and dashboard widgets.[13]

jQuery Mobile[edit]

jQuery Mobile, is a unified user interface system across all popular mobile device platforms, built on jQuery and jQuery UI.[14]

jQTouch[edit]

jQTouch is jQuery plugin for mobile web development on the iPhone, iPod Touch, Android 2.3+, and other forward-thinking devices. This framework is heavy on the CSS, while light on the JavaScript.[15]

KonyOne[edit]

KonyOne is a multichannel mobile applications platform from Kony Solutions that supports all browsers including HTML5 across channels (phones, tablets, kiosks and desktops).[16]

M-Project[edit]

The-M-Project is an HTML5 JavaScript framework that targets iOS, Android, BlackBerry and webOS platforms. It makes use of jQuery on the JavaScript part and contains all UI and core files with features like offline support, internationalization and more.[17]

LungoJs[edit]

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.

MobileNationHQ[edit]

MobileNationHQ is a web based tool that uses a visual programming paradigm to facilitate the creation of HTML5 mobile applications for iOS and android. The tool also supports the integration of custom JavaScript[18]

qooxdoo Mobile[edit]

qooxdoo is a universal JavaScript framework that enables you to create applications for a wide range of platforms. With its object-oriented programming model you build native-like apps for mobile devices, leveraging an integrated tool chain and a state-of-the-art GUI toolkit.

Sencha Touch[edit]

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.[19]

Smart Mobile Studio[edit]

Smart Mobile Studio is an Object Pascal based compiler toolchain and IDE for HTML5 development. The compiler processes Object Pascal source code into a JavaScript driven web/mobile application. The IDE contains several components that can be organized in a visual designer. The Smart Pascal dialect supports various wrapping and mapping methods against the JavaScript language. Such as "asm sections" that contains pure JavaScript and "external method/class directive" that defines the interface in Smart Pascal and the implementation in JavaScript.[20]

SproutCore[edit]

SproutCore, is an open source HTML5/JavaScript for building web and mobile apps. Through the use of PhoneGap, SproutCore applications can be wrapped into native apps that run on iOS, Blackberry and Android platforms.

ViziApps[edit]

ViziApps is a mobile app development platform that supports creation of HTML5 web apps and hybrid apps for iPhones, iPads, Android phones, and Android tablets without coding. App developers use a drag-and-drop approach to design and build mobile apps with ViziApps and access data with Google spreadsheets, web services, SQL databases and other popular web data sources. In addition to no-coding app design, custom JavaScript can be added to include 3rd party libraries and to extend app functionality.[21]

Worklight[edit]

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.[22]

Appzillon[edit]

Appzillon is a mobile application development platform from i-exceed technology solutions. Appzillon is used to develop hybrid mobile apps, web applications and supports native mobile capabilities such as calls, SMS, camera, calendar, accelerometer, etc. The proprietary IDE of Appzillon contains a grid based designer that allows drag-and-drop of widgets and charts to design HTML5 screens. Appzillon IDE provides an embedded simulator, adaptive widgets and deployment enabler. Appzillon supports integration with different types of enterprise services using their service formats.[23][24][25][26][27][28]

Hybrid Mobile Apps[edit]

A hybrid mobile application (or hybrid mobile app) is a mobile application that runs inside of a native container and leverages the device’s web browser to display locally hosted HTML pages.[29] Hybrid mobile apps are composed mostly of HTML, JavaScript, and CSS. Device specific functionalities such as camera access, geolocation, and accelerometer readings are exposed through a JavaScript API.

Differences from Native Apps and Mobile Web Apps[edit]

Hybrid mobile apps contain a mixture of native app and mobile web app concepts. They do contain native code but are not completely native. Typically the native code is provided by a framework and reveals a JavaScript API so that the app’s JavaScript code can perform native functions such as taking a picture with the camera. Extra functionality can also be implemented by creating native “plugin” components for the framework that perform a native task.

Unlike mobile web apps, which store source files on a server, hybrid mobile apps store HTML, JavaScript, and CSS files locally so no Internet access is required to launch a hybrid mobile app.[30] [31]To the user a hybrid mobile app appears to be no different from a native app; it is launched and closed in the same manner as opposed to a mobile web app, which must be accessed through the device’s web browser app.

Pros and Cons of Hybrid Apps[edit]

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.

Pros[edit]

  • Hybrid mobile apps allow code reuse across platforms. Let the library or framework you are using take care of the platform specific differences and use the same JavaScript code on both platforms.[30]
  • JavaScript is something that many developers are already familiar with where something like the iOS development tools are more specialized. It can be argued that there is less of a learning curve when developing hybrid mobile apps compared to native apps.[29]
  • The app's 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.

Cons[edit]

  • Hybrid mobile apps are more susceptible to user interface lag due to the extra layers of abstraction.[29]
  • 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.[30]

Hybrid Mobile App Frameworks[edit]

Name Website License Latest Version API
Apache Cordova (previously PhoneGap) [32] Apache License, v2.0 3.5.0
Appcelerator Titanium [33] Proprietary 3.1.1
Appear IQ [34] Proprietary 8.0.2 -
HP Anywhere [35] Proprietary 10.11 -
IBM Worklight [36] Proprietary 5 -
Oracle ADF Mobile Framework [37] Proprietary 11.1.1.6 Java JDK 1.4
KonyOne [16] 5.0 -
CocoonJS by Ludei [38] Proprietary 1.4.4
Kendo Mobile [39] Proprietary 2013.2.716
Appzillon [23][24][25][26][27][28] Proprietary 2.2.0

See also[edit]

References[edit]

  1. ^ "Create your first Windows Store app using JavaScript (Windows)". Msdn.microsoft.com. 2013-06-21. Retrieved 2013-07-10. 
  2. ^ "» HTML5 from a Mobile Perspective Cloud Four Blog". Cloudfour.com. 2009-07-22. Retrieved 2013-11-13. 
  3. ^ a b 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. 
  4. ^ a b [1][dead link]
  5. ^ "Geolocation". Dive Into HTML5. Retrieved 2013-11-13. 
  6. ^ "geo-location-javascript - javascript geo location framework for the mobile web - Google Project Hosting". Code.google.com. Retrieved 2013-11-13. 
  7. ^ "HTML5 Mobile app". HTML5 capabilities in top mobile devices. Retrieved 2014-08-20. 
  8. ^ [2][dead link]
  9. ^ "Appear". Appear. Retrieved 2013-12-09. 
  10. ^ "FAQ | Enyo JS". Enyojs.com. Retrieved 2013-05-14. 
  11. ^ "DaVinci Homepage". Davincisdk.com. 2013-06-16. Retrieved 2013-11-13. 
  12. ^ "DHTMLX Touch - JavaScript Mobile Framework for Building HTML5 Web Apps". Dhtmlx.com. 2012-09-13. Retrieved 2013-11-13. 
  13. ^ "Jo HTML5 Mobile App Framework Documentaion". Joapp.com. Retrieved 2013-11-13. 
  14. ^ "jQuery Mobile". jQuery Mobile. Retrieved 2013-11-13. 
  15. ^ "jQT (formerly jQTouch) — Zepto/jQuery plugin for mobile web development". Jqtouch.com. Retrieved 2013-11-13. 
  16. ^ a b "Development Cloud | Enterprise multi-channel & mobile app development". Kony. Retrieved 2013-11-13. 
  17. ^ "The-M-Project Absinthe". The-m-project.net. Retrieved 2013-11-13. 
  18. ^ "MobileNation | The cloud based mobile app builder for the web, iOS and Android". Mobilenationhq.com. 2012-10-25. Retrieved 2013-11-13. 
  19. ^ "Mobile App Development Framework. JavaScript and HTML5. Download Sencha Touch Free. | Sencha Touch | Products". Sencha. Retrieved 2013-11-13. 
  20. ^ "About". Smart Mobile Studio. Retrieved 2013-11-13. 
  21. ^ "Build iPhone Apps, Build Android Apps". ViziApps. Retrieved 2013-11-13. 
  22. ^ "IBM Worklight - United States". Worklight.com. Retrieved 2013-11-13. 
  23. ^ a b "Appzillon". 
  24. ^ a b "Appzillon at Finovate Asia". 
  25. ^ a b "Launch of Appzillon at SIBOS,Japan". 
  26. ^ a b "Launch of Appzillon". 
  27. ^ a b "Business directory, i-exceed Technology Solutions". 
  28. ^ a b "i-exceed Technology Solutions among the finalists in Citi Latam Challenge". 
  29. ^ a b c What is a Hybrid Mobile App?
  30. ^ a b c Native, HTML5, or Hybrid
  31. ^ Native vs HTML5 vs Hybrid
  32. ^ "Apache Cordova". Cordova.apache.org. Retrieved 2013-11-13. 
  33. ^ "Titanium SDK | Mobile App Development | Appcelerator Inc". Appcelerator.com. 2013-09-15. Retrieved 2013-11-13. 
  34. ^ "Appear IQ". Appear. Retrieved 2013-12-09. 
  35. ^ "HP Anywhere | Mobile App Development Platform | HPAnywhere". HP. Retrieved 2014-01-09. 
  36. ^ "IBM Worklight - United States". 01.ibm.com. Retrieved 2013-11-13. 
  37. ^ "Oracle ADF Mobile Home Page". Oracle.com. Retrieved 2013-11-13. 
  38. ^ "We love HTML5 games". Ludei. Retrieved 2013-11-13. 
  39. ^ "HTML5 and jQuery Mobile Development Framework | Kendo UI Mobile". Kendoui.com. Retrieved 2013-11-13. 

External links[edit]