An overview presentation of Firefox OS at the San Francisco Developer week

1. FIREFOX OS
Answering global challenges
Christian Heilmann (@codepo8)
Developerweek, San Francisco, Feb. 2014

2. SOME FACTS…
★
Released in fourteen countries: Spain, Poland, Venezuela,
Colombia, Peru, Uruguay, Mexico, Brasil (more soon)
★
Released with 7 mobile operator partners, 3 hardware
partners
★
Hardware options: Alcatel One Touch Fire, ZTE Open,
Geeksphone Keon, Geeksphone Peak, LG Fireweb…
★
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

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

4. I LIVE BY THE RIVER…

11. PEOPLE ARE BUSY…

13. BENEFITS OF HTML5
★
In-built distribution - the web
★
Simple technologies used by lots of
developers
★
Evolution of existing practices
★
Open, independent, standardised

14. PROMISES OF HTML5

15. LOCKOUT

19. FIXING HTML ISSUES

20. FIREFOX OS

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

22. -
+
=

23. PREDICTABLE HTML5 SUPPORT

24. SECURITY

25. AVOIDING USER OVERLOAD…
http://smus.com/installable-webapps/

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

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

28. APPLICATIONS

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

30. WEB APIS

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

32. BATTERY STATUS
API

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

34. VIBRATION API

35. VIBRATION API
// Vibrate for one 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);

36. NETWORK
INFORMATION API

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

38. PAGE VISIBILITY

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

40. PUSH
NOTIFICATIONS

41. PUSH NOTIFICATIONS (REQUEST)

42. PUSH NOTIFICATIONS (RECEIVE)

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

44. CONTACTS API

45. CONTACTS API
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")
};

46. 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

47. CERTIFIED APPS = THE OS :)

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

49. WEB
ACTIVITIES

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

52. APP
DISTRIBUTION

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

54. INSTALL FROM THE WEB…

55. DYNAMIC APP WEB SEARCH

56. DEVELOPMENT
ENVIRONMENT

57. DEVELOPER ENVIRONMENT

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

59. 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/

60. BUILDING
BLOCKS?

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

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

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

64. MOZILLA BRICK
<x-flipbox>
<div>I'm the front face.</div>
<div>And I'm the back face.</div>
</x-flipbox>
!
//JavaScript
toggleButton.addEventListener("click", function() {
flipBox.toggle();
});
http://mozilla.github.io/brick/

65. WHAT’S
COOKING?

66. CORDOVA IMPLEMENTATION APIS
•
Camera
•
Contacts
•
Device
•
Device-motion
•
Geolocation
•
Orientation
•
Vibration

67. CORDOVA IMPLEMENTATION APIS
$ sudo npm install -g cordova
$ cordova create hello com.example.hello HelloWorld
$ cd hello
$ cordova platform add firefoxos
$ cordova prepare firefoxos

68. CAMERA API
$ cordova plugin add org.apache.cordova.camera
!
//Cordova code
navigator.camera.getPicture(function (src) {
var img = document.createElement('img');
img.id = 'slide';
img.src = src;
}, function () {}, {
destinationType: 1
});

69. 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

70. APPMAKER!
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

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

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

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

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

75. TO WRAP UP…

76. NOTHING IS WASTED…
!
Aquarium Plants (Android w/ hand-coded native wrapper)
Calc (iOS w/ hand-coded native wrapper)
Calcula Hipoteca (Amazon Appstore)
Captain Rogers (HTML5 Desktop)
Cartelera Panama (Appcelerator Titanium)
Fresh Food Finder (PhoneGap)
Picross (WebOS)
Reditr (Chrome Dev Store)
Speed Cube Timer (Blackberry Webworks)
Squarez (C++)
Touch 12i (Windows Phone/ HTML5)
https://hacks.mozilla.org/2013/12/write-elsewhere-run-on-firefox/

77. THANKS!
CHRIS HEILMANN
@CODEPO8