beyond html5

exploring device APIs w/ @brianleroux

bite off more than you can chew

then chew it

The Telegraph

In 1837, Samuel F. B. Morse conducted the first successful experiment with an electrical telegraph.

The Telephone

Alexander Graham Bell was the first to be awarded a patent for the electric telephone in March 1876.


In 1921, Harold W. Arlin announced a game between the Pittsburgh Pirates and the Philadelphia Phillies.

Motion Pictures



cats www on phones

srsly tho...

Web technology is evolving.


Free software geek working at Adobe on the mobile web.

Our Quest

HTML5 current status.
Device API all the things.
Device API challenges.
ok you win this round marketing. html5 now means 'new shiny'.


Web Application Technology Working Group

Markup (Declaritive APIs)

  • XHTML style is supported wherein a document fully validates as XML.
  • Loose or classic html style is permitted; inc unquoted attributes!
  • Standardized parsing algorythm for parsing the markup ensures no more wtf between browsers.

New Elements

  • Structural elements. <section>, <article>, etc
  • Text level elements. <time>, <code>, etc
  • Form elements. <progress>, <keygen>, etc
  • Embedding elements. <canvas>, <audio>, <video>, etc

Check out MDN for more.

<input type=...>

  • color
  • date
  • datetime
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

Programmic APIs

  • drag drop
  • web workers
  • server sent events
  • sockets
  • cross document messaging
  • channel messaging

Offline Happens

  • navigator.offLine
  • appcache (is a douchebag btw)
  • web storage (save yourself time: use lawnchair)
  • websql (no not want) *
  • indexeddb (want) *
  • various file apis *

* technically !HTML5, eh


  • means "new shiny"
  • more expressive declaritive tools
  • rich content first class
  • vastly enhanced messaging
  • offline web nascent but feasible

die as you were born

screaming, bathed in blood

Device APIs Defined

Typically headless/chromess/without a visual manifestation, truly crossplatform.

  • sensors
  • data
  • outputs

Organizational Forces

Related concept:

Carrier APIs

Related Concept:

Installable Web Apps

  • Suggests a distribution model
  • Suggests a runtime security model
  • Suggests a self hosted, possibly federated reality
  • W3C Widgets
  • Chrome web store
  • Mozilla open web apps
  • PhoneGap/Build


                var win = function(position) { console.log(position.coords) }
                ,   fail = console.log

                navigator.geolocation.getCurrentPostion(win, fail)


Avail in all modern browser environments.




            navigator.vibrate([1000, 500, 2000])

Avail in PhoneGap, B2G. Support landing in WebKit.

Accelerometer, Gyroscope, Magnometer

spacial apis, a part of the geo spec allow us to understand device orientation, direction, and rate of change

Accelerometer (iOS WebKit or PhoneGap)

            window.ondevicemotion = function(event) {

Gyroscope (iOS WebKIt or PhoneGap)

            window.ondeviceorientation = function(event) {

Media Sensors

PhoneGap began, considering the camera; since the Media Capture API has evolved cameras, microphone and concerning the capture of images still or streaming and audio

            <input type=file accept=image/* capture=camera>
Valid types inc camcorder, microphone, filesystem.

Media Capture Programmic API

            var getMedia = navigator.webkitGetUserMedia 
                         || navigator.mozGetUserMedia 
                         || navigator.msGetUserMedia
See more here..

Frankly tho, we're hot on WebRTC


Evolved tos the System Info API. Essentially steriods for:

            navigator.onLine // wtf
Allowing introspection of connection property such as wifi, 3g, etc. In PhoneGap:

            var networkState =;

            var states = {};
            states[Connection.UNKNOWN]  = 'Unknown connection';
            states[Connection.ETHERNET] = 'Ethernet connection';
            states[Connection.WIFI]     = 'WiFi connection';
            states[Connection.CELL_2G]  = 'Cell 2G connection';
            states[Connection.CELL_3G]  = 'Cell 3G connection';
            states[Connection.CELL_4G]  = 'Cell 4G connection';
            states[Connection.NONE]     = 'No network connection';

            alert('Connection type: ' + states[networkState]);

Battery Status

Available in an earlier form in the PhoneGap project and now implemented in a rudimentary form in B2G. Combined with connection intellegent backup/syncronization possible. Irony: this API will drain your battery.

            navigator.battery.addEventListener('dischargingtimechange', function () {
                if (navigator.battery.dischargingTime < 60 * 10 || navigator.battery.level < 0.05)
                    console.log('oh shiii, battery level below 5%!')
            }, false)

Note: currently an older API avail in PhoneGap.

App Lifecycle Events

Currently understandardized. BEWARE! But clearly a need; exists today in Chrome and PhoneGap in some forms.

            document.addEventListener('deviceready', readyFreddy, false)
            document.addEventListener('pause', justChillin, false)
            document.addEventListener('resume', woahDude, false)

            var readyFreddy = function() {
                alert('app initd')

            var justChillin = function() {

            var woahDude = function() {
                alert('alright alright getting up!')



Yup. Read the device contacts. The people you call on the phone. Arguably, the real social graph.

            function win(contacts) {
                alert('Found ' + contacts.length + ' contacts.')

            function fail(contactError) {

            var optns = new ContactFindOptions()
            opts.filter = 'Brian'
            var fields = ['displayName', 'name']
            navigator.contacts.find(fields, win, fail, opts);

File Systems

            window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);

            function gotFS(fileSystem) {
                var opts = {create: true, exclusive: false}
                fileSystem.root.getFile('readme.txt', opts, gotFileEntry, fail);

            function gotFileEntry(fileEntry) { fileEntry.createWriter(gotFileWriter, fail) }

            function gotFileWriter(writer) {
                writer.onwriteend = function(evt) {
                    console.log("contents of file now 'some sample text'");
                    writer.onwriteend = function(evt) {
                        console.log("contents of file now 'some sample'");
                        writer.write(" different text");
                        writer.onwriteend = function(evt){
                            console.log("contents of file now 'some different text'");
                writer.write("some sample text");

            function fail(error) { console.log(error.code) }


WebAPI *

  • Web Telephony
  • Web SMS
  • Screen Orientation
  • Settings API
  • Resource Lock API
  • Power Management API
  • Mobile Connection API
  • Sensor API (proximity and ambient light)
  • And WAY MORE: nfc, bluetooth, alarm, clock, intents, capabilities, spellcheck, keyboard
* Honorable mention: Palm's webOS


Giver a go.

Lets just recap for a second ...

  • turn on the front facing camera and look at you
  • and email a picture of it to all your friends
  • backup data before your battery dies; without prompting
  • syncronize data to a service, optimally
  • know what building you are likely in, what floor you a probably on, and the direction you are travelling


  • security
  • privacy
  • permissions
  • capabilities
  • performance (eg battery api drains the battery!!)

that which doesn't kill you

is going to die


Just beginings.


when i find myself in trouble

I fuck shit up