Diving Into the Device API

Video: https://vimeo.com/71864754

Transcript

1. Device APIs Tuesday, August 6, 13
2. http://www.flickr.com/photos/hitormiss/4835135015/ Tuesday, August 6, 13 Hey folks, I’m Matt Steele. I work on mobile web stuff at Union Pacific, and I’m @mattdsteele on Twitter and GitHub.
3. http://www.flickr.com/photos/hitormiss/4835135015/ @mattdsteele Tuesday, August 6, 13 Hey folks, I’m Matt Steele. I work on mobile web stuff at Union Pacific, and I’m @mattdsteele on Twitter and GitHub.
4. Native vs HTML5 Tuesday, August 6, 13 So I’m here to talk about one facet of the great Native vs HTML5 war
5. http://www.dartmouthjournals.com/blog/great-mobile-app-debate-native-or-web-app Tuesday, August 6, 13 I’m sure you’re not tired of this yet.
6. Tuesday, August 6, 13 It’s a debate that’s about as old as the Internet itself. Pretty sure the guy on the right builds native iOS apps.
7. Tuesday, August 6, 13 And this guy builds native Windows Phone apps. I just wanted to use some of these pictures.
8. Tuesday, August 6, 13 So yeah
9. Tuesday, August 6, 13 These are so awesome.
10. Tuesday, August 6, 13 Anyway, Tim Wright had an article in A List Apart called “Environmental Design”. His point was that your apps should respond to the environment they’re running in: dimming the screen in a dark room, etc.
11. “A year ago, the device-level APIs needed weren’t ready for primetime yet. Today, we can start to do something to improve our users’ experiences, even under these dynamic conditions, thanks to the recent buildup of the Device API.” http://alistapart.com/article/environmental-design-with-the-device-api Tuesday, August 6, 13 So he advocated building websites with this tech. Traditionally you’ve had to go to native code to get access.
12. Device API Tuesday, August 6, 13 So Device API is a set of features that give browser access to more sensor inputs, where native always has had a leg up. Originally this started with Mozilla’s FirefoxOS, but lots of it is being standardized by the W3C right now. Let’s talk about three of these APIs.
13. Battery Status Tuesday, August 6, 13 First up is Battery Status
14. Tuesday, August 6, 13
15. navigator.battery.addEventListener('chargingchange', function(e) { var isCharging = navigator.battery.charging; console.log('The battery ' + isCharging ? 'is' : 'is not' + 'charging'); }); Tuesday, August 6, 13 Here’s an example of the code. You get a new Battery object on Navigator; as well as a set of events you can listen to as the battery level drops or when you plug into power.
16. Support Android Desktop FirefoxOS Tuesday, August 6, 13 Just firefox right now. The code has actually been implemented in WebKit for a year, but it’s never been turned on. No idea why.
17. Ambient Light Sensor Tuesday, August 6, 13 Most phones have an ambient light sensor to dim the screen in dark rooms; but you can capture light using a camera if needed.
18. Tuesday, August 6, 13
19. window.addEventListener('devicelight', function(event) { console.log('Light level: ' + event.value + ' lux'); }); Tuesday, August 6, 13 You get one event to hook to. The ‘value’ is measured in lux, but from my testing it appears that a reading of 100 lux on one device might translate to only 25 lux on another. So your mileage may vary.
20. Support Android Desktop (Mac) FirefoxOS Tuesday, August 6, 13 Just Firefox, and haven’t seen any movement in other browsers yet.
21. Orientation Tuesday, August 6, 13
22. Tuesday, August 6, 13
23. window.addEventListener('deviceorientation', function(event) { console.log('The device is rotated' + event.alpha + 'degrees'); }); Tuesday, August 6, 13 The main event to hook into is deviceorientation, which lets you inspect the device’s: alpha: Compass direction beta: Tilted front to back Gamma: tilted left to right Also has a DeviceMotion event, which lets you use accelerometer data
24. http://isthisanearthquake.com/ Tuesday, August 6, 13 So here’s one of the use cases for it.
25. Support IE11 15+ Mobile 4+ Tuesday, August 6, 13 Great support, but here there be dragons. Big discrepancies in implementation. For example, rotating device clockwise increases the alpha value on Mobile Safari, but *decreases* it on Android Chrome. A library I wish existed: something to normalize the discrepancies. Make a name for yourself!
26. Tuesday, August 6, 13 Lots of other APIs: - Network information: crappy bandwidth, 3G, etc - Proximity - Vibration
27. Thanks @mattdsteele http://bitly.com/deviceapi http://imgur.com/a/Qlh7Y Tuesday, August 6, 13 That’s it, thanks!