5 HTML5 Javascript APIs to keep an eye on

In my last post, i have talked about HTML5 APIs, so thought it will also interesting to write about some new old JavaScript APIs. Since CSS has been improving over the time and today you can achieve what was only done with Javascript with CSS only, on the other side Javascript have to improve and follow the evolution, so today Javascript can do a lot of things, like accessing hardware(camera, microphone, gamepad, GPU), accessing the filesystem and websocket.

Battery Status API

The Battery Status API allows any webpage to inspect the state of the device's (Laptop, phone or tablet) battery through javascript :

var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery

console.log("Battery charging: ", battery.charging); // true
console.log("Battery level: ", battery.level); // 0.58
console.log("Battery discharging time: ", battery.dischargingTime);

As you can see you need to do more checks to make your code cross-browser compatible, i have done some researches and i have found battery.js a tiny wrapper for the Battery Status API :

if(Battery.isSupported()) {
    // Get the battery status
    var status = Battery.getStatus();
    console.log('Level: ' + Math.floor(status.level * 100) + '%'); // 30%
    console.log('Charging: ' + status.charging);                   // true
    console.log('Time until charged: ' + status.chargingTime);     // 3600 (seconds) or Infinity
    console.log('Battery time left: ' + status.dischargingTime);   // 3600 (seconds) or Infinity

    // Register a handler to get notified when battery status changes
    Battery.onUpdate = function(status) {
        console.log(status); // {level, charging, chargingTime, dischargingTime}
    };
}

Gamepad API

Gamepad API allows you to connect your console gamepad into your computer and use it for browser based games. With the increase in popularity of HTML5 games this API will have a prominent future.

navigator.gamepads = navigator.webkitGamepads || navigator.MozGamepads;

var requestAnimationFrame = window.webkitRequestAnimationFrame ||
                            window.mozRequestAnimationFrame;
var cancelAnimationFrame = window.webkitCancelAnimationFrame ||
                           window.MozCancelAnimationFrame;

var controllers = {}; // Stash connected controllers.
var reqId = null;

function onConnected(e) {
    controllers[e.gamepad.index] = e.gamepad;
    runAnimation();
}

function onDisconnected(e) {
    delete controllers[e.gamepad.index];
    cancelAnimationFrame(reqId);
}

window.addEventListener('webkitgamepadconnected', onConnected, false);
window.addEventListener('webkitgamepaddisconnected', onDisconnected, false);

window.addEventListener('MozGamepadDisconnected', onDisconnected, false);
window.addEventListener('MozGamepadConnected', onConnected, false);

Source : The Edge of HTML5

There is a library called gamepadjs, which will let you use this API very easily.

Device Orientation API

Using device orientation, you can determine the orientation of the device as well as gather information about its movement (alpha, beta and gamma).

if (window.DeviceOrientationEvent) {
    window.addEventListener('deviceorientation', function(event) {
        var a = event.alpha,
            b = event.beta,
            g = event.gamma;
        console.log('Orientation - Alpha: ' + a + ', Beta: '+ b + ', Gamma: ' + g);
    }, false);
} else {
    console.log('This device does not support deviceorientation');
}

To use this feature your device must have gyroscope capabilities, more about browser support can be found on caniuse.com.

Geolocation API

The Geolocation API lets you share your location with trusted web sites. The latitude and longitude are available to JavaScript on the page, which in turn can send it back to the remote web server and do fancy location-aware things like finding local businesses or showing your location on a map, it can be also used for "geo-tagging" user's content like photos.

if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
        var lat = position.coords.latitude,
            lon = position.coords.longitude;
        console.log('Geolocation - Latitude: '+ lat +', Longitude: '+ lon);
    });
}
else {
    console.log('Geolocation is not supported for this Browser/OS version yet.');
}

More about browser support can be found on caniuse.com.

Page Visibility API

The Page Visibility API let's you determine if your page is visible or not, when you minimise the page or move to another tab, a visibilitychange event is triggered, this can be very useful if you are a game developer this will allow you to pause the game when the user change the page.

document.addEventListener('visibilitychange', function(e) {
    console.log('hidden:' + document.hidden,
              'state:' + document.visibilityState)
}, false);

More about browser support can be found on caniuse.com.

Let me know your thoughts in the comments below, also you can discuss, upvote this post over at Hacker News.