A quick overview of the Firefox OS Web APIs

1. Firefox OS Web APIs,
taking it to the next level
Frédéric Harper
Firefox OS Technical Evangelist @ Mozilla
@fharper | outofcomfortzone.net
KrakowFirefoxOSworkshop–2013-09-12

2. Taking it to the next level
 Web APIs
 Regular APIs
 Privileged APIs
 Certified APIs

3. Regular APIs

4. Regular APIs
packaged hosted

5. Regular APIs
Ambient Light

6. Ambient Light Sensor
window.addEventListener("devicelight", function (event) {
// The level of the ambient light in lux
// The lux values for "dim" typically begin below 50,
// and the values for "bright" begin above 10000
console.log(event.value);
});

7. DEMO Firefox OS Boilerplate App

8. Regular APIs
Battery Status

9. Battery Status
var battery = navigator.battery;
if (battery) {
var batteryLevel = Math.round(battery.level * 100) + "%",
charging = (battery.charging)? “yes" : "no",
chargingTime = parseInt(battery.chargingTime / 60, 10,
dischargingTime = parseInt(battery.dischargingTime / 60, 10);
battery.addEventListener("levelchange", setStatus, false);
battery.addEventListener("chargingchange", setStatus, false);
battery.addEventListener("chargingtimechange", setStatus, false);
}

10. DEMO Firefox OS Boilerplate App

11. Regular APIs
Device Light

12. Device Light
window.addEventListener("lightlevel", function (event) {
console.log(event.value);
});
/*
Possible values:
"normal"
"bright"
"dim"
*/

13. Regular APIs
Network Information

14. Network Information
var connection = window.navigator.mozConnection,
online = connection.bandwidth > 0,
metered = connection.metered;
connection.addEventListener("change", updateConnectionStatus);

15. Regular APIs
Notification

16. Notification
var notification = navigator.mozNotification;
notification.createNotification(
"See this",
"This is a notification",
iconURL
);

17. A good article on Push Notification
http://j.mp/fxosPushPost

18. Regular APIs
Proximity Sensor

19. Proximity Sensor
window.addEventListener("deviceproximity", function (event) {
// Current device proximity, in centimeters
console.log(event.value);
// The maximum sensing distance the sensor is able to report, in centimeters
console.log(event.max);
// The minimum sensing distance the sensor is able to report, in centimeters
console.log(event.min);
});

20. Regular APIs
Screen Orientation

21. Screen Orientation
// Portrait mode:
screen.mozLockOrientation("portrait");
/*
Possible values:
"landscape"
"portrait"
*/

22. Screen Orientation
window.addEventListener(“onmozorientationchange”, function (event) {
var orientation = screen.mozOrientation;
}
/*
Possible values:
"landscape-primary"
"landscape-secondary"
"portrait-primary"
"portrait-secondary"
*/

23. DEMO Paint app

24. Regular APIs
Vibration

25. Vibration
// Vibrate for 1 second
navigator.vibrate(1000);
// Vibration pattern [vibrationTime, pause, ...]
navigator.vibrate([200, 100, 200, 100]);
// Vibrate for 5 seconds
navigator.vibrate(5000);
// Turn off vibration
navigator.vibrate(0);

26. Privileged APIs

27. Privileged APIs
packaged

28. Privileged APIs
Browser

29. Browser
<div>
<span id='location-bar'></span>
<button onclick='go_button_clicked()'>Go</button>
</div>
<div id='load-status'></div>
<div id='security-status'></div>
<img id='favicon'>
<div id='title'></div>
<iframe mozbrowser src=‘yoursite.com' id='browser'></iframe>

30. Browser
addEventListener('mozbrowserloadstart', function(e) {
//Do stuff
});
/*
Possible values:
"mozbrowserloadstart“ "mozbrowserloadend"
"mozbrowserlocationchange“ "mozbrowsertitlechange"
"mozbrowsericonchange“ "mozbrowsersecuritychange"
"mozbrowsercontextmenu“ "mozbrowsererror"
"mozbrowserkeyevent“ "mozbrowsershowmodalprompt"
"mozbrowseropenwindow“ "mozbrowserclose"
*/

31. Privileged APIs
Contacts

32. Contacts
var contact = new mozContact();
contact.init({name: "Tom"});
var request = navigator.mozContacts.save(contact);
request.onsuccess = function() {
console.log("Success");
};
request.onerror = function() {
console.log("Error")
};

33. Certified APIs

34. Certified APIs
WebSMS

35. WebSMS
// SMS object
var sms = navigator.mozSMS;
// Send a message
sms.send("123456789", "Hello world!");
// Receive a message
sms.onreceived = function (event) {
// Read message
console.log(event.message);
};

36. Certified APIs
WebTelephony

37. WebTelephony
// Telephony object
var tel = navigator.mozTelephony;
// Check if the phone is muted (read/write property)
console.log(tel.muted);
// Check if the speaker is enabled (read/write property)
console.log(tel.speakerEnabled);
// Place a call
var cal = tel.dial(“123456789”);

38. WebTelephony
// Receiving a call
tel.onincoming = function (event) {
var incomingCall = event.call;
// Get the number of the incoming call
console.log(incomingCall.number);
// Answer the call
incomingCall.answer();
};

39. WebTelephony
// Disconnect a call
call.hangUp();
// Iterating over calls, and taking action depending on their changed status
tel.oncallschanged = function (event) {
tel.calls.forEach(function (call) {
// Log the state of each call
console.log(call.state);
});
};

40. Note that for some of the Web API,
you’ll need to add permission to the
manifest file.

41. Resources
Web API - Mozilla Developer Network
http://j.mp/fxosWebAPI
Packages vs hosted apps – Firefox Marketplace Developer Hub
http://j.mp/fxosQuickStart
Firefox OS Boilerplate App - GitHub
http://j.mp/fxosBoilerplate

42. Frédéric Harper
fharper@mozilla.com
@fharper
http://hacks.mozilla.com
http://outofcomfortzone.net