HTML for the Mobile Web, Firefox OS
1 like798 views
The document discusses the development of mobile applications using HTML5, CSS3, and JavaScript on the Firefox OS, highlighting its open-source nature and availability in over 24 countries. It details the APIs available for app development, including regular, privileged, and certified APIs, as well as web activities for seamless integration. The document also provides resources and tools for developers, including the Firefox OS simulator and various developer networks.
![Web Activity Received Handler
"activities": {
"pick": {
"filters": {
"type": ["image/jpeg", "image/png"]
},
"disposition": "inline",
"returnValue": true,
"href": "/index.html#pick"
}
}](https://image.slidesharecdn.com/htmlforthemobilewebfirefoxos-allthingsopen-2014-10-22-141024093941-conversion-gate01-141114095551-conversion-gate02/85/HTML-for-the-Mobile-Web-Firefox-OS-40-320.jpg)
HTML for the Mobile Web, Firefox OS
- 1. HTML for the Mobile Web All Things Open Firefox OS 2014-10-22 Frédéric Harper Sr. Technical Evangelist @ Mozilla @fharper | outofcomfortzone.net CreativeCommons:https://flic.kr/p/5HzQsy
- 6. 38 billion devices connected in 2020 ABI Research - 2013-05-09 - http://j.mp/38billion
- 11. Built with the Web Using HTML5, CSS3 and JavaScript with a number of APIs to build apps.
- 12. It’s open source
- 13. Some facts • Available in more than 24 countries • Primarly aimed at emerging & low end markets
- 14. Some of the devices
- 20. A Firefox OS app? § Creating a hosted or packaged app § Using § Vanilla HTML5 § Librairies… § Regular API § Privileged API § Certified API
- 21. HTML5 + manifest (JSON) = Firefox OS app { "version": “42", "name": ”My amazing app", "launch_path": "/index.html", "description": ”My super amazing app do super amazing things", "icons": { "16": "/images/logo16.png”,}, "developer": { "name": ”Frédéric Harper", "url": "http://outofcomfortzone.net", }, "default_locale": "en", "permissions": { "geolocation": { "description": ”Get the long/lat of the user" } } }
- 22. DEMO Firefox OS + App Manager + Emberjs todomvc
- 23. Web APIs
- 24. Web APIs – Regular • Alarm API • Ambient light sensor • Archive API • Battery Status API • Geolocation API • IndexedDB • Network Information API • Notifications API • Open WebApps • Proximity sensor • Push API • Screen Orientation • Vibration API • Web Activities • WebFM API • WebPayment packaged hosted
- 26. 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); });
- 27. DEMO Boilerplate – Ambient Light Sensor
- 28. Battery Status
- 29. 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); }
- 30. Web APIs – Privileged • Browser API • Contacts API • Device Storage API • systemXHR • TCP Socket API packaged
- 31. Browser
- 32. 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=‘yoursite.com' id='browser'></iframe>
- 33. Browser addEventListener('mozbrowserloadstart', function(e) { //Do stuff }); /* Possible values: "mozbrowserloadstart“ "mozbrowserloadend" "mozbrowserlocationchange“ "mozbrowsertitlechange" "mozbrowsericonchange“ "mozbrowsersecuritychange" "mozbrowsercontextmenu“ "mozbrowsererror" "mozbrowserkeyevent“ "mozbrowsershowmodalprompt" "mozbrowseropenwindow“ "mozbrowserclose" */
- 34. Web APIs – Certified • Camera API • Idle API • Mobile Connection API • Network Stats API • Permissions API • Power Management API • Settings API • Time/Clock API • Voicemail • WebBluetooth • WebSMS • WebTelephony • WiFi Information API OS/OEM
- 35. Web Activities
- 36. Web Activities • browse • configure • costcontrol • dial • Open • new • mail • websms/sms • webcontacts/contact • pick • record • save-bookmark • share • view • update packaged hosted
- 37. Pick var activity = new MozActivity({ name: "pick", //Provide the data required //by the filter of the activity data: { type: "image/jpeg" } });
- 38. Pick activity.onsuccess = function () { var img = document.createElement("img"); if (this.result.blob.type.indexOf("image") != -1) { img.src = window.URL.createObjectURL(this.result.blob); } }; activity.onerror = function () { //error };
- 39. Dial var call = new MozActivity({ name: "dial", data: { number: "+46777888999" } });
- 40. Web Activity Received Handler "activities": { "pick": { "filters": { "type": ["image/jpeg", "image/png"] }, "disposition": "inline", "returnValue": true, "href": "/index.html#pick" } }
- 41. Don’t forget to handle it! navigator.mozSetMessageHandler('activity', function(activityRequest) { var option = activityRequest.source; if (activityRequest.source.name === "pick") { // Do something to handle the activity if (picture) { activityRequest.postResult(picture); } else { activityRequest.postError("Unable to provide a picture"); } } });
- 44. How to start
- 47. Phonegap & Cordova & <3
- 49. Simplicity…
- 50. Firefox Web Developer Tools
- 53. Creative Commons: http://j.mp/1gIdcPF To infinity, and beyond…
- 54. More Web APIs & features • Calendar API • FileHandle API Sync API • Keyboard/IME API WebRTC • HTTP-cache API • Peer to Peer API • Spellcheck API LogAPI • Resource lock API • UDP Datagram Socket API • WebNFC • WebUSB
- 55. Next time you’ll build a mobile app Think about HTML5 & Firefox OS
- 56. Resources Firefox OS Simulator http://j.mp/fxosSimulator Firefox OS App Manager http://j.mp/fxosAppManager Mozilla Developer Network https://developer.mozilla.org StackOverflow forum http://j.mp/fxosStackOverflow Firefox OS Boilerplate http://j.mp/fxosBoilerplate