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

of 67/67
FIREFOX OS A (MOBILE) WEB DEVELOPERS DREAM Carsten Sandtner ( ) 2014 - DWX 2014 @casarock
  • date post

  • Category


  • view

  • download


Embed Size (px)


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

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

  • 1. FIREFOX OS A (MOBILE) WEB DEVELOPERS DREAM Carsten Sandtner ( ) 2014 - DWX [email protected]

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? Theres no SDK that you need! 4. WEBOS 5. CHROME OS 6. IN DETAIL 7. ARCHITECTURE 8. GONK Low level OS of Firefox OS. Linux - based on Android Open Source Project 9. GECKO 10. GAIA UI level of Firefox OS Only interface to the underlying operating system and hardware 11. WEB APIS AND WEB ACTIVITIES 12. APPS AND 3RD PARTY APPS Every HTML5, Javascript, CSS based Apps for Firefox OS Using WebAPIs and Web Activities 13. APP DEVELOPMENT Open Web Apps 14. 3 DIFFERENT APP TYPES 15. HOSTED APPS 16. PRIVILEGED APPS 17. CERTIFIED APPS 18. THE WEB APP MANIFEST 19. 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" } 20. EXAMPLE PRIVILEGED APP { "name":"MyAwesomePrivilegedApp", .... "type":"privileged", "fullscreen":"true", "permissions":{ "contacts":{ "description":"Requiredforautocompletioninthesharescreen", "access":"readcreate" } }, "default_locale":"en", ... } 21. WEB APIS Open API specifications to access the hardware of devices Created with and submitted to standards bodies and other browser makers 22. 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. 23. WEB APIS: PRIVILEGED APPS Device Storage API, Browser API, TCP Socket API, Contacts API, systemXHR. 24. 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. 25. 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) }; 26. 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(); 27. 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! 28. EXAMPLE: VIBRATION API varpattern=[200,100,200,200,100], goodVibration=navigator.vibrate(pattern); 29. 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!"); } 30. 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; 31. EXAMPLE: AMBIENTLIGHT Get current Lux of ambient light window.ondevicelight=function(event){ //Readouttheluxvalue varlux=event.value; }; 32. EXAMPLE: CONTACTS API Read/Write/Delete Contacts - Permission required! "permissions":{ "contacts":{ "description":"ContactspermissionsisrequiredtowritecontactfromGoogleto "access":"readwrite"} } } varcontactData={ givenName:["John"], familyName:["Doe"] }; varperson=newmozContact(contactData); //savethenewcontact; saving.onsuccess=function(){ console.log('newcontactsaved'); }; saving.onerror=function(err){ console.error(err); }; 33. 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:"; //checkifthereisotherresults if(!this.done){ //Thenwemovetothenextresult,whichcallthecursor //successwiththenextfileasresult. this.continue(); } } 34. AND THERE ARE MANY MORE! APIs at MDN 35. WEB ACTIVITIES 36. WEB ACTIVITIES configure, costcontrol, dial, open, pick, record, save- bookmark, share, view, update. new: f.e type: websms/sms or webcontacts/contact 37. EXAMPLE: DIAL A NUMBER varcall=newMozActivity({ name:"dial", data:{ number:"+49123456789" } }); Invokes "native" Dialer app 38. EXAMPLE: OPEN AN URL varopenURL=newMozActivity({ name:"view", data:{ type:"url",//Possiblytext/htmlinfutureversions url:"" } }); Invokes "native" browser 39. EXAMPLE: SEND A SMS varsms=newMozActivity({ name:"new", data:{ type:"websms/sms", number:"+49987654321" } }); Invokes "native" messaging app 40. EXAMPLE: PICK AN IMAGE vargetphoto=newMozActivity({ name:"pick", data:{ type:["image/png", "image/jpg", "image/jpeg"] } }); 41. RESULT 42. 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 }; 43. REGISTER AN APP AS ACTIVITY HANDLER { //OtherAppManifestrelatedstuff //Activityregistration "activities":{ "pick":{ "href":"./pick.html", "disposition":"inline", "filters":{ "type":["image/*","image/jpeg","image/png"] }, "returnValue":true } } } 44. HANDLE AN ACTIVITY navigator.mozSetMessageHandler('activity',function(activityRequest){ varoption=activityRequest.source; if("pick"){ //Dosomethingtohandletheactivity //Sendbacktheresult if(picture){ activityRequest.postResult(picture); }else{ activityRequest.postError("Unabletoprovideapicture"); } } }); 45. TOOLS&UTILS 46. TESTING Simulator Browser - It's a Web App! 47. DEVELOPMENT No SDK! Use your favorite IDE/Editor It's HTML5! WebIDE! 48. WEBIDE 49. RAPID APPLICATION DEVELOPMENT use Mozillas Appmaker 50. DEBUGGING 51. DEBUGGING - SIMULATOR Developer tools in Firefox! (NOT! Firebug) Remote Debugger! 52. DEBUGGING - REMOTE Connect your device Debug! That's all 53. UI COMPONENTS 54. UI COMPONENTS - BRICK! 55. FIREFOX OS BOILERPLATE 56. PHONEGAP AND CORDOVA 57. HOW TO DISTRIBUTE YOUR APP 58. HOSTED APP Host the App on your web space Provide installation using WebAPI 59. HOSTED APP DISTRIBUTION Check if app is already installed varrequest=navigator.mozApps.checkInstalled(manifestPath); request.onerror=function(){ console.log('Errorcheckingforinstalledapp:',; }; request.onsuccess=function(){ //Iftheappisinstalled,you'llgetamozAppobjectin`request.result`, //else`request.result`isnull console.log("Couldbeinstalled:",request.result!==null?"isinstalled":"isno }; 60. HOSTED APP DISTRIBUTION Install your app varinstallRequest=navigator.mozApps.install(manifestPath); installRequest.onsuccess=function(){ //Noerror console.log("Appinstalled"); }; installRequest.onerror=function(){ console.log('Errorinstallingtheapp:',; }; Done. Cool, eh? Works on Firefox Android, too. 61. Distribute via Firefox OS Marketplace PRIVILEGED APP 62. Validate using App-Manager PRIVILEGED APP DISTRIBUTION Upload ZIP of your app to marketplace. Wait for approval. Done. 63. THANK YOU! Carsten Sandtner @casarock Slides: