�ݺ�ߣ

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

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

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!

Firefox OS - A (mobile) Web Developers dream - DWX14

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

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

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

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"
}

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

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

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.

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

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.

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

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();

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!

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

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

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;

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

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

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();
}
}

AND THERE ARE MANY MORE!
APIs at MDN

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

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

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

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

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

EXAMPLE: PICK AN IMAGE - CONT.
getphoto.onsuccess=function(){
varimg=document.createElement("img");
if(this.result.blob.type.indexOf("image")!=-1){
img.src=/slideshow/firefox-os-a-mobile-web-developers-dream-dwx14/37012170/window.URL.createObjectURL(this.result.blob);
}
};
getphoto.onerror=function(){//error
};

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

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

TESTING
Simulator
Browser - It's a Web App!

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

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

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

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

UI COMPONENTS
http://buildingfirefoxos.com/

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

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

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

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

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
};

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.

Distribute via Firefox OS Marketplace
PRIVILEGED APP

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

THANK YOU!
Carsten Sandtner
@casarock
�ݺ�ߣs: http://casarock.github.io/dwx14

�ݺ�ߣ

Firefox OS - A (mobile) Web Developers dream - DWX14

More Related Content

Firefox OS - A (mobile) Web Developers dream - DWX14