Firefox OS
meets
Ember Fest 2014
Francisco Jordano
@mepartoconmigo
Working and Loving Firefox OS
a framework for creating ambitious web applications
Firefox OS: the web is the platform
the web is ready for do magic things
at mozilla we believe the web is what you need in any device
universal access to the web from the web
lots of partners and devices
First Firefox OS phone under 33$
- Dual SIM
- 128 MB Ram
- SDCARD 4GB
- 2 MP Camera
- 1 GHz processor
Firefox OS Flame
Developer's reference device
- 1.2 GHz dual core
- 4.5” screen (FWVGA)
- 5MP rear camear with flash
- 2MP frontal camera
- Dual sim
- 1GB RAM (adjustable)
How does Firefox OS work?
What do I have to learn ?
What do I need to create a Web App?
just a manifest file!
a ... what?
{
"version": "1",
"name": "My Web App",
"launch_path": "/index.html",
"description": "This is my fantastic web application that runs everywere",
"icons": {
"64": "/images/logo64.png",
"128": "/images/logo128.png"
},
"developer": {
"name": "Open Web Lover",
"url": "http://mozilla.com"
},
"installs_allowed_from": ["*"],
"default_locale": "en",
"permissions": {
"desktop-notification": {
"description" : "To show notifications"
},
"geolocation": {
"description" : "Marking out user location"
}
}
}a simple json file called manifest.json
We are defining new sets of
Web APIs
and we are working with the community to standardise them
var call = navigator.mozTelephony.dial('555-333-222-666');
call.onconnected = function onConnected(evt) {
console.log('Better start to speak now');
};
call.ondisconnected = function onDisconnected(evt) {
console.log('Call too long, dude, your bill is getting a bit crazy');
};
call.onerror = function onError(evt) {
console.log('This is embarrassing');
};Making a call with Telephony API
var sms = navigator.mozMobileMessage.send('555-333-222-666',
"Mum I'm OK, I finished all the vegies");
sms.onsucces = function onSuccess(evt) {
console.log('Now your mum can go to sleep happy');
};
sms.onerror = function onError(evt) {
console.log('Problems ahead');
};Sending a SMS to your mum
window.addEventListener('userproximity', function(event) {
if (event.near) {
// let's power off the screen
navigator.mozPower.screenEnabled = false;
} else {
// Otherwise, let's power on the screen
navigator.mozPower.screenEnabled = true;
}
});Don't hang out when you get your face close to the screen
var contactData = {
givenName: ["John"],
familyName: ["Doe"],
nickname: ["No kidding"]
};
// save the new contact
var saving = navigator.mozContacts.save(person);
saving.onsuccess = function() {
console.log('new contact saved');
};Play with your contacts list
We have the tools
Permissions
- Designed to protect users privacy
- Associated with the APIs used in our APP
- Declared in the application manifest
"permissions": {
"desktop-notification": {
"description" : "To show notifications"
},
"geolocation": {
"description" : "Marking out user location"
}
}Permissions
Type web: Traditional web content
Type privileged: New apis and features
privileged apps are reviewed by mozilla and can be distributed only from the mozilla marketplace
New permission model
Designed to give user total control over privacy and data.
More features to know!
Make other apps work for you!
Web Activities
var activity = new MozActivity({
name: 'pick',
data: {
type: 'webcontacts/contact'
}
});
activity.onsuccess = function onSuccess() {
var contact = this.result;
console.log(contact.name);
};or you could let other apps use yours
window.navigator.mozSetMessageHandler('activity', function activityHandler(activity) {
activity.postSuccess({contact: {
'name': 'Pedro'
}});
});
Push Notifications
Simple Push API
Web Components
<gaia-header id='details-view-header' action="back">
<button id="edit-contact-button"
role="menuitem"
data-icon="edit-contact"
data-l10n-id="edit"></button>
</gaia-header>
ServiceWorkers: close to land
Developer Tools
Debug the apps with the tools that you know
Check the performance of your app
Even more tools
App Distribution
It will run in your android phone too!
Freedom to distribute your webapp
var request = navigator.mozApps.install("http://mywebapp.com/manifest.webapp");
request.onsuccess = function() {
// great - display a message, or redirect to a launch page
};
request.onerror = function() {
// whoops - this.error.name has details
};Create your own install button from your web page
Ember tricks for Firefox OS
Packaged apps
- Are privileged apps
- Security in place
- Very restrictive content security policy (CSP)
Precompile your Handlebars templates
npm install -g ember-precompile
ember-precompile template... [-f OUTPUT_FILE]Avoid the use of inline scripting
or ... dynamically load them ... but
Fetch data from the outside world
"permissions": {
"systemXHR":{}
}You need to ask for an extra permission in your manifest.json and ...
jQuery helper
$.ajaxSetup( {
xhr: function() {
return new window.XMLHttpRequest( {
mozSystem: true
} );
}
} );Tell jQuery that you want to build XMLHttpRequest object with an specific config option