My slides from Developer Week 2014 in Nuremberg. Original Slides: http://casarock.github.io/dwx14 (Quality of uploaded slides is not good as slideshare has problem converting the used backgorund)

1. FIREFOX OS
A (MOBILE) WEB DEVELOPERS DREAM
Carsten Sandtner ( ) 2014 - DWX 2014@casarock

2. WHO AM I?
Carsten Sandtner
Head of Development at //mediaman GmbH
Mozilla representative
Javascript enthusiast and web developer since 1998.

3. HTML5 BASED
OPERATING SYSTEMS
The full Safari engine is inside of iPhone.
And so, you can write amazing Web 2.0 and
Ajax apps that look exactly and behave
exactly like apps on the iPhone. And these
apps can integrate perfectly with iPhone
services. They can make a call, they can
send an email, they can look up a location
on Google Maps. And guess what? There’s
no SDK that you need!

4. WEBOS

5. CHROME OS

7. IN DETAIL

8. ARCHITECTURE

11. GONK
Low level OS of Firefox OS. Linux - based on Android Open
Source Project

12. GECKO

13. GAIA
UI level of Firefox OS
Only interface to the underlying operating system and hardware

14. WEB APIS AND WEB ACTIVITIES

15. APPS AND 3RD PARTY APPS
Every HTML5, Javascript, CSS based Apps for Firefox OS
Using WebAPIs and Web Activities

16. APP DEVELOPMENT
Open Web Apps

17. 3 DIFFERENT APP TYPES

18. HOSTED APPS

19. PRIVILEGED APPS

20. CERTIFIED APPS

21. THE WEB APP MANIFEST

22. EXAMPLE (MINIMAL)
{
"name":"MyAwesomeApp",
"description":"Myelevatorpitchgoeshere",
"launch_path":"/somedir/index.html",
"icons":{
"128":"/img/icon-128.png"
},
"developer":{
"name":"YourName",
"url":"http://your-homepage-here.tld"
},
"default_locale":"en"
}

23. EXAMPLE PRIVILEGED APP
{
"name":"MyAwesomePrivilegedApp",
....
"type":"privileged",
"fullscreen":"true",
"permissions":{
"contacts":{
"description":"Requiredforautocompletioninthesharescreen",
"access":"readcreate"
}
},
"default_locale":"en",
...
}

24. WEB APIS
Open API specifications to access the hardware of devices
Created with and submitted to standards bodies and other
browser makers

25. WEB APIS: HOSTED APPS
Vibration API, Screen Orientation, Geolocation API, Mouse
Lock API, Open WebApps, Network Information API,
Battery Status API, Alarm API, Push Notifications API,
WebFM API / FMRadio, WebPayment, IndexedDB,
Ambient light sensor, Proximity sensor, Notification.

26. WEB APIS: PRIVILEGED APPS
Device Storage API, Browser API, TCP Socket API,
Contacts API, systemXHR.

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

28. Example: Battery API
varbattery=navigator.battery||
navigator.mozBattery||
navigator.webkitBattery,
info={
charging:battery.charging,
chargingTime:parseInt(battery.chargingTime/60,10),
dischargingTime:parseInt(battery.dischargingTime/60,10),
level:Math.round(battery.level*100)
};

29. EXAMPLE: BATTERY API - CONT.
APIs are event driven!
varbattery=navigator.battery||
navigator.mozBattery||
navigator.webkitBattery;
functionupdateBatteryStatus(){
console.log("Batterystatus:"+battery.level*100+"%");
if(battery.charging){
console.log("Batteryischarging");
}
}
battery.addEventListener("chargingchange",updateBatteryStatus);
battery.addEventListener("levelchange",updateBatteryStatus);
updateBatteryStatus();

30. EXAMPLE: GEOLOCATION API*
navigator.geolocation.getCurrentPosition(handleLocation);
functionhandleLocation(position){
varlatitude=position.coords.latitude;
varlongitude=position.coords.longitude;
}
//Orwatchthecurrentposition...
varwatchID=navigator.geolocation.watchPosition(function(position){
handlePostion(position.coords.latitude,position.coords.longitude);
});
*Ok, ok, not really a new one!

31. EXAMPLE: VIBRATION API
varpattern=[200,100,200,200,100],
goodVibration=navigator.vibrate(pattern);

32. EXAMPLE: NOTIFICATION API
Needs permissions granted by users! (e.g. webapp.manifest)
"permissions":{
"desktop-notification":{
"description":"Allowstodisplaynotificationsontheuser'sdesktop."
}
}
//Atfirst,let'scheckifwehavepermissionfornotification
//Ifnot,let'saskforit
if(Notification&&Notification.permission!=="granted"){
Notification.requestPermission(function(status){
if(Notification.permission!==status){
Notification.permission=status;
}
});
}
if(Notification&&Notification.permission==="granted"){
varn=newNotification("Hi!");
}

33. EXAMPLE: CONNECTION API
Get information about current connection
varconnection=navigator.connection||
navigator.webkitConnection||
navigator.mozConnection;
functionupdateConnectionStatus(){
console.log("Connectionchanged");
console.log("Bandwidth:"+connection.bandwidth);
console.log("Metered:"+connection.metered);
}
connection.onchange=updateConnectionStatus;

34. EXAMPLE: AMBIENTLIGHT
Get current Lux of ambient light
window.ondevicelight=function(event){
//Readouttheluxvalue
varlux=event.value;
};

35. EXAMPLE: CONTACTS API
Read/Write/Delete Contacts - Permission required!
"permissions":{
"contacts":{
"description":"ContactspermissionsisrequiredtowritecontactfromGoogleto
"access":"readwrite"}
}
}
varcontactData={
givenName:["John"],
familyName:["Doe"]
};
varperson=newmozContact(contactData);
//savethenewcontact
varsaving=navigator.mozContacts.save(person);
saving.onsuccess=function(){
console.log('newcontactsaved');
};
saving.onerror=function(err){
console.error(err);
};

36. EXAMPLE: DEVICE STORAGE API
Save/Read from sdcard, photo, music, video ...
"permissions":{
"device-storage:pictures":{"access":"readwrite"},
"device-storage:sdcard":{"access":"readwrite"}
}
varsdcard=navigator.getDeviceStorage("sdcard"),
file=newBlob(["Thisisatextfile."],{type:"text/plain"}),
request=sdcard.addNamed(file,"my-file.txt");
request.onsuccess=function(){...}
request.onerror=function(){...}
varpics=navigator.getDeviceStorage('pictures');
//browsealltheimagesavailable
varcursor=pics.enumerate();
cursor.onsuccess=function(){
varfile=this.result;
console.log("Filefound:"+file.name);
//checkifthereisotherresults
if(!this.done){
//Thenwemovetothenextresult,whichcallthecursor
//successwiththenextfileasresult.
this.continue();
}
}

37. AND THERE ARE MANY MORE!
APIs at MDN

38. WEB ACTIVITIES

39. WEB ACTIVITIES
configure, costcontrol, dial, open, pick, record, save-
bookmark, share, view, update.
new: f.e type: “websms/sms” or “webcontacts/contact”

40. EXAMPLE: DIAL A NUMBER
varcall=newMozActivity({
name:"dial",
data:{
number:"+49123456789"
}
});
Invokes "native" Dialer app

41. EXAMPLE: OPEN AN URL
varopenURL=newMozActivity({
name:"view",
data:{
type:"url",//Possiblytext/htmlinfutureversions
url:"http://www.developer-week.de/"
}
});
Invokes "native" browser

42. EXAMPLE: SEND A SMS
varsms=newMozActivity({
name:"new",
data:{
type:"websms/sms",
number:"+49987654321"
}
});
Invokes "native" messaging app

43. EXAMPLE: PICK AN IMAGE
vargetphoto=newMozActivity({
name:"pick",
data:{
type:["image/png",
"image/jpg",
"image/jpeg"]
}
});

44. RESULT

45. EXAMPLE: PICK AN IMAGE - CONT.
getphoto.onsuccess=function(){
varimg=document.createElement("img");
if(this.result.blob.type.indexOf("image")!=-1){
img.src=window.URL.createObjectURL(this.result.blob);
}
};
getphoto.onerror=function(){//error
};

46. REGISTER AN APP AS ACTIVITY HANDLER
{
//OtherAppManifestrelatedstuff
//Activityregistration
"activities":{
"pick":{
"href":"./pick.html",
"disposition":"inline",
"filters":{
"type":["image/*","image/jpeg","image/png"]
},
"returnValue":true
}
}
}

47. HANDLE AN ACTIVITY
navigator.mozSetMessageHandler('activity',function(activityRequest){
varoption=activityRequest.source;
if(option.name==="pick"){
//Dosomethingtohandletheactivity
//Sendbacktheresult
if(picture){
activityRequest.postResult(picture);
}else{
activityRequest.postError("Unabletoprovideapicture");
}
}
});

48. TOOLS&UTILS

49. TESTING
Simulator
Browser - It's a Web App!

50. DEVELOPMENT
No SDK!
Use your favorite IDE/Editor
It's HTML5!
WebIDE!

51. WEBIDE

52. https://apps.webmaker.org/
RAPID APPLICATION DEVELOPMENT
use Mozillas Appmaker

53. DEBUGGING

54. DEBUGGING - SIMULATOR
Developer tools in Firefox! (NOT! Firebug)
Remote Debugger!

55. DEBUGGING - REMOTE
Connect your device
Debug!
That's all

56. UI COMPONENTS
http://buildingfirefoxos.com/

57. UI COMPONENTS - BRICK!
http://mozilla.github.io/brick/

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

59. PHONEGAP AND CORDOVA
http://build.phonegap.com/
http://cordova.apache.org/

60. HOW TO DISTRIBUTE YOUR APP

61. HOSTED APP
Host the App on your web space
Provide installation using WebAPI

62. HOSTED APP DISTRIBUTION
Check if app is already installed
varrequest=navigator.mozApps.checkInstalled(manifestPath);
request.onerror=function(){
console.log('Errorcheckingforinstalledapp:',request.error.name);
};
request.onsuccess=function(){
//Iftheappisinstalled,you'llgetamozAppobjectin`request.result`,
//else`request.result`isnull
console.log("Couldbeinstalled:",request.result!==null?"isinstalled":"isno
};

63. HOSTED APP DISTRIBUTION
Install your app
varinstallRequest=navigator.mozApps.install(manifestPath);
installRequest.onsuccess=function(){
//Noerror
console.log("Appinstalled");
};
installRequest.onerror=function(){
console.log('Errorinstallingtheapp:',installRequest.error.name);
};
Done. Cool, eh?
Works on Firefox Android, too.

64. Distribute via Firefox OS Marketplace
PRIVILEGED APP

65. Validate using App-Manager
PRIVILEGED APP DISTRIBUTION
Upload ZIP of your app to marketplace.
Wait for approval. Done.

67. THANK YOU!
Carsten Sandtner
@casarock
Slides: http://casarock.github.io/dwx14