�ݺ�ߣ

FIREFOX OS
A (MOBILE) WEB DEVELOPERS DREAM
CarstenSandtner( )2014-muxCampWorms2014@casarock

WHO AM I?
Carsten Sandtner
Head of Developmentat//mediaman GmbH
Mozillarepresentative
Javascriptenthusiastand 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
thatlookexactly 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 lookup a
location on Google Maps. And guess what?
There’s no SDK thatyou need!

WEBOS
Invented byPalm. Aimed atsmartphones and tablets.
Launched 2009
Apps are written in HTML5
Palm sold to HP. HP to LG2013
First(mobile) OS with HTML5 UI!
Enyo Framework stillalive

CHROMEOS
ALinux distribution where Google Chrome is the "UI"layer
Launched 2009
Desktop only!
The browser is the OS (atleastUI)
Stillalive. Chromebooks are available

WINDOWS 8(.1)
Notthe OS, butFirstClass Apps in HTML5.
Build Windows 8 Apps in HTML5, CSS and Javascript
FirstClass Apps.

FIREFOX OS
Fullyopen mobile operatingsystem based on web standards
Firstversion released 2011
For smartphones and tablets
Fullyweb based
App development: JustHTML5

GONK
Low levelOS of Firefox OS. Linux based on Android Open
SourceProject

GECKO
Wellknown renderingengine byMozilla

GAIA
UI levelof Firefox OS
Onlyinterface to the underlyingoperatingsystem and hardware

WEB APIS AND WEB ACTIVITIES
Web APIs
Access device hardware
Provides access to datastorage
Security-sensitive APIs need approvement
Some are alreadystandard (W3C)
Web Activities
Access to sensible user data
App requests datafrom an other app
e.g. Dialanumber requests Phone app
Onlyavailable for installed or higher privileged apps

APPS AND 3RD PARTY APPS
EveryHTML5, Javascript, CSS based Apps for Firefox OS
UsingWebAPIs and Web Activities

APP DEVELOPMENT
JustOpen Web Apps

3 DIFFERENT APP TYPES
1. hosted
2. privileged
3. certified
Definition in webapp.manifest

THE WEB APP MANIFEST
JSONConfiguration file
Includes: permissions, author, description, type, icons, locale
etc.

EXAMPLE (MINIMAL)
{
"name":"MyAwesomeApp",
"description":"Myelevatorpitchgoeshere",
"launch_path":"/",
"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
Secured bythree layer securitymodel

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, Ambientlightsensor,
Proximitysensor, Notification.

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

WEB APIS: CERTIFIED APPS
WebTelephony, WebSMS, Idle API, Settings API, Power
ManagementAPI, Mobile Connection API, WiFiInformation
API, WebBluetooth, Permissions API, Network Stats API,
CameraAPI, Time/Clock API, Attention screen, Voicemail.

Example: BatteryAPI
varbattery=navigator.battery,
info={
charging:battery.charging,
chargingTime:parseInt(battery.chargingTime/60,10),
dischargingTime:parseInt(battery.dischargingTime/60,10),
level:Math.round(battery.level*100)
};

EXAMPLE: GEOLOCATION API*
navigator.geolocation.getCurrentPosition(handleLocation);
functionhandleLocation(position){
varlatitude=position.coords.latitude;
varlongitude=position.coords.longitude;
/*
coords.altitude
coords.accuracy
coords.altitudeAccuracy
coords.heading
coords.speed
timestamp
*/
}
*Ok,ok,notreallyanewone!

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

EXAMPLE: NOTIFICATION API
Needs permissions granted byusers!(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
Getinformation aboutcurrentconnection
varconnection=window.navigator.mozConnection,
data={
online:connection.bandwidth,
metered:connection.metered
}

EXAMPLE: AMBIENTLIGHT
GetcurrentLux of ambientlight
varresElement=document.querySelector("#results");
window.ondevicelight=function(event){
//Readouttheluxvalue
varlux=event.value;
};

EXAMPLE: CONTACTS API
Read/Write/Delete Contacts -Permission required!
"permissions":{
"contacts":{
"description":"ContactspermissionsisrequiredtowritecontactfromGoogletoyo
"access":"readwrite"}
}
}
varcontactData={
givenName:["John"],
familyName:["Doe"]
};
varperson=newmozContact(contactData);//FirefoxOS1.3takesaparameter
//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 atMDN

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

EXAMPLE: DIAL A NUMBER
vargetphoto=newMozActivity({
name:"pick",
data:{
type:["image/png",
"image/jpg",
"image/jpeg"]
}
});
getphoto.onsuccess=function(){
varimg=document.createElement("img");
if(this.result.blob.type.indexOf("image")!=-1){
img.src=/slideshow/firefox-os-a-web-developers-dream-muxcamp-2014/36804306/window.URL.createObjectURL(this.result.blob);
}
};
getphoto.onerror=function(){//error
};

TESTING
Simulator
Browser -It's aWeb App!

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

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

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
Hostthe App on your web space
Provide installation usingWebAPI

PRIVILEGED APP
Distribute viaFirefox OS Marketplace

THANK YOU!
Carsten Sandtner
@casarock

�ݺ�ߣ

Firefox OS - A (web) developers dream - muxCamp 2014

More Related Content

Firefox OS - A (web) developers dream - muxCamp 2014