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`youtube:https://www.youtube.com/embed/dLD7Ve5t5cI` Battery Status API is straightforward - it adds a new object
window.navigator.batterythat you can inspect and discover how much juice is left in the device for you to suck out (this is exposed by
battery.dischargingTimeand 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.
AvailabilityFirefox 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`youtube:https://www.youtube.com/embed/YEkhmYXJAeY` 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.
AvailabilityFirefox 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.
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?
- Accelerometer/Device Tilt: DeviceOrientation
- Latitude/Longitude: Geolocation
- Compass: DeviceOrientation (using the alpha property)
Here Be DragonsThe 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.