HTML5 in mobile devices
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.
Key features for mobile devices
Offline support
The AppCache, Indexed Database API, and Web storage makes it possible for mobile developers to store things locally on the device, so interruptions in connectivity will not affect the ability for someone to get their work done.[1]
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.[2]
<html manifest="manifest.mf">
The proper MIME type "text/cache-manifest" should also be set on the server for the cache manifest.[2] It should be noted that the use of "manifest" attribute is deprecated. [3] [4]
Canvas drawing
Sites can mark off a space on a page using a Canvas element 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.[5]
GeoLocation API
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.[6]
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.[7]
Advanced forms
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.[8]
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.[9]
Hybrid Mobile Apps
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.[10] 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
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.[11][12] 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
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
- Hybrid mobile apps allow code reuse across platforms. The library or framework takes care of the platform-specific differences and uses the same JavaScript code on both platforms.[11]
- 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.[10]
- 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
- Hybrid mobile apps are more susceptible to user interface lag due to the extra layers of abstraction.[10]
- Only a certain subset of native functionality is available which depends on the framework. All others native functions are accessible by developing Plugins.
- For native apps, the code base requires recompilation and resubmission to the distribution network, whereas it is possible to instantly update a hybrid mobile web app’s codebase.[11]
Hybrid Mobile App Frameworks
| Name | License | Latest Version | API |
|---|---|---|---|
| Apache Cordova (previously PhoneGap) | Apache License, v2.0 | 3.5.0 | |
| Appcelerator Titanium | Proprietary | 4.0.0 | |
| Appear IQ | Proprietary | 8.0.2 | - |
| HP Anywhere | Proprietary | 10.11 | - |
| IBM MobileFirst | Proprietary | 8.0 | - |
| NSB/AppStudio | Proprietary | 5.0.15 | - |
| Oracle ADF Mobile Framework | Proprietary | 11.1.1.6 | Java JDK 1.4 |
| KonyOne | 5.0 | - | |
| Appzillon | Proprietary | 3.1.0 | |
| Protocol (Adromil Bogus iFrame) | Proprietary | 3.0.9 | Bogus API 2.4 |
See also
References
- ↑ "» HTML5 from a Mobile Perspective Cloud Four Blog". Cloudfour.com. 2009-07-22. Retrieved 2013-11-13.
- 1 2 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.
- ↑ https://developer.mozilla.org/en/docs/Web/HTML/Element/html
- ↑ https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache
- ↑ "» 8 Tips For Creating a Mobile Friendly App". TaxSmart Technologies.
- ↑ "Geolocation". Dive Into HTML5. Retrieved 2013-11-13.
- ↑ "geo-location-javascript - javascript geo location framework for the mobile web - Google Project Hosting". Code.google.com. Retrieved 2013-11-13.
- ↑ "» Native App Development Vs. HTML5 – Which is better?". TaxSmart Technologies.
- ↑
- 1 2 3 What is a Hybrid Mobile App?
- 1 2 3 Native, HTML5, or Hybrid
- ↑ Native vs HTML5 vs Hybrid
External links
- WHAT HTML5 Editor's Draft
- W3C HTML5 Associated Vocabulary and APIs
- W3C The HTML5 differences with HTML4
- W3C GeoLocation API
- What Web Can Do Today - overview of the device integration HTML5 APIs