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"); }
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
- https://developer.mozilla.org/en-US/docs/Web/API
- http://mobilehtml5.org/
- http://www.html5rocks.com/en/tutorials/device/orientation/
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.
Comments for this article