HTML5 in 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
online.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]

The proper MIME type "text/cache-manifest" should also be set on the server for the cache manifest.^[2] 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]

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]

Differences between 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.^[13] When choosing what type of mobile application to develop it is important to keep these in mind.