Diving into the Device API
19 Jun 2013
I recently read Tim Wright's article on A List Apart detailing the Device API; a collection of W3C standards that let you obtain access to a number of hardware sensors.
I found this fascinating, and had to try them out. Here's what I've learned.
Note: for most of these demos, you'll want to try them out in specific browsers (either Android Firefox or iOS Safari); as of today, browser support is limited. The most up-to-date information on browser implementation is on this page.
All demo code is available on GitHub.
Battery Status
View Demo (works in Android Firefox)
The Battery Status API is straightforward - it adds a new objectwindow.navigator.battery that you can inspect and discover how much juice is left in the device for you to suck out (this is exposed by battery.dischargingTime and is measured in seconds).
battery.charging returns a boolean. You can inspect the charged level using battery.level, but the most interesting parts are the events, which let you capture when a device starts charging, or reaches a threshold over 60%, etc.
The demo captures the chargingchange event and changes some background colors. but you could do lots of things with this data. For example, it might be prudent to turn off 3D CSS transformations at a certain battery threshold, as they're quite power-hungry. By treating power as a feature test, you can take progressive enhancement to a new level.
Availability
Firefox currently supports this API on desktop and mobile Android. WebKit appears to have implemented it briefly last year, but it's currently disabled and work to re-enable it appears to have stalled. Similarly, Chromium has a patch built but it doesn't seem to have ever landed.Ambient Light Sensor
View Demo (works in Android Firefox)
Most phones have an ambient light sensor - it's mostly used to dim the screen in low-light environments. The Ambient Light Sensor API works with any sensors that can read light levels, including an embedded camera. There's lots of environment-specific modifications to a site you could perform with this.Availability
Firefox on Android has it, and it's implemented on the desktop in OS X. There's a patch for Windows 7 that appears to have stalled. I don't see any evidence that other browsers are planning to implement it.Device Orientation
A native app that recently captured my attention was the well-advertised Pizza Compass for iOS. It does exactly what you'd expect. I wanted to try a version in pure HTML5. Right now it only points you to a pizza place in my city, but it meets my use case, so why abstract?
View Demo (works in Mobile Safari/iOS Chrome)
There's a number of device location/orientation sensors in modern cell phones, and it's not always clear which HTML5 feature to use:- Accelerometer/Device Tilt: DeviceOrientation
- Latitude/Longitude: Geolocation
- Compass: DeviceOrientation (using the alpha property)
Here Be Dragons
The basic functionality works on current iOS browsers. However, I ran into a number of quirks on other platforms that also support the DeviceOrientation API; which means you can't build interoperable apps with it.- Firefox increases the alpha property as the device rotates clockwise. All other tested devices decrease the property when rotating clockwise.
- The alpha property's initial value is all over the place. Some browsers (iOS Mobile Safari) set it at 0 based on the initial orientation of the device. Other browsers set 0 to a particular orientation, but it's inconsistent (Android Browser is 0 at west, Firefox is 0 at north, Chrome is ambiguous).
- The event provides an absolute property, assuming the alpha value is calibrated to formal Euler Angles (Firefox and Chrome for Android implement this). There doesn't seem to be consistency even with this.