LearnExploring the JavaScript Device APIs

Photograph by Jeremy Keith (adactio)

The mobile revolution has completely changed how people access the web. It’s only natural then that the web should evolve to better suit the plethora of devices on which it’s now accessed.

When the web was first created 25 years ago, it was the child of the “workstation” computer. Over those 25 years, we’ve seen the web proliferate to desktop PCs, laptops, mobile phones, tablets, and now even fashion accessories like watches. There’s no questioning that the web is here to stay. But what will the future look like?

In this blog post, I want to take you on a journey through some of the JavaScript device APIs that are extending the functionality of the web to better match the capabilities of modern devices.

---

Note: Some of the technologies you’ll learn about in this post are already implemented in browsers, but others are not. I’ve included examples of how to use each of the APIs, and done my best to provide up-to-date browser support information.

---

Geolocation

The Geolocation API allows you to pinpoint the user’s location using the positioning capabilities of their device. Most of the time this will be done using GPS, but less accurate methods, such as WiFi-based positioning, may also be used.

// Get the location.
navigator.geolocation.getCurrentPosition(function(position) {
    // Get the positioning coordinates.
    var lat = position.coords.latitude;
    var lon = position.coords.longitude;

    // Do something interesting...
});

W3C Specification Learn about the Geolocation API

Specification Status: W3C Recommendation

Browser Support For The Geolocation API

The geolocation specification has been around for quite a while now. All modern web browsers include support for the API (including on mobile).

IE	Firefox	Chrome	Safari	Opera
9+	3.5+	4.0+	5.0+	10.6+

Android Browser	Blackberry	Chrome for Android	Firefox for Android	IE Mobile	Safari	Opera Mobile
2.1	7	33	26	10	3.2	11

Source: http://caniuse.com/#feat=geolocation

Device Orientation

The DeviceOrientation and DeviceMotion events provide a way to create applications that are aware of the physical positioning of a device. This is especially useful when building HTML5 games.

// Check to make sure the browser supprots DeviceOrientationEvents
if (window.DeviceOrientationEvent) {
  // Create an event listener
  window.addEventListener('deviceorientation', function(event) {
      // Get the left-to-right tilt (in degrees).
    var tiltLR = event.gamma;

    // Get the front-to-back tilt (in degrees).
    var titleFB = event.beta;

      // Get the direction of the device (in degrees).
    var direction = event.alpha;
  });
}

W3C Specification Learn about the Device Orientation API

Specification Status: Working Draft

Browser Support For The DeviceOrientation API

Browser support for the DeviceOrientation and DeviceMotion events is pretty good. Safari is the only desktop browser that doesn’t currently include support.

IE	Firefox	Chrome	Safari	Opera
11	6+	7+	–	15+

IE is the only mobile browser without support for the DeviceOrientation and DeviceMotion events.

Android Browser	Blackberry	Chrome for Android	Firefox for Android	IE Mobile	Safari	Opera Mobile
3+	10+	33+	26+	–	4.2+	12+

Source: http://caniuse.com/#feat=deviceorientation

Media Capture and Streams

Almost everything seems to have a camera on it these days: phones, tablets, glasses, and more. With the Media Capture and Streams API you can get access to the device camera using JavaScript.

Coupled with the power of WebRTC, this enables some pretty cool applications like real-time video conferencing without the need for third-party plugins.

// Request the camera.
navigator.getUserMedia(
    // Constraints
    {
        video: true
    },
    // Success Callback
    function(localMediaStream) {
          // Get a reference to the video element on the page.
        var vid = document.getElementById('camera-stream');

        // Create an object URL for the video stream and use this 
        // to set the video source.
        vid.src = window.URL.createObjectURL(localMediaStream);
    },
    // Error Callback
    function(err) {
        // Log the error to the console.
        console.log('The following error occurred when trying to use getUserMedia: ' + err);
    }
);

W3C Specification Learn about the Media Capture

Specification Status: Working Draft

Browser Support For Media Capture

Browser support for the Media Capture and Streams API is growing. Firefox, Chrome, and Opera currently include support in their desktop browsers.

IE	Firefox	Chrome	Safari	Opera
–	17+	21+	–	12.0-12.1 / 18.0+

On mobile, the Media Capture and Streams API is supported in the Blackberry browser, Chrome for Android, Firefox for Android, and Opera Mobile.

Android Browser	Blackberry	Chrome for Android	Firefox for Android	IE Mobile	Safari	Opera Mobile
–	10+	33+	26+	–	–	12+

Source: http://caniuse.com/#feat=stream

Vibration

The Vibration API allows developers to provide non-audible feedback to the user by harnessing the devices vibration motor.

// Vibrate for 1 second (1000 milliseconds).
navigator.vibrate(1000);

// Vibrate in sequence.
navigator.vibrate([500, 250, 500]);

This API is useful when building HTML5 games, or for making applications accessible to users with hearing impairments.

W3C Specification Learn about the Vibration API

Specification Status: Last Call Working Draft

Browser Support for The Vibration API

The Vibration API is supported in Firefox, Chrome, and Opera on the desktop. (Although the device will, of course, need to have a vibration motor for this to work.)

IE	Firefox	Chrome	Safari	Opera
–	11+	30+	–	17+

On mobile, the Vibration API is supported in the Android and Blackberry browsers, as well as in Chrome and Firefox for Android, and Opera Mobile.

Android Browser	Blackberry	Chrome for Android	Firefox for Android	IE Mobile	Safari	Opera Mobile
4.4+	10+	33+	26+	–	–	16+

Source: http://caniuse.com/#feat=vibration

Ambient Light

The Ambient Light API allows developers to access the light sensor on the device.

With the increasing popularity of bright, minimalist designs, many developers have added a “night mode” to their apps to make them easier to use in dark surroundings. You could use the data from the Ambient Light API to automatically switch between “day” and “night” modes.

window.addEventListener('devicelight', function(event) {
    // Get the ambient light level in lux.
    var lightLevel = event.value;
});

W3C Specification Learn about the Ambient Light API

Specification Status: Candidate Recommendation

Browser Support for The Ambient Light API

The Ambient Light API is currently only supported in Firefox 22+ on the Mac.

IE	Firefox	Chrome	Safari	Opera
–	22.0 (Mac only)	–	–	–

Only Firefox for Android includes support on mobile.

Android Browser	Blackberry	Chrome for Android	Firefox for Android	IE Mobile	Safari	Opera Mobile
–	–	–	15	–	–	–

Source: https://developer.mozilla.org/en-US/docs/Web/API/DeviceLightEvent

Proximity Events

Many devices have proximity sensors that can feed back data about objects that are close to the device. Proximity events gives developers access to this data for use in their web applications.

There are two different types of proximity events, DeviceProximityEvent and UserProximityEvent. DeviceProximityEvent is the more accurate of the two, providing data about the distance an object is from the device as well as the sensors field of view. The UserProximityEvent only provides a boolean attribute (near) to indicate if an object is close to the device or not.

// An event listener for a DeviceProximityEvent.
window.addEventListener('deviceproximity', function(event) {
    // The maximum distance the sensor covers (in cm).
    var max = event.max;

    // The minimum distance the sensor covers (in cm).
    var min = event.min;

    // The device proximity (in cm).
    var proximity = event.value;
});

// An event listener for a UserProximityEvent.
window.addEventListener('userproximity', function(event) {
    if (event.near) {
        // Do something.
    } else {
        // Do something else.
    }
});

W3C Specification Learn about Proximity Events

Specification Status: Candidate Recommendation

Browser Support for Proximity Events

Proximity events are currently only supported in Firefox (desktop) and Firefox for Android.

IE	Firefox	Chrome	Safari	Opera
–	Yes	–	–	–

Android Browser	Blackberry	Chrome for Android	Firefox for Android	IE Mobile	Safari	Opera Mobile
–	–	–	15	–	–	–

Source: https://developer.mozilla.org/en-US/docs/WebAPI/Proximity

Battery Status

The Battery Status API gives developers information about the device’s current power status. The BatteryManager object offers information about the current charge level, whether the device is charging, and how much time is left until the device runs out of juice and powers down.

// Get the current power level.
navigator.battery.level;

// Get the charging status (boolean).
navigator.battery.charging;

// Find out how long until the battery is charged.
navigator.battery.chargingTime;

// Find out how long until the battery is empty.
navigator.battery.dischargingTime;

W3C Specification Learn about the Battery API

Browser Support for The Battery Status API

Currently the Battery Status API is only supported in Firefox (desktop) and Firefox for Android. Work is being done to add this functionality to blink, but there’s no indication of exactly when this will make it into Chrome or Opera.

IE	Firefox	Chrome	Safari	Opera
–	10+	–	–	–

Android Browser	Blackberry	Chrome for Android	Firefox for Android	IE Mobile	Safari	Opera Mobile
–	–	–	10	–	–	–

Source: https://developer.mozilla.org/en-US/docs/WebAPI/Battery_Status

Other Specifications in the Works

So far in this post we’ve looked at a number of different APIs that help to further the capabilities of web applications. In addition to the APIs I’ve already mentioned, there are also a number of specifications that are being worked on for other exciting technologies. I’ve listed some of these below.

• ContactsManager
• Messaging
• Telephony
• WebNFC

It’s worth noting that these specifications are all classed as working drafts and therefore are very early in development and likely to change. There’s no guarantee that these technologies will ever make it into browsers, or even through the spec development process. Nevertheless, I think they’re worth mentioning purely as a look into what the future may hold.

Final Thoughts

In this blog post you’ve explored some of the JavaScript device APIs that are helping to further the capabilities of web applications. I’m incredibly excited about the direction the web is going. Browsers are invading device hardware and offering up the loot through new APIs — data that web developers have been eager to get their hands on for years.

The capabilities gap that has existed between native and web applications is closing fast, and that shows no signs of slowing down. The future looks ever brighter for web developers.

Useful Links

• W3C JavaScript APIs

• api
• battery status
• code
• geolocation
• getusermedia
• javascript
• learn programming
• localstorage
• media capture
• media streams
• proximity
• sessionstorage
• vibration
• web app
• web storage