Firefox OS Web APIs, taking it to the next level


Published on

A quick overview of the Firefox OS Web APIs

Published in: Technology, News & Politics
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • START Zoom ItThis presentation is about 30 minutesHi, my name is Frédéric HarperI’m a Senior Technical Evangelist at Mozilla focussing on the Open Web with Firefox OSFeel free to tweet about the presentation by adding my Twitter handle @fharper.Good or bad things, I won’t be upset!You can also go, after the presentation, to my personal blog at or for the lazy one, occz.netYou don’t have to take notes from what you see on the slides, as the slides will be made available on my site soon after the event
  • Now we’re going to take our Firefox OS to the next levelFrom what you know, you can take a HTML5 application, and create a manifest, and you are good to go: you have a Firefox OS app.Now we are going to take our application to the next level, and access features that are related directly to the phone hardwareWeb API is for me the gap we had with what people call native applicationThe goal of these API aren’t to be Mozilla proprietary APIWe are working with the W3C to make those standards, and if the standards is not the one we used, we commit to used the standardAt the end, the goal of Firefox OS, is to use Web technology, not create another proprietary APIIt’s not something you need to useI worked with developers who just created the manifest file, and didn’t add anymore featuresIt’s just something more you can use to give a more integrated, and better experience to the usersFor some app type, you wont have the choiceThis presentation will blow your brain, as it’s a quick overview of many Web APIs you can use right nowI will go furiously fast, but my presentation will be available online, and everything that is there, is in the Mozilla Developer Network documentationThere are three types of WebAPIs, or should I say three access level for Web APIsRegular, Privileged, and Certified.This tight with the type of application you’ll build: hosted or packaged
  • Let’s start to explore the regular APIsThose may be the one you’ll use much
  • When we talked about regular APIs, you can use them in packaged or hosted appThere is no security risks to use them, so no verification on our side has to be done.It’s why you can use them as hosted application.
  • Let’s start with the Ambien light APIThis API will give you the ability to get values about the ambient light
  • It’s quite simple, you need to add a listener on devicelightYour function will get call when the ambient light will changeYou’ll get a value in lux
  • Open Droid@ScreenConnect a real device to the laptopOpen Firefox OS BoilerplateClick the Ambient Light buttonShow the valuePut your hand in front of the deviceShow the new light value
  • The next one is kind of obviousIt will give you information on the battery
  • You can get the battery level by getting the value of navigator.battery.levelYou can also do this for charging time, and discharging timeAnother way is to manage event listener on the levelchange, chargingchange, and chargingtimechangeIt’s not just useful for a battery information app, but you can take advantage of it
  • Let’s use again Firefox OS Boilerplate AppOpen Droid@ScreenConnect a real device to the laptopOpen Firefox OS BoilerplateClick the battery buttonShow the information
  • So you get the point of these Web APIs.Some of them are implemented in the Firefox OS Boilerplate AppI’ll show you the link to get the code, and play with itIf you see anything missing, please push your code to the repositoryThe next API is the device lightIt’s not the same as ambient light, as this one if the light of the device itself, the screen
  • This one is simpleAdd a listener to lightlevelAnd when the phone light level will change, you’ll be able to check event.valueAnd do what you have to doThree possible values: normal, bright, and dim
  • The network information is a particular important oneIt give information on the connection of the userWhether they are on a metered connection, like their phone data planOr the bandwidth of the connectionIt’s very useful as you can decide to serve high definition or low contentPersonally, I would give the user choice as I hate when I can’t do something on my phone data plan, but you’ll have the choice
  • This piece of code will see if you have a connection openAnd if it’s a metered oneYou can also call a function when the connection change
  • One of the most useful Web API for some application, is the notification oneFor now, you can only do local notification, and I have no ETA on remote one
  • It’s quite simpleYou call navigator.mozNotificationAnd use the createNotification functionBy addind the text, a title, and an optional icon
  • Keep in mind that the Web API I just shown you, is for local notificationYou can do Remote Push Notification, but it’s a little bit more complexYou can read that artile on the hacks blog
  • Even if you can use ambient light as a proximity sensor, this is not adequateIt’s why there is the proximity sensor APIYou’ll be able to know what the hardware is capable of by getting the min, and maxBut also the actual value
  • You need to add an event listener to deviceproximityAnd get the event.value, min, and max
  • The device orientation API is an interesting oneOf course, you’ll be able to get the actual orientationBe notified when it changedBut lock a specific orientationIt could be good for a game as a example
  • If you want to lock the screen, you can do it by using screen.mozLockOrientationYou can use portrait or landscape
  • On the other side, if you want to get the orientation on the screenYou can do this by adding a listener to onmozorientationchangeIn that case, you can use landscape & portrait primaryAs landscape, and portrait secondaryI’ll let you guess which one is what
  • Let’s use again Firefox OS Boilerplate AppOpen the simulatorOpen PaintDraw something, change orientation, and show the resultShow the code in Sublime Text
  • The vibration Web API is a pretty obvious one tooYou cannot test it yet in the simulator
  • You can vibrate for a momentYou can do some patternAnd turn off the vibration after you set a longer time, or a pattern not finished
  • Let’s now check some of the privileged APIs
  • Those ones are available only if you do a packaged appIn that case, you’ll need to publish your application in the Firefox OS MarketplaceSomeone on the team will have to test your application to be sure it’s secure, and use these APIs correctlyNote that some of them may move from privileged to regular at some pointsIt won’t change anything for your app
  • The name of this API is pretty clearI remember many native applications on other platform that were just windows on HTML applicationNow since your application is HTML, the utility for this API would be to let the user navigate to an external websiteIt could be helpful if you have to made the user log in into a third party services, and approve a key for your application, as an example
  • You can add a browser iframe in your application, by adding some codeNote that the important part is the mozbrowser attribute in the iframe elementIf you also want to have a kind of full browser experience, you can add the other elements with those IDs
  • You can also add different listener for different action from the users, but also from the browser iframe
  • Another nice privileged API give you access to the contact list
  • You can get add, modify, and delete a contact to the listYou can also find, and select all contactsThis code example show you how to add a contact to the address book of the user’s phone
  • There is one last level of APIThis one is mostly for default app that comes with the OSAs it’s, for now, only for apps preinstalled on devicesBut it’s good for you to know that it’s there, and that you would be able to use it, again, with HTML5, and JavaScript
  • Since they are mostly, I would say low level for a phoneLet’s start with the WebSMS one
  • As it’s name says, it’s a way to send SMS with JavaScriptPretty simple to do so
  • The last one I’ll show you is about the phone part of the phoneI don’t know for you, but for me this is probably the part of my smartphone that I use the lessThis one is very interesting as you got access to many possibilities within JavaScript
  • You can check different status or even popup the phone app by using the moztelephony object
  • You can even do some actions when there is an incoming callBy addind an event on onincoming
  • The most powerful function, end a call can be done with the I shown on the slide beforeYou can also take action is the state changedI see some blacklist applications possibilities with this API
  • Note that for some of the Web API, you’ll need to add permission to the manifest file.For the sake of this presentation length, I didn’t add the valuesBut you can get all of them on the documentation link I added to the next slideIt’s mostly for certified or privilegied appThe user will give your application access to theseIf you don’t have the permission, and you want to use the API, it will fail
  • I hope you now have plenty of ideas on how, and what you’ll implement in your Firefox OS applicationThis was a quick overview a sample code of some of the Web APIs you can useI would point you on three resources:If there is one thing you need to remember from this talk, it’s this linkIt’s the link of the Web APIs page on the Mozilla Developer NetworkYou’ll have all the information I shown in this presentation, and even moreThe second link is a reminder on the packages, and hosted app principlesThe last, but not least: the Firefox OS boilerplate app, free on GitHub, that you can use to test some of these Web API quickly
  • If you are currently or planning to build a Firefox OS application, please let me knowI’ll also be curios to see any other HTML5 application you actually haveThere are good opportunities with the platform, and I would like to help you to publish your application to the marketplace
  • As you remember, my name is Frédéric HarperI’m Technical Evangelist focussing on Firefox OS, so please contact me if you have any questionsFeel free to follow me on Twitter or add me to LinkedInIf you want to read some amazing technical posts on Firefox, Firefox OS, Developer Tool, and the Open Web, please check our hacks blogLast, but not least, you can check my personal blog: it’s all about gnomes, and unicorns
  • Firefox OS Web APIs, taking it to the next level

    1. 1. Firefox OS Web APIs, taking it to the next level Frédéric Harper Firefox OS Technical Evangelist @ Mozilla @fharper | KrakowFirefoxOSworkshop–2013-09-12
    2. 2. Taking it to the next level  Web APIs  Regular APIs  Privileged APIs  Certified APIs
    3. 3. Regular APIs
    4. 4. Regular APIs packaged hosted
    5. 5. Regular APIs Ambient Light
    6. 6. Ambient Light Sensor window.addEventListener("devicelight", function (event) { // The level of the ambient light in lux // The lux values for "dim" typically begin below 50, // and the values for "bright" begin above 10000 console.log(event.value); });
    7. 7. DEMO Firefox OS Boilerplate App
    8. 8. Regular APIs Battery Status
    9. 9. Battery Status var battery = navigator.battery; if (battery) { var batteryLevel = Math.round(battery.level * 100) + "%", charging = (battery.charging)? “yes" : "no", chargingTime = parseInt(battery.chargingTime / 60, 10, dischargingTime = parseInt(battery.dischargingTime / 60, 10); battery.addEventListener("levelchange", setStatus, false); battery.addEventListener("chargingchange", setStatus, false); battery.addEventListener("chargingtimechange", setStatus, false); }
    10. 10. DEMO Firefox OS Boilerplate App
    11. 11. Regular APIs Device Light
    12. 12. Device Light window.addEventListener("lightlevel", function (event) { console.log(event.value); }); /* Possible values: "normal" "bright" "dim" */
    13. 13. Regular APIs Network Information
    14. 14. Network Information var connection = window.navigator.mozConnection, online = connection.bandwidth > 0, metered = connection.metered; connection.addEventListener("change", updateConnectionStatus);
    15. 15. Regular APIs Notification
    16. 16. Notification var notification = navigator.mozNotification; notification.createNotification( "See this", "This is a notification", iconURL );
    17. 17. A good article on Push Notification
    18. 18. Regular APIs Proximity Sensor
    19. 19. Proximity Sensor window.addEventListener("deviceproximity", function (event) { // Current device proximity, in centimeters console.log(event.value); // The maximum sensing distance the sensor is able to report, in centimeters console.log(event.max); // The minimum sensing distance the sensor is able to report, in centimeters console.log(event.min); });
    20. 20. Regular APIs Screen Orientation
    21. 21. Screen Orientation // Portrait mode: screen.mozLockOrientation("portrait"); /* Possible values: "landscape" "portrait" */
    22. 22. Screen Orientation window.addEventListener(“onmozorientationchange”, function (event) { var orientation = screen.mozOrientation; } /* Possible values: "landscape-primary" "landscape-secondary" "portrait-primary" "portrait-secondary" */
    23. 23. DEMO Paint app
    24. 24. Regular APIs Vibration
    25. 25. Vibration // Vibrate for 1 second navigator.vibrate(1000); // Vibration pattern [vibrationTime, pause, ...] navigator.vibrate([200, 100, 200, 100]); // Vibrate for 5 seconds navigator.vibrate(5000); // Turn off vibration navigator.vibrate(0);
    26. 26. Privileged APIs
    27. 27. Privileged APIs packaged
    28. 28. Privileged APIs Browser
    29. 29. Browser <div> <span id='location-bar'></span> <button onclick='go_button_clicked()'>Go</button> </div> <div id='load-status'></div> <div id='security-status'></div> <img id='favicon'> <div id='title'></div> <iframe mozbrowser src=‘' id='browser'></iframe>
    30. 30. Browser addEventListener('mozbrowserloadstart', function(e) { //Do stuff }); /* Possible values: "mozbrowserloadstart“ "mozbrowserloadend" "mozbrowserlocationchange“ "mozbrowsertitlechange" "mozbrowsericonchange“ "mozbrowsersecuritychange" "mozbrowsercontextmenu“ "mozbrowsererror" "mozbrowserkeyevent“ "mozbrowsershowmodalprompt" "mozbrowseropenwindow“ "mozbrowserclose" */
    31. 31. Privileged APIs Contacts
    32. 32. Contacts var contact = new mozContact(); contact.init({name: "Tom"}); var request =; request.onsuccess = function() { console.log("Success"); }; request.onerror = function() { console.log("Error") };
    33. 33. Certified APIs
    34. 34. Certified APIs WebSMS
    35. 35. WebSMS // SMS object var sms = navigator.mozSMS; // Send a message sms.send("123456789", "Hello world!"); // Receive a message sms.onreceived = function (event) { // Read message console.log(event.message); };
    36. 36. Certified APIs WebTelephony
    37. 37. WebTelephony // Telephony object var tel = navigator.mozTelephony; // Check if the phone is muted (read/write property) console.log(tel.muted); // Check if the speaker is enabled (read/write property) console.log(tel.speakerEnabled); // Place a call var cal = tel.dial(“123456789”);
    38. 38. WebTelephony // Receiving a call tel.onincoming = function (event) { var incomingCall =; // Get the number of the incoming call console.log(incomingCall.number); // Answer the call incomingCall.answer(); };
    39. 39. WebTelephony // Disconnect a call call.hangUp(); // Iterating over calls, and taking action depending on their changed status tel.oncallschanged = function (event) { tel.calls.forEach(function (call) { // Log the state of each call console.log(call.state); }); };
    40. 40. Note that for some of the Web API, you’ll need to add permission to the manifest file.
    41. 41. Resources Web API - Mozilla Developer Network Packages vs hosted apps – Firefox Marketplace Developer Hub Firefox OS Boilerplate App - GitHub
    42. 42. Frédéric Harper @fharper