![Page 1: Firefox OS - The platform you deserve - Firefox OS Budapest workshop - 2013-11-23](https://reader038.vdocuments.mx/reader038/viewer/2022102813/5442d084afaf9fe7098b4741/html5/thumbnails/1.jpg)
Firefox OSthe platform you deservesFrédéric Harper
Senior Technical Evangelist @ Mozilla
@fharper | outofcomfortzone.net
Budapest
Fir
efo
x O
S W
ork
shop –
20
13
-11
-23
![Page 2: Firefox OS - The platform you deserve - Firefox OS Budapest workshop - 2013-11-23](https://reader038.vdocuments.mx/reader038/viewer/2022102813/5442d084afaf9fe7098b4741/html5/thumbnails/2.jpg)
Elnézést, én nem beszélek magyarulThanks Google translate…
![Page 3: Firefox OS - The platform you deserve - Firefox OS Budapest workshop - 2013-11-23](https://reader038.vdocuments.mx/reader038/viewer/2022102813/5442d084afaf9fe7098b4741/html5/thumbnails/3.jpg)
What you deserve
![Page 4: Firefox OS - The platform you deserve - Firefox OS Budapest workshop - 2013-11-23](https://reader038.vdocuments.mx/reader038/viewer/2022102813/5442d084afaf9fe7098b4741/html5/thumbnails/4.jpg)
![Page 5: Firefox OS - The platform you deserve - Firefox OS Budapest workshop - 2013-11-23](https://reader038.vdocuments.mx/reader038/viewer/2022102813/5442d084afaf9fe7098b4741/html5/thumbnails/5.jpg)
Firefox OS
Using HTML5, CSS3 and JavaScriptwith a number of APIsto build apps.
![Page 6: Firefox OS - The platform you deserve - Firefox OS Budapest workshop - 2013-11-23](https://reader038.vdocuments.mx/reader038/viewer/2022102813/5442d084afaf9fe7098b4741/html5/thumbnails/6.jpg)
It’s open source
![Page 7: Firefox OS - The platform you deserve - Firefox OS Budapest workshop - 2013-11-23](https://reader038.vdocuments.mx/reader038/viewer/2022102813/5442d084afaf9fe7098b4741/html5/thumbnails/7.jpg)
Architecture
![Page 8: Firefox OS - The platform you deserve - Firefox OS Budapest workshop - 2013-11-23](https://reader038.vdocuments.mx/reader038/viewer/2022102813/5442d084afaf9fe7098b4741/html5/thumbnails/8.jpg)
Benefits of HTML5
In-built distribution – the Web
Simple technologies used by a lot of developers
Evolution of existing practices
Open, independent, and standardised
![Page 9: Firefox OS - The platform you deserve - Firefox OS Budapest workshop - 2013-11-23](https://reader038.vdocuments.mx/reader038/viewer/2022102813/5442d084afaf9fe7098b4741/html5/thumbnails/9.jpg)
Some facts
Released in Spain, Poland, Venezuela, Hungary, Colombia,
Uruguay, Mexico, and Brazil
18 mobile operator, and 6 hardware partners
Hardware options: ZTE Open, Alcatel One Touch Fire,
Geeksphone Keon, Geeksphone Peak, LG FireWeb…
Aimed at emerging markets/low end market
![Page 10: Firefox OS - The platform you deserve - Firefox OS Budapest workshop - 2013-11-23](https://reader038.vdocuments.mx/reader038/viewer/2022102813/5442d084afaf9fe7098b4741/html5/thumbnails/10.jpg)
Telenor Hungary - Alcatel One Touch Fire
![Page 11: Firefox OS - The platform you deserve - Firefox OS Budapest workshop - 2013-11-23](https://reader038.vdocuments.mx/reader038/viewer/2022102813/5442d084afaf9fe7098b4741/html5/thumbnails/11.jpg)
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"
}
}
}
![Page 12: Firefox OS - The platform you deserve - Firefox OS Budapest workshop - 2013-11-23](https://reader038.vdocuments.mx/reader038/viewer/2022102813/5442d084afaf9fe7098b4741/html5/thumbnails/12.jpg)
A Firefox OS app?
Hosted or packaged app
Using
Vanilla HTML5
Regular API
Privileged API
Certified API
![Page 13: Firefox OS - The platform you deserve - Firefox OS Budapest workshop - 2013-11-23](https://reader038.vdocuments.mx/reader038/viewer/2022102813/5442d084afaf9fe7098b4741/html5/thumbnails/13.jpg)
Firefox OS Marketplace
![Page 14: Firefox OS - The platform you deserve - Firefox OS Budapest workshop - 2013-11-23](https://reader038.vdocuments.mx/reader038/viewer/2022102813/5442d084afaf9fe7098b4741/html5/thumbnails/14.jpg)
Web APIs
![Page 15: Firefox OS - The platform you deserve - Firefox OS Budapest workshop - 2013-11-23](https://reader038.vdocuments.mx/reader038/viewer/2022102813/5442d084afaf9fe7098b4741/html5/thumbnails/15.jpg)
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
![Page 16: Firefox OS - The platform you deserve - Firefox OS Budapest workshop - 2013-11-23](https://reader038.vdocuments.mx/reader038/viewer/2022102813/5442d084afaf9fe7098b4741/html5/thumbnails/16.jpg)
Ambient Light Sensor
![Page 17: Firefox OS - The platform you deserve - Firefox OS Budapest workshop - 2013-11-23](https://reader038.vdocuments.mx/reader038/viewer/2022102813/5442d084afaf9fe7098b4741/html5/thumbnails/17.jpg)
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);
});
![Page 18: Firefox OS - The platform you deserve - Firefox OS Budapest workshop - 2013-11-23](https://reader038.vdocuments.mx/reader038/viewer/2022102813/5442d084afaf9fe7098b4741/html5/thumbnails/18.jpg)
Battery Status
![Page 19: Firefox OS - The platform you deserve - Firefox OS Budapest workshop - 2013-11-23](https://reader038.vdocuments.mx/reader038/viewer/2022102813/5442d084afaf9fe7098b4741/html5/thumbnails/19.jpg)
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);
}
![Page 20: Firefox OS - The platform you deserve - Firefox OS Budapest workshop - 2013-11-23](https://reader038.vdocuments.mx/reader038/viewer/2022102813/5442d084afaf9fe7098b4741/html5/thumbnails/20.jpg)
Web APIs – Privileged
• Browser API• Contacts API• Device Storage API• systemXHR• TCP Socket API
packaged
![Page 21: Firefox OS - The platform you deserve - Firefox OS Budapest workshop - 2013-11-23](https://reader038.vdocuments.mx/reader038/viewer/2022102813/5442d084afaf9fe7098b4741/html5/thumbnails/21.jpg)
Browser
![Page 22: Firefox OS - The platform you deserve - Firefox OS Budapest workshop - 2013-11-23](https://reader038.vdocuments.mx/reader038/viewer/2022102813/5442d084afaf9fe7098b4741/html5/thumbnails/22.jpg)
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>
![Page 23: Firefox OS - The platform you deserve - Firefox OS Budapest workshop - 2013-11-23](https://reader038.vdocuments.mx/reader038/viewer/2022102813/5442d084afaf9fe7098b4741/html5/thumbnails/23.jpg)
Browser
addEventListener('mozbrowserloadstart', function(e) {
//Do stuff
});
/*
Possible values:
"mozbrowserloadstart“ "mozbrowserloadend"
"mozbrowserlocationchange“ "mozbrowsertitlechange"
"mozbrowsericonchange“ "mozbrowsersecuritychange"
"mozbrowsercontextmenu“ "mozbrowsererror"
"mozbrowserkeyevent“ "mozbrowsershowmodalprompt"
"mozbrowseropenwindow“ "mozbrowserclose"
*/
![Page 24: Firefox OS - The platform you deserve - Firefox OS Budapest workshop - 2013-11-23](https://reader038.vdocuments.mx/reader038/viewer/2022102813/5442d084afaf9fe7098b4741/html5/thumbnails/24.jpg)
Contacts
![Page 25: Firefox OS - The platform you deserve - Firefox OS Budapest workshop - 2013-11-23](https://reader038.vdocuments.mx/reader038/viewer/2022102813/5442d084afaf9fe7098b4741/html5/thumbnails/25.jpg)
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")
};
![Page 26: Firefox OS - The platform you deserve - Firefox OS Budapest workshop - 2013-11-23](https://reader038.vdocuments.mx/reader038/viewer/2022102813/5442d084afaf9fe7098b4741/html5/thumbnails/26.jpg)
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
![Page 27: Firefox OS - The platform you deserve - Firefox OS Budapest workshop - 2013-11-23](https://reader038.vdocuments.mx/reader038/viewer/2022102813/5442d084afaf9fe7098b4741/html5/thumbnails/27.jpg)
Web Activities
![Page 28: Firefox OS - The platform you deserve - Firefox OS Budapest workshop - 2013-11-23](https://reader038.vdocuments.mx/reader038/viewer/2022102813/5442d084afaf9fe7098b4741/html5/thumbnails/28.jpg)
Web Activities
• browse• configure• costcontrol• dial• open• pick• record• save-bookmark
• share• view• update• new
• mail• websms/sms• webcontacts/contact
![Page 29: Firefox OS - The platform you deserve - Firefox OS Budapest workshop - 2013-11-23](https://reader038.vdocuments.mx/reader038/viewer/2022102813/5442d084afaf9fe7098b4741/html5/thumbnails/29.jpg)
Pick
var activity = new MozActivity({
name: "pick",
//Provide the data required
//by the filter of the activity
data: {
type: "image/jpeg"
}
});
![Page 30: Firefox OS - The platform you deserve - Firefox OS Budapest workshop - 2013-11-23](https://reader038.vdocuments.mx/reader038/viewer/2022102813/5442d084afaf9fe7098b4741/html5/thumbnails/30.jpg)
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
};
![Page 31: Firefox OS - The platform you deserve - Firefox OS Budapest workshop - 2013-11-23](https://reader038.vdocuments.mx/reader038/viewer/2022102813/5442d084afaf9fe7098b4741/html5/thumbnails/31.jpg)
Dial
var call = new MozActivity({
name: "dial",
data: {
number: "+46777888999"
}
});
![Page 32: Firefox OS - The platform you deserve - Firefox OS Budapest workshop - 2013-11-23](https://reader038.vdocuments.mx/reader038/viewer/2022102813/5442d084afaf9fe7098b4741/html5/thumbnails/32.jpg)
new webcontacts/contactvar newContact = new MozActivity({
name: "new",
data: {
type: "webcontacts/contact",
params: {
givenName: "Frédéric",
lastName: "Harper",
email: ”[email protected]",
company: "Mozilla"
}
}
});
![Page 33: Firefox OS - The platform you deserve - Firefox OS Budapest workshop - 2013-11-23](https://reader038.vdocuments.mx/reader038/viewer/2022102813/5442d084afaf9fe7098b4741/html5/thumbnails/33.jpg)
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");
}
}
});
![Page 34: Firefox OS - The platform you deserve - Firefox OS Budapest workshop - 2013-11-23](https://reader038.vdocuments.mx/reader038/viewer/2022102813/5442d084afaf9fe7098b4741/html5/thumbnails/34.jpg)
Don’t forget the manifest
"activities": {
"pick": {
"filters": {
"type": ["image/jpeg", "image/png"]
},
"disposition": "inline",
"returnValue": true,
"href": "/index.html#pick"
}
}
![Page 35: Firefox OS - The platform you deserve - Firefox OS Budapest workshop - 2013-11-23](https://reader038.vdocuments.mx/reader038/viewer/2022102813/5442d084afaf9fe7098b4741/html5/thumbnails/35.jpg)
Web Activities & hosted app…
![Page 36: Firefox OS - The platform you deserve - Firefox OS Budapest workshop - 2013-11-23](https://reader038.vdocuments.mx/reader038/viewer/2022102813/5442d084afaf9fe7098b4741/html5/thumbnails/36.jpg)
How to start
![Page 37: Firefox OS - The platform you deserve - Firefox OS Budapest workshop - 2013-11-23](https://reader038.vdocuments.mx/reader038/viewer/2022102813/5442d084afaf9fe7098b4741/html5/thumbnails/37.jpg)
![Page 38: Firefox OS - The platform you deserve - Firefox OS Budapest workshop - 2013-11-23](https://reader038.vdocuments.mx/reader038/viewer/2022102813/5442d084afaf9fe7098b4741/html5/thumbnails/38.jpg)
Phonegap
![Page 39: Firefox OS - The platform you deserve - Firefox OS Budapest workshop - 2013-11-23](https://reader038.vdocuments.mx/reader038/viewer/2022102813/5442d084afaf9fe7098b4741/html5/thumbnails/39.jpg)
Firefox OS Simulator
![Page 40: Firefox OS - The platform you deserve - Firefox OS Budapest workshop - 2013-11-23](https://reader038.vdocuments.mx/reader038/viewer/2022102813/5442d084afaf9fe7098b4741/html5/thumbnails/40.jpg)
Firefox OS App Manager
![Page 41: Firefox OS - The platform you deserve - Firefox OS Budapest workshop - 2013-11-23](https://reader038.vdocuments.mx/reader038/viewer/2022102813/5442d084afaf9fe7098b4741/html5/thumbnails/41.jpg)
Firefox Web Developer Tools
![Page 42: Firefox OS - The platform you deserve - Firefox OS Budapest workshop - 2013-11-23](https://reader038.vdocuments.mx/reader038/viewer/2022102813/5442d084afaf9fe7098b4741/html5/thumbnails/42.jpg)
Mozilla Developer Network
![Page 43: Firefox OS - The platform you deserve - Firefox OS Budapest workshop - 2013-11-23](https://reader038.vdocuments.mx/reader038/viewer/2022102813/5442d084afaf9fe7098b4741/html5/thumbnails/43.jpg)
Mozilla Hacks blog
![Page 44: Firefox OS - The platform you deserve - Firefox OS Budapest workshop - 2013-11-23](https://reader038.vdocuments.mx/reader038/viewer/2022102813/5442d084afaf9fe7098b4741/html5/thumbnails/44.jpg)
StackOverflow
![Page 45: Firefox OS - The platform you deserve - Firefox OS Budapest workshop - 2013-11-23](https://reader038.vdocuments.mx/reader038/viewer/2022102813/5442d084afaf9fe7098b4741/html5/thumbnails/45.jpg)
Some candies
![Page 46: Firefox OS - The platform you deserve - Firefox OS Budapest workshop - 2013-11-23](https://reader038.vdocuments.mx/reader038/viewer/2022102813/5442d084afaf9fe7098b4741/html5/thumbnails/46.jpg)
Firefox OS Boilerplate
![Page 47: Firefox OS - The platform you deserve - Firefox OS Budapest workshop - 2013-11-23](https://reader038.vdocuments.mx/reader038/viewer/2022102813/5442d084afaf9fe7098b4741/html5/thumbnails/47.jpg)
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.
![Page 48: Firefox OS - The platform you deserve - Firefox OS Budapest workshop - 2013-11-23](https://reader038.vdocuments.mx/reader038/viewer/2022102813/5442d084afaf9fe7098b4741/html5/thumbnails/48.jpg)
Firefox OS UI component
![Page 49: Firefox OS - The platform you deserve - Firefox OS Budapest workshop - 2013-11-23](https://reader038.vdocuments.mx/reader038/viewer/2022102813/5442d084afaf9fe7098b4741/html5/thumbnails/49.jpg)
Mozilla Brick
![Page 50: Firefox OS - The platform you deserve - Firefox OS Budapest workshop - 2013-11-23](https://reader038.vdocuments.mx/reader038/viewer/2022102813/5442d084afaf9fe7098b4741/html5/thumbnails/50.jpg)
What’s next
![Page 51: Firefox OS - The platform you deserve - Firefox OS Budapest workshop - 2013-11-23](https://reader038.vdocuments.mx/reader038/viewer/2022102813/5442d084afaf9fe7098b4741/html5/thumbnails/51.jpg)
More Web APIs
• Calendar API
• FileHandle API Sync API
• Keyboard/IME API WebRTC
• HTTP-cache API
• Peer to Peer API
• Spellcheck API LogAPI
• Resource lock API
• UDP Datagram Socket API
• WebNFC
• WebUSB
![Page 52: Firefox OS - The platform you deserve - Firefox OS Budapest workshop - 2013-11-23](https://reader038.vdocuments.mx/reader038/viewer/2022102813/5442d084afaf9fe7098b4741/html5/thumbnails/52.jpg)
Appmaker
![Page 53: Firefox OS - The platform you deserve - Firefox OS Budapest workshop - 2013-11-23](https://reader038.vdocuments.mx/reader038/viewer/2022102813/5442d084afaf9fe7098b4741/html5/thumbnails/53.jpg)
WARNING(big voice + sound effect)It’s only the beginning…
![Page 54: Firefox OS - The platform you deserve - Firefox OS Budapest workshop - 2013-11-23](https://reader038.vdocuments.mx/reader038/viewer/2022102813/5442d084afaf9fe7098b4741/html5/thumbnails/54.jpg)
Resources
Firefox OS Simulatorhttp://j.mp/fxosSimulator
Firefox OS App Managerhttp://j.mp/fxosAppManager
Mozilla Developer Networkhttps://developer.mozilla.org
Firefox OS WebAPI & Web Activitieshttp://j.mp/fxosWebAPI
![Page 55: Firefox OS - The platform you deserve - Firefox OS Budapest workshop - 2013-11-23](https://reader038.vdocuments.mx/reader038/viewer/2022102813/5442d084afaf9fe7098b4741/html5/thumbnails/55.jpg)
Resources
StackOverflow forumhttp://j.mp/fxosStackOverflow
Firefox OS Boilerplatehttp://j.mp/fxosBoilerplate
Firefox OS UI Componenthttp://buildingfirefoxos.com/
Mozilla Brickhttp://j.mp/mozBrick