HTML5 and the Mobile Web

By Rob Gravelle

HTML5 and the Mobile Web

Don't look now, but the World-Wide-Web has just become a lot smaller. Well, not exactly. The Web itself is as expansive as ever, but the devices that we're using to surf it have gotten significantly smaller than they used to be. The widespread use of browser-based Internet services from handheld mobile devices such as smartphones has led to a new term called the Mobile Web. According to Wikipedia, "the shift to mobile Web access has been accelerating with the rise since 2007 of larger multitouch smartphones, and of multitouch tablet computers since 2010." Needless to say, this paradigm shift has had significant ramifications in both web design and application development. In particular, HTML5 has had to step up its game, as the distinction between native and mobile Web applications becomes increasingly blurred. In today's article, we'll examine just a few of the ways that HTML5 has adapted to serve the Mobile Web.

Some Key Stats

In November of 1016, Adobe released their survey results on "Users Preference for using a mobile browser vs native app for accessing select types of mobile contents". The survey revealed that most mobile users preferred to use mobile browsers to access virtually all mobile contents, especially for e-commerce/online shopping, news, and product reviews. The only categories in which users preferred native apps were games, music and social media.

From these results we can conclude that any organization faced with implementing mobile apps across multiple platforms should at least consider HTML5.

Bearing that in mind, here are a few key HTML5 features for mobile devices:

Offline Support

Running connected apps in a mobile device is not without its challenges. Consider what happens during an interim loss of connection, caused by passing through a tunnel, or an extended period of offline activity, during a long-haul flight. To deal with these conditions, the HTML5 spec introduced three new features: the AppCache, Indexed Database API (IndexedDB), and Web Storage. The goal is to allow mobile apps to store things locally on the device, so interruptions in connectivity won't impair the user's ability to get their work done.

The AppCache

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
/js/scripts.js
/css/styles.css
/images/loading.gif
/images/toolbar.png

The path to the manifest is set as a attribute of the HTML tag:

<!DOCTYPE HTML>
<html manifest="./cache_manifest.php">

Web Storage

For some reason, the IndexedDB has not caught on with browser vendors. Maybe that's because developers have found Web Storage to be sufficient. Before HTML5, the only means of storing application data was cookies. Local storage is more secure, and can handle much larger amounts of data (5MB+).

HTML local storage provides two objects for storing data on the client:

  • window.localStorage: stores data with no expiration date
  • window.sessionStorage: stores data for one session so that data is lost when the browser tab is closed

Here's some code that stores and retrieve's a person's last name:

// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

The Canvas

Of all the new elements introduced in HTML5, few have received as much attention as the canvas element. Its contribution to mobile development is that it facilitates the use of graphics without the need for any plugins or other technologies other than JavaScript and CSS. Content may include interactive pictures, charts and graphs, game components, and anything else that can be drawn programmatically. Here's an example of a left-to-right gradation effect:

<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
 var c = document.getElementById("myCanvas");
 var ctx = c.getContext("2d");
 
 // Create gradient
 var grd = ctx.createLinearGradient(0,0,200,0);
 grd.addColorStop(0,"red");
 grd.addColorStop(1,"white");
 
 // Fill with gradient
 ctx.fillStyle = grd;
 ctx.fillRect(10,10,150,80);
</script>

This how the above would appear, using a CSS approximation, just in case your browser doesn't support the canvas element:

Video and Audio Streaming

Whereas the canvas brings static graphics to the Web, the HTML5 AUDIO and VIDEO elements increase HTML5's capabilities by enabling the native streaming of audio and video content. Both are made up of an opening and a closing tag so that you can include multiple source files of different formats. The browser will go down the list until a compatible one is found. Here is an example of both an AUDIO and VIDEO player:

<p>An audio player:</p>
<audio controls="controls" id="audio_player">
  <source src="track.ogg" type="audio/ogg" />
  <source src="track.mp3" type="audio/mpeg" />
  Your browser does not support the audio element.
</audio>

<p>A video player:</p>
<video width="320" height="240" controls="controls" autoplay>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

Each exposes a JavaScript API so that playback can be controlled programmatically. If you want to know more about those, I wrote tutorials on how to build an

audio player and HTML5 video player.

GeoLocation API

Though not technically part of HTML5 (it's defined within a separate specification), the geolocation API provides trusted web sites details about your location. This much sought-after feature has heralded a wave of location-aware web apps. These have become integrated with Google Maps to provide all sorts of useful information, such as locations of nearby businesses and attractions, directions, distances, weather, etc.

The latitude and longitude are available to JavaScript on the page via the getCurrentPosition() method. It accepts a successCallback function, an errorCallback function, and a few optional options. Here's some code that displays the user's geocoordinates in an element called "coords":

//method syntax:
//navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options);

var coords = document.getElementById("coords");
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else {
        coords.innerHTML = "Geolocation is not supported by this browser.";
    }
}
 function showPosition(position) {
    coords.innerHTML = "Latitude: " + position.coords.latitude +
            "<br>Longitude: " + position.coords.longitude;
 }

Conclusion

The above mobile web-driven features are among the most widely supported today. Other emerging HTML5 features that currently garner little or no support include things like Microdata, 3D animation rendering, the FileReader API, IndexedDB, and WebWorkers. Some of these may gain more widespread support in time, while others will likely fade into obscurity. One thing's for certain; we'll know fairly soon which way each will go.



Rob Gravelle

Rob Gravelle resides in Ottawa, Canada, and has built web applications for numerous businesses and government agencies. Email him for a quote on your project.

Rob's alter-ego, "Blackjacques", is an accomplished guitar player, that has released several CDs. His band, Ivory Knight, was rated as one of Canada's top hard rock and metal groups by Brave Words magazine (issue #92) and reached the #1 spot in the National Heavy Metal charts on ReverbNation.com.



Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date