webapi in-open-web-apps-and-firefoxos
DESCRIPTION
One of the main weaknesses of web applications is that browsers can access a limited set of device services, such as geolocation, device orientation etc. In this talk I would like to explore how the W3C and browser vendors are working together to enable the development of Open Web Apps that can access device hardware and sensors through Javascript, and show you some of the Firefox OS demo apps I wrote for the Mozilla Developer Network (MDN).TRANSCRIPT
![Page 1: Webapi in-open-web-apps-and-firefoxos](https://reader030.vdocuments.us/reader030/viewer/2022020207/554954b9b4c905f74e8b4dc8/html5/thumbnails/1.jpg)
WebAPI
Francesco Iovine@franciov
in Open Web Apps and #FirefoxOS
Barcelona JS
29 Apr 2014
![Page 3: Webapi in-open-web-apps-and-firefoxos](https://reader030.vdocuments.us/reader030/viewer/2022020207/554954b9b4c905f74e8b4dc8/html5/thumbnails/3.jpg)
I live in Rome
![Page 4: Webapi in-open-web-apps-and-firefoxos](https://reader030.vdocuments.us/reader030/viewer/2022020207/554954b9b4c905f74e8b4dc8/html5/thumbnails/4.jpg)
I like attending tech conferences across Europe ...
markusleutwyler.com
![Page 5: Webapi in-open-web-apps-and-firefoxos](https://reader030.vdocuments.us/reader030/viewer/2022020207/554954b9b4c905f74e8b4dc8/html5/thumbnails/5.jpg)
... and playing table football
![Page 6: Webapi in-open-web-apps-and-firefoxos](https://reader030.vdocuments.us/reader030/viewer/2022020207/554954b9b4c905f74e8b4dc8/html5/thumbnails/6.jpg)
Touch
Geolocation
Contacts
Network
Battery
Proximity
Media Capture
Media Recording
Motion
Ambient
Calendar
Vibration
WebAPI / Device APIs
![Page 7: Webapi in-open-web-apps-and-firefoxos](https://reader030.vdocuments.us/reader030/viewer/2022020207/554954b9b4c905f74e8b4dc8/html5/thumbnails/7.jpg)
https://developer.mozilla.org/en-US/Apps
MDN App Center
![Page 8: Webapi in-open-web-apps-and-firefoxos](https://reader030.vdocuments.us/reader030/viewer/2022020207/554954b9b4c905f74e8b4dc8/html5/thumbnails/8.jpg)
GEOLOCATION
![Page 9: Webapi in-open-web-apps-and-firefoxos](https://reader030.vdocuments.us/reader030/viewer/2022020207/554954b9b4c905f74e8b4dc8/html5/thumbnails/9.jpg)
Geolocation API
W3C Recommendation 24 October 2013
http://www.w3.org/TR/geolocation-API/
![Page 10: Webapi in-open-web-apps-and-firefoxos](https://reader030.vdocuments.us/reader030/viewer/2022020207/554954b9b4c905f74e8b4dc8/html5/thumbnails/10.jpg)
navigator.geolocation.getCurrentPosition(successCallback, errorCallback, positionOptions)
function successCallback(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
// ...
}
Geolocation API
![Page 11: Webapi in-open-web-apps-and-firefoxos](https://reader030.vdocuments.us/reader030/viewer/2022020207/554954b9b4c905f74e8b4dc8/html5/thumbnails/11.jpg)
Geolocation API
mini
![Page 15: Webapi in-open-web-apps-and-firefoxos](https://reader030.vdocuments.us/reader030/viewer/2022020207/554954b9b4c905f74e8b4dc8/html5/thumbnails/15.jpg)
CONTACTS
![Page 16: Webapi in-open-web-apps-and-firefoxos](https://reader030.vdocuments.us/reader030/viewer/2022020207/554954b9b4c905f74e8b4dc8/html5/thumbnails/16.jpg)
Pick Contacts Intent
W3C Working Draft 12 July 2012http://www.w3.org/TR/contacts-api/
SHELVED, waiting for a better overall approach to emerge
![Page 17: Webapi in-open-web-apps-and-firefoxos](https://reader030.vdocuments.us/reader030/viewer/2022020207/554954b9b4c905f74e8b4dc8/html5/thumbnails/17.jpg)
window.navigator.mozContacts
window.navigator.mozContacts.getAll(options)
window.navigator.mozContacts.find(filter)
window.navigator.mozContacts.save(mozContact)
...
mozContacts
![Page 18: Webapi in-open-web-apps-and-firefoxos](https://reader030.vdocuments.us/reader030/viewer/2022020207/554954b9b4c905f74e8b4dc8/html5/thumbnails/18.jpg)
![Page 20: Webapi in-open-web-apps-and-firefoxos](https://reader030.vdocuments.us/reader030/viewer/2022020207/554954b9b4c905f74e8b4dc8/html5/thumbnails/20.jpg)
http://mzl.la/1jcT2lo
Updating phone contactsfrom the web
![Page 21: Webapi in-open-web-apps-and-firefoxos](https://reader030.vdocuments.us/reader030/viewer/2022020207/554954b9b4c905f74e8b4dc8/html5/thumbnails/21.jpg)
BATTERY
![Page 22: Webapi in-open-web-apps-and-firefoxos](https://reader030.vdocuments.us/reader030/viewer/2022020207/554954b9b4c905f74e8b4dc8/html5/thumbnails/22.jpg)
Battery Status API
W3C Candidate Recommendation 8 May 2012
http://www.w3.org/TR/battery-status/
![Page 23: Webapi in-open-web-apps-and-firefoxos](https://reader030.vdocuments.us/reader030/viewer/2022020207/554954b9b4c905f74e8b4dc8/html5/thumbnails/23.jpg)
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
![Page 24: Webapi in-open-web-apps-and-firefoxos](https://reader030.vdocuments.us/reader030/viewer/2022020207/554954b9b4c905f74e8b4dc8/html5/thumbnails/24.jpg)
Battery Status API
![Page 26: Webapi in-open-web-apps-and-firefoxos](https://reader030.vdocuments.us/reader030/viewer/2022020207/554954b9b4c905f74e8b4dc8/html5/thumbnails/26.jpg)
https://github.com/franciov/low-energy-messenger
![Page 27: Webapi in-open-web-apps-and-firefoxos](https://reader030.vdocuments.us/reader030/viewer/2022020207/554954b9b4c905f74e8b4dc8/html5/thumbnails/27.jpg)
http://mzl.la/1ltk0pC
Retrieving battery status information
![Page 28: Webapi in-open-web-apps-and-firefoxos](https://reader030.vdocuments.us/reader030/viewer/2022020207/554954b9b4c905f74e8b4dc8/html5/thumbnails/28.jpg)
PROXIMITY
![Page 29: Webapi in-open-web-apps-and-firefoxos](https://reader030.vdocuments.us/reader030/viewer/2022020207/554954b9b4c905f74e8b4dc8/html5/thumbnails/29.jpg)
Proximity Events
W3C Candidate Recommendation 1 October 2013
http://www.w3.org/TR/proximity/
![Page 30: Webapi in-open-web-apps-and-firefoxos](https://reader030.vdocuments.us/reader030/viewer/2022020207/554954b9b4c905f74e8b4dc8/html5/thumbnails/30.jpg)
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
![Page 31: Webapi in-open-web-apps-and-firefoxos](https://reader030.vdocuments.us/reader030/viewer/2022020207/554954b9b4c905f74e8b4dc8/html5/thumbnails/31.jpg)
Proximity Events
![Page 32: Webapi in-open-web-apps-and-firefoxos](https://reader030.vdocuments.us/reader030/viewer/2022020207/554954b9b4c905f74e8b4dc8/html5/thumbnails/32.jpg)
![Page 33: Webapi in-open-web-apps-and-firefoxos](https://reader030.vdocuments.us/reader030/viewer/2022020207/554954b9b4c905f74e8b4dc8/html5/thumbnails/33.jpg)
https://github.com/franciov/low-energy-messenger
![Page 34: Webapi in-open-web-apps-and-firefoxos](https://reader030.vdocuments.us/reader030/viewer/2022020207/554954b9b4c905f74e8b4dc8/html5/thumbnails/34.jpg)
... stay tuned ...
Near, or far? Responding to proximity
![Page 35: Webapi in-open-web-apps-and-firefoxos](https://reader030.vdocuments.us/reader030/viewer/2022020207/554954b9b4c905f74e8b4dc8/html5/thumbnails/35.jpg)
References
![Page 36: Webapi in-open-web-apps-and-firefoxos](https://reader030.vdocuments.us/reader030/viewer/2022020207/554954b9b4c905f74e8b4dc8/html5/thumbnails/36.jpg)
https://developer.mozilla.org/en-US/docs/WebAPI
WebAPI
![Page 37: Webapi in-open-web-apps-and-firefoxos](https://reader030.vdocuments.us/reader030/viewer/2022020207/554954b9b4c905f74e8b4dc8/html5/thumbnails/37.jpg)
www.w3.org/2009/dap/
Device APIs
www.w3.org/2009/dap/wiki/ImplementationStatus
![Page 38: Webapi in-open-web-apps-and-firefoxos](https://reader030.vdocuments.us/reader030/viewer/2022020207/554954b9b4c905f74e8b4dc8/html5/thumbnails/38.jpg)
![Page 39: Webapi in-open-web-apps-and-firefoxos](https://reader030.vdocuments.us/reader030/viewer/2022020207/554954b9b4c905f74e8b4dc8/html5/thumbnails/39.jpg)
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?)