Introductory Slides on Firefox OS.

1. INTRODUCING
FIREFOX OS
Sayak Sarkar (@sayak_sarkar)
http://sayak.in

2. What is
Firefox OS?
Firefox OS is an open platform for mobile Devices,
built entirely using HTML5 and other open Web standards
which is free from the rules and restrictions of existing
proprietary platforms.

3. WHY USE HTML5?
In-built distribution - the web
Simple technologies used by lots
of developers
Evolution of existing practices
Open, independent, standardized

4. PROMISES OF HTML5

5. firefox OS

6. How Real is it?
Released in four countries: Spain, Poland, Venezuela
and Columbia (more to come very soon)
18 mobile operator partners, 6 hardware partners
Hardware options: Alcatel One Touch Fire, ZTE Open,
Geeksphone Keon, Geeksphone Peak…
Aimed at emerging markets/low end market
Aimed to be an alternative to feature phones and
unavailable closed environments.
Open source - it is all on GitHub

7. "Movistar offers
the ZTE Open for
€69, including €30
of balance for
prepaid customers
and a 4GB
microSD card"

8. ARCHITECTURE
Third Party HTML5 Apps
Third Party HTML5 Apps
GAIA
GAIA
Web APIs / Web Actitivies
Web APIs / Web Actitivies
Gecko rendering engine
Gecko rendering engine
Linux/Gonk (ADB enabled)
Linux/Gonk (ADB enabled)

9. -
+
=

10. PREDICTABLE HTML5 SUPPORT

11. SECURITY

12. APPLICATION MANIFEST
{
{
"version": "1.0",
"version": "1.0",
"name": "MozillaBall",
"name": "MozillaBall",
"description": "Exciting Open Web development action!",
"description": "Exciting Open Web development action!",
"icons": {
"icons": {
"16": "/img/icon-16.png",
"16": "/img/icon-16.png",
"48": "/img/icon-48.png",
"48": "/img/icon-48.png",
"128": "/img/icon-128.png"
"128": "/img/icon-128.png"
},
},
"developer": {
"developer": {
"name": "Mozilla Labs",
"name": "Mozilla Labs",
"url": "http://mozillalabs.com"
"url": "http://mozillalabs.com"
},
},
"installs_allowed_from": ["*"],
"installs_allowed_from": ["*"],
"appcache_path": "/cache.manifest",
"appcache_path": "/cache.manifest",
"locales": {
"locales": {
"es": {
"es": {
"description": "¡Acción abierta emocionante del desarrollo del Web!",
"description": "¡Acción abierta emocionante del desarrollo del Web!",
"developer": {
"developer": {
"url": "http://es.mozillalabs.com/"
"url": "http://es.mozillalabs.com/"
}
}
}
}
},
},
"default_locale": "en"
"default_locale": "en"
}
}

13. APPLICATIONS
Web Content
Web Content
Regular web content
Regular web content
Installed Web App
Installed Web App
A regular web app
A regular web app
Privileged Web App
Privileged Web App
More access, more
More access, more
responsibility
responsibility
Certified Web App
Certified Web App
Device-critical
Device-critical
applications
applications

14. APPLICATIONS

15. PERMISSIONS
"permissions": {
"permissions": {
"contacts": {
"contacts": {
"description": "Required for autocompletion in the share screen",
"description": "Required for autocompletion in the share screen",
"access": "readcreate"
"access": "readcreate"
},
},
"alarms": {
"alarms": {
"description": "Required to schedule notifications"
"description": "Required to schedule notifications"
}
}
}
}

16. WEB APIS

17. WEB APIS (FOR ALL
Vibration API (W3C)
Screen Orientation
Geolocation API
Mouse Lock API (W3C)
Open WebApps
Network Information API (W3C)
Battery Status API (W3C)
Alarm API
Web Activities
Push Notifications API
WebFM API
WebPayment
IndexedDB (W3C)
Ambient light sensor
Proximity sensor
Notification

18. BATTERY
STATUS API

19. BATTERY STATUS API
var battery = navigator.battery;
var battery = navigator.battery;
if (battery) {
if (battery) {
var batteryLevel = Math.round(battery.level * 100) + "%",
var batteryLevel = Math.round(battery.level * 100) + "%",
charging = (battery.charging)? "" :: "not ",
charging = (battery.charging)? "" "not ",
chargingTime = parseInt(battery.chargingTime // 60, 10),
chargingTime = parseInt(battery.chargingTime 60, 10),
dischargingTime = parseInt(battery.dischargingTime // 60, 10);
dischargingTime = parseInt(battery.dischargingTime 60, 10);
}
}
// Set events
// Set events
battery.addEventListener("levelchange", setStatus, false);
battery.addEventListener("levelchange", setStatus, false);
battery.addEventListener("chargingchange", setStatus, false);
battery.addEventListener("chargingchange", setStatus, false);
battery.addEventListener("chargingtimechange", setStatus, false);
battery.addEventListener("chargingtimechange", setStatus, false);
battery.addEventListener("dischargingtimechange", setStatus, false);
battery.addEventListener("dischargingtimechange", setStatus, false);

20. SCREEN
ORIENTATION
API

21. SCREEN ORIENTATION API
// Portrait mode:
// Portrait mode:
screen.mozLockOrientation("portrait");
screen.mozLockOrientation("portrait");
/*
/*
*/
*/
Possible values:
Possible values:
"landscape"
"landscape"
"portrait"
"portrait"
"landscape-primary"
"landscape-primary"
"landscape-secondary"
"landscape-secondary"
"portrait-primary"
"portrait-primary"
"portrait-secondary"
"portrait-secondary"

22. VIBRATION API

23. VIBRATION API
// Vibrate for one second
// Vibrate for one second
navigator.vibrate(1000);
navigator.vibrate(1000);
// Vibration pattern [vibrationTime, pause,…]
// Vibration pattern [vibrationTime, pause,…]
navigator.vibrate([200, 100, 200, 100]);
navigator.vibrate([200, 100, 200, 100]);
// Vibrate for 5 seconds
// Vibrate for 5 seconds
navigator.vibrate(5000);
navigator.vibrate(5000);
// Turn off vibration
// Turn off vibration
navigator.vibrate(0);
navigator.vibrate(0);

24. NETWORK
INFORMATION
API

25. NETWORK INFORMATION API
var connection = window.navigator.mozConnection,
var connection = window.navigator.mozConnection,
online = connection.bandwidth > 0,
online = connection.bandwidth > 0,
metered = connection.metered;
metered = connection.metered;

26. ☼
AMBIENT LIGHT
EVENTS

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

28. PAGE VISIBILITY

29. PAGE VISIBILITY
document.addEventListener("visibilitychange", function () {
document.addEventListener("visibilitychange", function () {
if (document.hidden) {
if (document.hidden) {
console.log("App is hidden");
console.log("App is hidden");
}
}
else {
else {
console.log("App has focus");
console.log("App has focus");
}
}
});
});

30. WEB APIS (PRIVILEGED APPS)
Device Storage API
Browser API
TCP Socket API
Contacts API
systemXHR

31. CONTACTS API

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

33. WEB APIS (CERTIFIED APPS)
WebTelephony
WebBluetooth
WebSMS
Permissions API
Idle API
Network Stats API
Settings API
Camera API
Power Management API
Time/Clock API
Mobile Connection API
Attention screen
WiFi Information API
Voicemail

34. CERTIFIED APPS = THE OS 

35. CERTIFIED APPS
Dialer
Alarm Clock
Contacts
Camera
Settings
Notes
SMS
First Run Experience
Web browser
Notifications
Gallery
Home Screen
Video Player
Mozilla Marketplace
Music Player
System Updater
E-mail (POP, IMAP)
Localization Support
Calendar

36. WEB
ACTIVITIES

38. GET A PHOTO?
var getphoto = new MozActivity({
var getphoto = new MozActivity({
name: "pick",
name: "pick",
data: {
data: {
type: ["image/png", "image/jpeg"], "image/jpg"]
type: ["image/png", "image/jpeg"], "image/jpg"]
}
}
});
});
getphoto.onsuccess = function () {
getphoto.onsuccess = function () {
var img = document.createElement("img");
var img = document.createElement("img");
if (this.result.blob.type.indexOf("image") != -1) {
if (this.result.blob.type.indexOf("image") != -1) {
img.src = window.URL.createObjectURL(this.result.blob);
img.src = window.URL.createObjectURL(this.result.blob);
}
}
};
};
getphoto.onerror = function () { // error
getphoto.onerror = function () { // error
};
};

39. FIREFOX OS + ANDROID!

40. APP
DISTRIBUTION

41. FIREFOX OS MARKETPLACE
https://marketplace.firefox.com/

42. INSTALL FROM THE WEB…
var installapp = navigator.mozApps.install(manifestURL);
installapp.onsuccess = function(data) {
// App is installed
};
installapp.onerror = function() {
// App wasn't installed, info is in
// installapp.error.name
};

43. DYNAMIC APP WEB SEARCH

44. DEVELOPMENT
ENVIRONMENT

45. FIREFOX OS
BOILERPLATE
APP
https://github.com/robnyman/Firefox-OS-Boilerplate-App

46. FIREFOX OS SIMULATOR
https://addons.mozilla.org/firefox/addon/firefox-os-simulator/

47. PROTOTYPING WITH JSFIDDLE
1.Write your code as a JSFiddle
2.Append /webapp.manifest to your Fiddle
URL and paste this link into the Firefox
OS simulator to install the app
3.Alternatively, append /fxos.html to your
Fiddle URL to get an install page like a
typical Firefox OS hosted application
https://hacks.mozilla.org/2013/08/using-jsfiddle-to-prototype-firefox-os-apps/

48. BUILDING
BLOCKS?

49. CERTIFIED APPS BUILDING BLOCKS
http://buildingfirefoxos.com/

50. CERTIFIED APPS BUILDING BLOCKS
http://buildingfirefoxos.com/

51. MOZILLA BRICK
http://mozilla.github.io/brick/

52. WHAT’S
COOKING?

53. MORE WEB APIS
Resource lock API
Spellcheck API
UDP Datagram Socket API
LogAPI
Peer to Peer API
Keyboard/IME API
WebNFC
WebRTC
WebUSB
FileHandle API
HTTP-cache API
Sync API
Calendar API

54. APPMAKER
Resource lock APIUDP Datagram Socket APIPeer to Peer
APIWebNFCWebUSBHTTP-cache APICalendar
APISpellcheck APILogAPIKeyboard/IME API
WebRTC
FileHandle API
Sync API

55. RESOURCES

56. DEVELOPER HUB
https://marketplace.firefox.com/developers/

57. MOZILLA DEVELOPER BLOG
https://hacks.mozilla.org/category/firefox-os/

58. FIREFOX OS VIDEO SERIES
https://hacks.mozilla.org/category/videoseries/

59. FIREFOX OS WIKI
https://developer.mozilla.org/en/docs/Mozilla/Firefox_OS

60. THANKS!
SAYAK SARKAR
@sayak_sarkar
http://sayak.in/