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.
Contents
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.
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.