Bringing the Open Web & APIs tomobile devices with Firefox OS
Using HTML5, CSS andJavaScript together with anumber of APIs to buildapps and customize the UI.Firefox OS
Open Web Apps
Develop Web App usingHTML5, CSS, & Javascript1.Create an app manifest file2.Publish/install the app3.
{"version": "1.0","name": "MozillaBall","description": "Exciting Open Web development action!","icons": {"16": "/img/icon-...
MANIFEST CHECKERhttp://appmanifest.org/
Serve with Content-type/MIME type:application/x-web-app-manifest+json
https://marketplace.firefox.com/
https://marketplace.firefox.com/developers/
Packaged vs. Hosted Apps
https://developer.mozilla.org/docs/Apps/For_Web_developers
WebAPIs
https://wiki.mozilla.org/WebAPI
Security Levels
Web ContentRegular web contentInstalled Web AppA regular web appPrivileged Web AppMore access, more responsibilityCertified...
https://wiki.mozilla.org/WebAPI#Planned_for_initial_release_of_B2G_.28aka_Basecamp.29
"permissions": {"contacts": {"description": "Required for autocompletion in the share screen","access": "readcreate"},"ala...
PERMISSIONS
Vibration API (W3C)Screen OrientationGeolocation APIMouse Lock API (W3C)Open WebAppsNetwork Information API (W3C)Battery S...
BATTERY STATUSAPI
var battery = navigator.battery;if (battery) {var batteryLevel = Math.round(battery.level * 100) + "%",charging = (battery...
NOTIFICATION
var notification = navigator.mozNotification;notification.createNotification("See this","This is a notification",iconURL);
SCREENORIENTATION API
// Portrait mode:screen.mozLockOrientation("portrait");/*Possible values:"landscape""portrait""landscape-primary""landscap...
VIBRATION API
// Vibrate for one secondnavigator.vibrate(1000);// Vibration pattern [vibrationTime, pause,…]navigator.vibrate([200, 100,...
WEB PAYMENTS
var pay = navigator.mozPay(paymentToken);pay.onsuccess = function (event) {// Weee! Money!};
NETWORKINFORMATION API
var connection = window.navigator.mozConnection,online = connection.bandwidth > 0,metered = connection.metered;
DEVICEPROXIMITY
window.addEventListener("deviceproximity", function (event) {// Current device proximity, in centimetersconsole.log(event....
AMBIENT LIGHTEVENTS
window.addEventListener("devicelight", function (event) {// The level of the ambient light in luxconsole.log(event.value);...
window.addEventListener("devicelight", function (event) {// The lux values for "dim" typically begin below 50,// and the v...
Device Storage APIBrowser APITCP Socket APIContacts APIsystemXHRPRIVILEGED APIS
DEVICE STORAGEAPI
var deviceStorage = navigator.getDeviceStorage("videos");
// "external", "shared", or "default".deviceStorage.type;// Add a file - returns DOMRequest with file namedeviceStorage.ad...
var storage = navigator.getDeviceStorage("videos"),cursor = storage.enumerate();cursor.onerror = function() {console.error...
CONTACTS API
var contact = new mozContact();contact.init({name: "Tom"});var request = navigator.mozContacts.save(contact);request.onsuc...
WebTelephonyWebSMSIdle APISettings APIPower Management APIMobile Connection APIWiFi Information APIWebBluetoothPermissions...
WEBTELEPHONY
// Telephony objectvar tel = navigator.mozTelephony;// Check if the phone is muted (read/write property)console.log(tel.mu...
// Place a callvar cal = tel.dial(“123456789”);
// Receiving a calltel.onincoming = function (event) {var incomingCall = event.call;// Get the number of the incoming call...
WEBSMS
// SMS objectvar sms = navigator.mozSMS;// Send a messagesms.send("123456789", "Hello world!");
// Recieve a messagesms.onreceived = function (event) {// Read messageconsole.log(event.message);};
WEB ACTIVITIES
{"activities": {"share": {"filters": {"type": ["image/png", "image/gif"]}"href": "sharing.html","disposition": "window"}}}
var activity = new MozActivity({name: "view",data: {type: "image/png",url: ...}});activity.onsuccess = function () {consol...
var register = navigator.mozRegisterActivityHandler({name: "view",disposition: "inline",filters: {type: "image/png"}});reg...
navigator.mozSetMessageHandler("activity", function (a) {var img = getImageObject();img.src = a.source.url;// Call a.postR...
Future APIs
Resource lock APIUDP Datagram Socket APIPeer to Peer APIWebNFCWebUSBHTTP-cache APICalendar APISpellcheck APILogAPIKeyboard...
Web Apps from Mozilla
DialerContactsSettingsSMSWeb browserGalleryVideo PlayerMusic PlayerE-mail (POP, IMAP)CalendarAlarm ClockCameraNotesFirst R...
https://hacks.mozilla.org/2013/01/hacking-gaia-for-firefox-os-part-1/
Get started
https://addons.mozilla.org/firefox/addon/firefox-os-simulator/
FIREFOX OSBOILERPLATE APPhttps://github.com/robnyman/Firefox-OS-Boilerplate-App
WebRTC
var video = document.querySelector(video);navigator.getUserMedia = navigator.getUserMedia ||navigator.webkitGetUserMedia |...
function successCallback(stream) {// Set the source of the video element with the stream from the cameraif (video.mozSrcOb...
Getting help
https://lists.mozilla.org/listinfo/dev-webappsirc://irc.mozilla.org/#openwebapps
Trying things out
Robert Nymanrobertnyman.comrobert@mozilla.comMozilla@robertnyman
Bringing the Open Web & APIs to 
mobile devices with Firefox OS - Geek Meet
Bringing the Open Web & APIs to 
mobile devices with Firefox OS - Geek Meet
Bringing the Open Web & APIs to 
mobile devices with Firefox OS - Geek Meet
Bringing the Open Web & APIs to 
mobile devices with Firefox OS - Geek Meet
Bringing the Open Web & APIs to 
mobile devices with Firefox OS - Geek Meet
Bringing the Open Web & APIs to 
mobile devices with Firefox OS - Geek Meet
Bringing the Open Web & APIs to 
mobile devices with Firefox OS - Geek Meet
Bringing the Open Web & APIs to 
mobile devices with Firefox OS - Geek Meet
Bringing the Open Web & APIs to 
mobile devices with Firefox OS - Geek Meet
Bringing the Open Web & APIs to 
mobile devices with Firefox OS - Geek Meet
Bringing the Open Web & APIs to 
mobile devices with Firefox OS - Geek Meet
Bringing the Open Web & APIs to 
mobile devices with Firefox OS - Geek Meet
Bringing the Open Web & APIs to 
mobile devices with Firefox OS - Geek Meet
Bringing the Open Web & APIs to 
mobile devices with Firefox OS - Geek Meet
Bringing the Open Web & APIs to 
mobile devices with Firefox OS - Geek Meet
Bringing the Open Web & APIs to 
mobile devices with Firefox OS - Geek Meet
Upcoming SlideShare
Loading in …5
×

Bringing the Open Web & APIs to 
mobile devices with Firefox OS - Geek Meet

7,689 views
6,625 views

Published on

Published in: Technology

Bringing the Open Web & APIs to 
mobile devices with Firefox OS - Geek Meet

  1. Bringing the Open Web & APIs tomobile devices with Firefox OS
  2. Using HTML5, CSS andJavaScript together with anumber of APIs to buildapps and customize the UI.Firefox OS
  3. Open Web Apps
  4. Develop Web App usingHTML5, CSS, & Javascript1.Create an app manifest file2.Publish/install the app3.
  5. {"version": "1.0","name": "MozillaBall","description": "Exciting Open Web development action!","icons": {"16": "/img/icon-16.png","48": "/img/icon-48.png","128": "/img/icon-128.png"},"developer": {"name": "Mozilla Labs","url": "http://mozillalabs.com"},"installs_allowed_from": ["*"],"appcache_path": "/cache.manifest","locales": {"es": {"description": "¡Acción abierta emocionante del desarrollo del Web!","developer": {"url": "http://es.mozillalabs.com/"}},"it": {"description": "Azione aperta emozionante di sviluppo difotoricettore!","developer": {"url": "http://it.mozillalabs.com/"}}},"default_locale": "en"}
  6. MANIFEST CHECKERhttp://appmanifest.org/
  7. Serve with Content-type/MIME type:application/x-web-app-manifest+json
  8. https://marketplace.firefox.com/
  9. https://marketplace.firefox.com/developers/
  10. Packaged vs. Hosted Apps
  11. https://developer.mozilla.org/docs/Apps/For_Web_developers
  12. WebAPIs
  13. https://wiki.mozilla.org/WebAPI
  14. Security Levels
  15. Web ContentRegular web contentInstalled Web AppA regular web appPrivileged Web AppMore access, more responsibilityCertified Web AppDevice-critical applications
  16. https://wiki.mozilla.org/WebAPI#Planned_for_initial_release_of_B2G_.28aka_Basecamp.29
  17. "permissions": {"contacts": {"description": "Required for autocompletion in the share screen","access": "readcreate"},"alarms": {"description": "Required to schedule notifications"}}
  18. PERMISSIONS
  19. Vibration API (W3C)Screen OrientationGeolocation APIMouse Lock API (W3C)Open WebAppsNetwork Information API (W3C)Battery Status API (W3C)Alarm APIWeb ActivitiesPush Notifications APIWebFM APIWebPaymentIndexedDB (W3C)Ambient light sensorProximity sensorNotificationREGULAR APIS
  20. BATTERY STATUSAPI
  21. var battery = navigator.battery;if (battery) {var batteryLevel = Math.round(battery.level * 100) + "%",charging = (battery.charging)? "" : "not ",chargingTime = parseInt(battery.chargingTime / 60, 10,dischargingTime = parseInt(battery.dischargingTime / 60, 10);// Set eventsbattery.addEventListener("levelchange", setStatus, false);battery.addEventListener("chargingchange", setStatus, false);battery.addEventListener("chargingtimechange", setStatus, false);battery.addEventListener("dischargingtimechange", setStatus, false);}
  22. NOTIFICATION
  23. var notification = navigator.mozNotification;notification.createNotification("See this","This is a notification",iconURL);
  24. SCREENORIENTATION API
  25. // Portrait mode:screen.mozLockOrientation("portrait");/*Possible values:"landscape""portrait""landscape-primary""landscape-secondary""portrait-primary""portrait-secondary"*/
  26. VIBRATION API
  27. // Vibrate for one secondnavigator.vibrate(1000);// Vibration pattern [vibrationTime, pause,…]navigator.vibrate([200, 100, 200, 100]);// Vibrate for 5 secondsnavigator.vibrate(5000);// Turn off vibrationnavigator.vibrate(0);
  28. WEB PAYMENTS
  29. var pay = navigator.mozPay(paymentToken);pay.onsuccess = function (event) {// Weee! Money!};
  30. NETWORKINFORMATION API
  31. var connection = window.navigator.mozConnection,online = connection.bandwidth > 0,metered = connection.metered;
  32. DEVICEPROXIMITY
  33. window.addEventListener("deviceproximity", function (event) {// Current device proximity, in centimetersconsole.log(event.value);// The maximum sensing distance the sensor is// able to report, in centimetersconsole.log(event.max);// The minimum sensing distance the sensor is// able to report, in centimetersconsole.log(event.min);});
  34. AMBIENT LIGHTEVENTS
  35. window.addEventListener("devicelight", function (event) {// The level of the ambient light in luxconsole.log(event.value);});
  36. window.addEventListener("devicelight", function (event) {// The lux values for "dim" typically begin below 50,// and the values for "bright" begin above 10000console.log(event.value);});
  37. Device Storage APIBrowser APITCP Socket APIContacts APIsystemXHRPRIVILEGED APIS
  38. DEVICE STORAGEAPI
  39. var deviceStorage = navigator.getDeviceStorage("videos");
  40. // "external", "shared", or "default".deviceStorage.type;// Add a file - returns DOMRequest with file namedeviceStorage.add(blob);// Same as .add, with provided namedeviceStorage.addNamed(blob, name);// Returns DOMRequest/non-editable File objectdeviceStorage.get(name);// Returns editable FileHandle objectdeviceStorage.getEditable(name);// Returns DOMRequest with success or failuredeviceStorage.delete(name);// Enumerates filesdeviceStorage.enumerate([directory]);// Enumerates files as FileHandlesdeviceStorage.enumerateEditable([directory]);
  41. var storage = navigator.getDeviceStorage("videos"),cursor = storage.enumerate();cursor.onerror = function() {console.error("Error in DeviceStorage.enumerate()", cursor.error.name);};cursor.onsuccess = function() {if (!cursor.result)return;var file = cursor.result;// If this isnt a video, skip itif (file.type.substring(0, 6) !== "video/") {cursor.continue();return;}// If it isnt playable, skip itvar testplayer = document.createElement("video");if (!testplayer.canPlayType(file.type)) {cursor.continue();return;}};
  42. CONTACTS API
  43. var contact = new mozContact();contact.init({name: "Tom"});var request = navigator.mozContacts.save(contact);request.onsuccess = function() {console.log("Success");};request.onerror = function() {console.log("Error")};
  44. WebTelephonyWebSMSIdle APISettings APIPower Management APIMobile Connection APIWiFi Information APIWebBluetoothPermissions APINetwork Stats APICamera APITime/Clock APIAttention screenVoicemailCERTIFIED APIS
  45. WEBTELEPHONY
  46. // Telephony objectvar 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);
  47. // Place a callvar cal = tel.dial(“123456789”);
  48. // Receiving a calltel.onincoming = function (event) {var incomingCall = event.call;// Get the number of the incoming callconsole.log(incomingCall.number);// Answer the callincomingCall.answer();};// Disconnect a callcall.hangUp();// Iterating over calls, and taking action depending on theirchanged statustel.oncallschanged = function (event) {tel.calls.forEach(function (call) {// Log the state of each callconsole.log(call.state);});};
  49. WEBSMS
  50. // SMS objectvar sms = navigator.mozSMS;// Send a messagesms.send("123456789", "Hello world!");
  51. // Recieve a messagesms.onreceived = function (event) {// Read messageconsole.log(event.message);};
  52. WEB ACTIVITIES
  53. {"activities": {"share": {"filters": {"type": ["image/png", "image/gif"]}"href": "sharing.html","disposition": "window"}}}
  54. var activity = new MozActivity({name: "view",data: {type: "image/png",url: ...}});activity.onsuccess = function () {console.log("Showing the image!");};activity.onerror = function () {console.log("Cant view the image!");};
  55. var register = navigator.mozRegisterActivityHandler({name: "view",disposition: "inline",filters: {type: "image/png"}});register.onerror = function () {console.log("Failed to register activity");}
  56. navigator.mozSetMessageHandler("activity", function (a) {var img = getImageObject();img.src = a.source.url;// Call a.postResult() or a.postError() if// the activity should return a value});
  57. Future APIs
  58. Resource lock APIUDP Datagram Socket APIPeer to Peer APIWebNFCWebUSBHTTP-cache APICalendar APISpellcheck APILogAPIKeyboard/IME APIWebRTCFileHandle APISync API
  59. Web Apps from Mozilla
  60. DialerContactsSettingsSMSWeb browserGalleryVideo PlayerMusic PlayerE-mail (POP, IMAP)CalendarAlarm ClockCameraNotesFirst Run ExperienceNotificationsHome ScreenMozilla MarketplaceSystem UpdaterLocalization Support
  61. https://hacks.mozilla.org/2013/01/hacking-gaia-for-firefox-os-part-1/
  62. Get started
  63. https://addons.mozilla.org/firefox/addon/firefox-os-simulator/
  64. FIREFOX OSBOILERPLATE APPhttps://github.com/robnyman/Firefox-OS-Boilerplate-App
  65. WebRTC
  66. var video = document.querySelector(video);navigator.getUserMedia = navigator.getUserMedia ||navigator.webkitGetUserMedia || navigator.mozGetUserMedia ||navigator.msGetUserMedia;window.URL = window.URL || window.webkitURL || window.mozURL ||window.msURL;// Call the getUserMedia method with our callback functionsif (navigator.getUserMedia) {navigator.getUserMedia({video: true}, successCallback, errorCallback);} else {console.log(Native web camera streaming (getUserMedia) not supportedin this browser.);// Display a friendly "sorry" message to the user}
  67. function successCallback(stream) {// Set the source of the video element with the stream from the cameraif (video.mozSrcObject !== undefined) {video.mozSrcObject = stream;} else {video.src = (window.URL && window.URL.createObjectURL(stream)) ||stream;}video.play();}
  68. Getting help
  69. https://lists.mozilla.org/listinfo/dev-webappsirc://irc.mozilla.org/#openwebapps
  70. Trying things out
  71. Robert Nymanrobertnyman.comrobert@mozilla.comMozilla@robertnyman

×