WebAPI

Francesco Iovine@franciov

in Open Web Apps and #FirefoxOS

Barcelona JS

29 Apr 2014

Chris Millswww.francesco.iovine.namef.iovine@gmail.com@franciov

Credits:

I live in Rome

I like attending tech conferences across Europe ...

markusleutwyler.com

... and playing table football

Touch

Geolocation

Contacts

Network

Battery

Proximity

Media Capture

Media Recording

Motion

Ambient

Calendar

Vibration

WebAPI / Device APIs

https://developer.mozilla.org/en-US/Apps

MDN App Center

GEOLOCATION

Geolocation API

W3C Recommendation 24 October 2013

http://www.w3.org/TR/geolocation-API/

navigator.geolocation.getCurrentPosition(successCallback, errorCallback, positionOptions)

function successCallback(position) {

var latitude = position.coords.latitude;

var longitude = position.coords.longitude;

// ...

}

Geolocation API

Geolocation API

mini

http://bit.ly/1hIDYeK

https://github.com/franciov/geo

http://mzl.la/1hxNfC5

Plotting yourself on the map

CONTACTS

Pick Contacts Intent

W3C Working Draft 12 July 2012http://www.w3.org/TR/contacts-api/

SHELVED, waiting for a better overall approach to emerge

window.navigator.mozContacts

window.navigator.mozContacts.getAll(options)

window.navigator.mozContacts.find(filter)

window.navigator.mozContacts.save(mozContact)

...

mozContacts

https://github.com/franciov/geo

http://mzl.la/1jcT2lo

Updating phone contactsfrom the web

BATTERY

Battery Status API

W3C Candidate Recommendation 8 May 2012

http://www.w3.org/TR/battery-status/

navigator.battery.charging // true or falsenavigator.battery.level // from 0 to 1.0navigator.battery.chargingTime // seconds navigator.battery.dischargingTime // seconds

navigator.battery.onchargingchangenavigator.battery.onlevelchangenavigator.battery.ondischargingtimechange

Battery Status API

Battery Status API

http://goo.gl/87QanF

https://github.com/franciov/low-energy-messenger

http://mzl.la/1ltk0pC

Retrieving battery status information

PROXIMITY

Proximity Events

W3C Candidate Recommendation 1 October 2013

http://www.w3.org/TR/proximity/

window.onuserproximity = function(event) { event.near // current user proximity state});

window.ondeviceproximity = function(event) { event.value // current device proximity (cm) event.max // maximum sensing distance (cm) event.min // minimum sensing distance (cm)});

Proximity Events

Proximity Events

https://github.com/franciov/low-energy-messenger

... stay tuned ...

Near, or far? Responding to proximity

References

https://developer.mozilla.org/en-US/docs/WebAPI

WebAPI

www.w3.org/2009/dap/

Device APIs

www.w3.org/2009/dap/wiki/ImplementationStatus

Photos

https://www.flickr.com/photos/phototomcat/9658315475/thanks to Markus Leutwyler (markusleutwyler.com)http://instagram.com/ar_krayon (football table)

http://www.flickr.com/photos/petereed/3256701422 (geolocation)http://www.flickr.com/photos/andreanix/2577986521 (contacts)http://www.flickr.com/photos/htakashi/9754012931 (battery)http://www.flickr.com/photos/shuttercat7/418349082 (proximity)

http://www.flickr.com/photos/vividbreeze/480057824 (thankyou, questions?)

Chris Millswww.francesco.iovine.namef.iovine@gmail.com@franciov

Credits: