Your SlideShare is downloading. ×
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
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
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
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
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
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
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

2,935

Published on

Published in: Technology
0 Comments
14 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,935
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
59
Comments
0
Likes
14
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×