1. Firefox OS
a startup opportunity
Frédéric Harper
Sr. Technical Evangelist @ Mozilla
@fharper | outofcomfortzone.net
Mobile Startups Toronto
& HTML5 Toronto meetup
Toronto, Canada
2014-01-08

2. The startup business model

3. Creative Commons: http://j.mp/13UsL5W

4. Which platform should I start with?

5. You should start with the web…

6. 38 billion devices
connected in 2020
ABI Research - 2013-05-09 - http://j.mp/38billion

8. What you deserve

12. Built with the Web
Using HTML5, CSS3 and JavaScript
with a number of APIs
to build apps.

13. It’s open source

14. Architecture

15. Benefits of HTML5
 In-built distribution – the Web
 Simple technologies used by a lot of developers
 Evolution of existing practices
 Open, independent, and standardised

16. Some facts
 Released in
Spain, Poland, Venezuela, Hungary, Colombia, Uruguay, Mexico, Bra
zil, and Greece
 18 mobile operator, and 6 hardware partners
 Hardware options: ZTE Open, Alcatel One Touch Fire, Geeksphone
Keon, Geeksphone Peak, LG FireWeb…

18. A Firefox OS app?
 Creating a hosted or packaged app
 Using

Vanilla HTML5

Regular API

Privileged API

Certified API

19. HTML5 + manifest (JSON) = Firefox OS app
{
"version": "1",
"name": "Firefox OS Boilerplate App",
"launch_path": "/index.html",
"description": "Boilerplate Firefox OS app with example use cases to get started",
"icons": {
"16": "/images/logo16.png”,},
"developer": {
"name": "Robert Nyman",
"url": http://robertnyman.com
},
"default_locale": "en",
"permissions": {
"geolocation": {
"description": "Marking out user location"
}
}
}

20. Web APIs

21. Web APIs – Regular
•
•
•
•
•
•
•
•
Alarm API
Ambient light sensor
Archive API
Battery Status API
Geolocation API
IndexedDB
Network Information API
Notifications API
•
•
•
•
•
•
•
•
Open WebApps
Proximity sensor
Push API
Screen Orientation
Vibration API
Web Activities
WebFM API
WebPayment
packaged
hosted

22. Ambient Light Sensor

23. 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);
});

24. DEMO
Boilerplate – Ambient Light Sensor

25. Battery Status

26. 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);
}

27. DEMO
Boilerplate – Battery status

28. Web APIs – Privileged
•
•
•
•
•
Browser API
Contacts API
Device Storage API
systemXHR
TCP Socket API
packaged

29. Browser

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

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

32. Contacts

33. 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")
};

34. Web APIs – Certified
•
•
•
•
•
•
•
•
Camera API
Idle API
Mobile Connection API
Network Stats API
Permissions API
Power Management API
Settings API
Time/Clock API
•
•
•
•
•
Voicemail
WebBluetooth
WebSMS
WebTelephony
WiFi Information API
OS/OEM

35. Web Activities

36. Web Activities
•
•
•
•
•
•
•
•
browse
configure
costcontrol
dial
open
pick
record
save-bookmark
•
•
•
•
share
view
update
new
•
•
•
mail
websms/sms
webcontacts/contact

37. Pick
var activity = new MozActivity({
name: "pick",
//Provide the data required
//by the filter of the activity
data: {
type: "image/jpeg"
}
});

38. Pick
activity.onsuccess = function () {
var img = document.createElement("img");
if (this.result.blob.type.indexOf("image") != -1) {
img.src = window.URL.createObjectURL(this.result.blob);
}
};
activity.onerror = function () {
//error
};

39. Dial
var call = new MozActivity({
name: "dial",
data: {
number: "+46777888999"
}
});

40. new webcontacts/contact
var newContact = new MozActivity({
name: "new",
data: {
type: "webcontacts/contact",
params: {
givenName: "Frédéric",
lastName: "Harper",
email: ”fharper@mozilla.com",
company: "Mozilla"
}
}
});

41. Web Activity Received Handler
navigator.mozSetMessageHandler('activity', function(activityRequest) {
var option = activityRequest.source;
if (activityRequest.source.name === "pick") {
// Do something to handle the activity
if (picture) {
activityRequest.postResult(picture);
}
else {
activityRequest.postError("Unable to provide a picture");
}
}
});

42. Don’t forget the manifest
"activities": {
"pick": {
"filters": {
"type": ["image/jpeg", "image/png"]
},
"disposition": "inline",
"returnValue": true,
"href": "/index.html#pick"
}
}

44. How to start

45. Creative Commons: http://j.mp/Ilm7wx

46. Phonegap

47. Firefox OS Simulator (1.1 – no Maverick)

48. Firefox OS App Manager + Simulator
(1.2+)

49. Firefox Web Developer Tools

50. DEMO
How to debug a Firefox OS app

54. Some candies

56. Prototyping with JSFiddle
• Append /webapp.manifest to
install the app in the Firefox
OS simulator
• Append /fxos.html to get an
install page like a Firefox OS
hosted app.

59. What’s next

61. More Web APIs & features
• Calendar API
• Spellcheck API LogAPI
• FileHandle API Sync API
• Resource lock API
• Keyboard/IME API WebRTC • UDP Datagram Socket API
• HTTP-cache API
• WebNFC
• Peer to Peer API
• WebUSB

62. To infinity, and
beyond… it’s only
the beginning!
Creative Commons: http://j.mp/1gIdcPF

63. While building your startup
Why not port your web app to Firefox OS? You’ll reach a new audience…

64. Resources
Firefox OS Simulator
http://j.mp/fxosSimulator
Firefox OS App Manager
http://j.mp/fxosAppManager
Mozilla Developer Network
https://developer.mozilla.org
Firefox OS WebAPI & Web Activities
http://j.mp/fxosWebAPI

65. Resources
StackOverflow forum
http://j.mp/fxosStackOverflow
Firefox OS Boilerplate
http://j.mp/fxosBoilerplate
Firefox OS UI Component
http://buildingfirefoxos.com/
Mozilla Brick
http://j.mp/mozBrick

66. If you plan to
or are building
a Firefox OS app…
Please let me know!

67. Attribution
ShareAlike
http://creativecommons.org/licenses/by-sa/4.0/

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