HTML5 JavaScript API for mobile devices

Empower website with new HTML5 JavaScript API

HTML5 is awesome for desktop websites and believe it or not, even more awesome for mobile devices. In the following article, I'll show you few HTML5 APIs which can be invoked from JavaScript which directly interact with your mobile device, so let's start.

Geolocation API

This API allows you to fetch client's geolocation (longitude and latitude). On your mobile device this will require GPS to be switched on. The following is an example how to use it with JavaScript.

if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        $("#location").html(
          "Latitude: " + position.coords.latitude +
          "<br>Longitude: " + position.coords.longitude);
      });
    } else {
      $("#location").html("Geolocation is not supported by this browser.");
    }
    

View Demo
It works even on desktop websites but it does not use GPS (because obviously not many desktop computers have GPS adapter). Instead, it uses combination of your local network and Google services like Chrome does on you desktop works.

Vibration API

This will enable to make client's mobile device vibrate when they interact with your mobile website. The following is an exmple how it is invoked from JavaScript:

    if (window.navigator && window.navigator.vibrate) {
      $("#info").html("I'm vibrating for 3 seconds!");
      navigator.vibrate(3000);
    } else {
      $("#info").html("Vibration not supported in this browser");
    }
    

View Demo
Even though your dektop cannot vibrate, your dekstop browser will probably report that it supports and you will see vibration message. This is because browser does support this HTML5 feature, it is just not hardware supported.

Battery Status API

This API allows you to check the status of your battery. The following example will check whether device on charger or not.

if (window.navigator && window.navigator.battery) { if (!navigator.battery.charging) { $("#info").html("Battery charged " + battery.level * 100 + " %"); } else { $("#info").html("Battery is charging");  
  }  
} else {  
  $("#info").html("Battery status not available");  
}
    

This can be useful for your side for example to run some WebGL animation or not whether device is on charger or not because it might take some more resources and of course will drain device battery.
View Demo

Web Notifications API

Every mobile device has some sort of notificatin on it. Implementation and layout is different from platform to platform, so the main role of this API is to provide standardized way of notifying the client about some event on the web page. The following is sample code and Plunker example:

if ('Notification' in window) {
  var notification = new Notification('Website notification', {
  body: 'Notification from a website'
});
} else {
  $("#info").html("Notifications not supported"); 
}
    

You can event test it in your desktop browser if it supports HTML5.
View Demo

Orientation API

Most of new mobile devices have hardvare support for this feature. It is implemented with three hardvare components combined: accelerometer, gyroscope and compass. Unfortunately not all mobile browsers support this HTML5 feature, but for those which does it can come as a very useful one. For example, based on parametes from event you can transform images on the page or in browser games, you can render out canvas differently based on device orientation.

if (window.DeviceOrientationEvent) {
  window.addEventListener('deviceorientation', function(eventData) {
    // gamma is the left-to-right tilt in degrees, where right is positive
    var tiltLR = eventData.gamma;
    // beta is the front-to-back tilt in degrees, where front is positive
    var tiltFB = eventData.beta;
    // alpha is the compass direction the device is facing in degrees
    var dir = eventData.alpha

	$("#info").html("Orientation: " + tiltLR + ":" + tiltFB + ":" + dir); 
	
  }, false);
} else {
  $("#info").html("Orientation not supported"); 
}
    

View Demo

Note

In case plunks do not work on your device or emulator, fetch them and host them locally for testing

To test these functionality you can use mobile device emulation in your desktop browser.

These are just a few APIs supported by modern browsers. There are a bunch of API calls you can use in mobile website pages.

In the end we can conclude that these are all awesome features, but unfortunatelly we will have to wait for some time until all browser vendors implement support for them. Right now pretty much al major browser vendors support them or support partialy, so it is pretty much safe to use them on your pages.

More about support of HTML5 Mobile APIs support you can find at mobilehtml5.org website

References

Disclaimer

Purpose of the code contained in snippets or available for download in this article is solely for learning and demo purposes. Author will not be held responsible for any failure or damages caused due to any other usage.


About the author

DEJAN STOJANOVIC

Dejan is a passionate Software Architect/Developer. He is highly experienced in .NET programming platform including ASP.NET MVC and WebApi. He likes working on new technologies and exciting challenging projects

CONNECT WITH DEJAN  Loginlinkedin Logintwitter Logingoogleplus Logingoogleplus

.NET

read more

SQL/T-SQL

read more

Umbraco CMS

read more

PowerShell

read more

Comments for this article