• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
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

on

  • 2,899 views

 

Statistics

Views

Total Views
2,899
Views on SlideShare
2,883
Embed Views
16

Actions

Likes
14
Downloads
52
Comments
0

3 Embeds 16

http://lanyrd.com 9
https://twitter.com 5
http://samapta.id1945.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

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 Presentation Transcript

  • 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-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"}
  • 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 Web AppDevice-critical applications
  • 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"},"alarms": {"description": "Required to schedule notifications"}}
  • PERMISSIONS
  • 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
  • BATTERY STATUSAPI
  • 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);}
  • 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""landscape-secondary""portrait-primary""portrait-secondary"*/
  • VIBRATION API
  • // 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);
  • 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.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);});
  • 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 values for "bright" begin above 10000console.log(event.value);});
  • 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.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]);
  • 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;}};
  • CONTACTS API
  • 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")};
  • WebTelephonyWebSMSIdle APISettings APIPower Management APIMobile Connection APIWiFi Information APIWebBluetoothPermissions APINetwork Stats APICamera APITime/Clock APIAttention screenVoicemailCERTIFIED APIS
  • WEBTELEPHONY
  • // 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);
  • // Place a callvar cal = tel.dial(“123456789”);
  • // 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);});};
  • 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 () {console.log("Showing the image!");};activity.onerror = function () {console.log("Cant view the image!");};
  • var register = navigator.mozRegisterActivityHandler({name: "view",disposition: "inline",filters: {type: "image/png"}});register.onerror = function () {console.log("Failed to register activity");}
  • 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});
  • Future APIs
  • Resource lock APIUDP Datagram Socket APIPeer to Peer APIWebNFCWebUSBHTTP-cache APICalendar APISpellcheck APILogAPIKeyboard/IME APIWebRTCFileHandle APISync API
  • Web Apps from Mozilla
  • DialerContactsSettingsSMSWeb browserGalleryVideo PlayerMusic PlayerE-mail (POP, IMAP)CalendarAlarm ClockCameraNotesFirst Run ExperienceNotificationsHome ScreenMozilla MarketplaceSystem UpdaterLocalization Support
  • 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 || 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}
  • 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();}
  • Getting help
  • https://lists.mozilla.org/listinfo/dev-webappsirc://irc.mozilla.org/#openwebapps
  • Trying things out
  • Robert Nymanrobertnyman.comrobert@mozilla.comMozilla@robertnyman