1. Bringing the Open Web & APIs to
mobile devices with Firefox OS

4. Using HTML5, CSS and
JavaScript together with a
number of APIs to build
apps and customize the UI.
Firefox OS

5. Open Web Apps

7. Develop Web App using
HTML5, CSS, & Javascript1.
Create an app manifest file2.
Publish/install the app3.

8. {
"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 di
fotoricettore!",
"developer": {
"url": "http://it.mozillalabs.com/"
}
}
},
"default_locale": "en"
}

9. MANIFEST CHECKER
http://appmanifest.org/

10. Serve with Content-type/MIME type:
application/x-web-app-manifest+json

11. https://marketplace.firefox.com/

12. https://marketplace.firefox.com/developers/

13. Packaged vs. Hosted Apps

14. https://developer.mozilla.org/docs/Apps/
For_Web_developers

16. WebAPIs

17. https://wiki.mozilla.org/WebAPI

18. Security Levels

19. Web Content
Regular web content
Installed Web App
A regular web app
Privileged Web App
More access, more responsibility
Certified Web App
Device-critical applications

20. https://wiki.mozilla.org/
WebAPI#Planned_for_initial_release_of_B2G_.
28aka_Basecamp.29

21. "permissions": {
"contacts": {
"description": "Required for autocompletion in the share screen",
"access": "readcreate"
},
"alarms": {
"description": "Required to schedule notifications"
}
}

22. PERMISSIONS

24. Vibration API (W3C)
Screen Orientation
Geolocation API
Mouse Lock API (W3C)
Open WebApps
Network Information API (W3C)
Battery Status API (W3C)
Alarm API
Web Activities
Push Notifications API
WebFM API
WebPayment
IndexedDB (W3C)
Ambient light sensor
Proximity sensor
Notification
REGULAR APIS

25. BATTERY STATUS
API

26. 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 events
battery.addEventListener("levelchange", setStatus, false);
battery.addEventListener("chargingchange", setStatus, false);
battery.addEventListener("chargingtimechange", setStatus, false);
battery.addEventListener("dischargingtimechange", setStatus, false);
}

27. NOTIFICATION

28. var notification = navigator.mozNotification;
notification.createNotification(
"See this",
"This is a notification",
iconURL
);

29. SCREEN
ORIENTATION API

30. // Portrait mode:
screen.mozLockOrientation("portrait");
/*
Possible values:
"landscape"
"portrait"
"landscape-primary"
"landscape-secondary"
"portrait-primary"
"portrait-secondary"
*/

31. VIBRATION API

32. // Vibrate for one 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);

33. WEB PAYMENTS

34. var pay = navigator.mozPay(paymentToken);
pay.onsuccess = function (event) {
// Weee! Money!
};

35. NETWORK
INFORMATION API

36. var connection = window.navigator.mozConnection,
online = connection.bandwidth > 0,
metered = connection.metered;

37. DEVICEPROXIMITY

38. 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);
});

39. AMBIENT LIGHT
EVENTS

40. window.addEventListener("devicelight", function (event) {
// The level of the ambient light in lux
console.log(event.value);
});

41. window.addEventListener("devicelight", function (event) {
// The lux values for "dim" typically begin below 50,
// and the values for "bright" begin above 10000
console.log(event.value);
});

42. Device Storage API
Browser API
TCP Socket API
Contacts API
systemXHR
PRIVILEGED APIS

43. DEVICE STORAGE
API

44. var deviceStorage = navigator.getDeviceStorage("videos");

45. // "external", "shared", or "default".
deviceStorage.type;
// Add a file - returns DOMRequest with file name
deviceStorage.add(blob);
// Same as .add, with provided name
deviceStorage.addNamed(blob, name);
// Returns DOMRequest/non-editable File object
deviceStorage.get(name);
// Returns editable FileHandle object
deviceStorage.getEditable(name);
// Returns DOMRequest with success or failure
deviceStorage.delete(name);
// Enumerates files
deviceStorage.enumerate([directory]);
// Enumerates files as FileHandles
deviceStorage.enumerateEditable([directory]);

46. 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 isn't a video, skip it
if (file.type.substring(0, 6) !== "video/") {
cursor.continue();
return;
}
// If it isn't playable, skip it
var testplayer = document.createElement("video");
if (!testplayer.canPlayType(file.type)) {
cursor.continue();
return;
}
};

47. CONTACTS API

48. 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")
};

49. WebTelephony
WebSMS
Idle API
Settings API
Power Management API
Mobile Connection API
WiFi Information API
WebBluetooth
Permissions API
Network Stats API
Camera API
Time/Clock API
Attention screen
Voicemail
CERTIFIED APIS

50. WEBTELEPHONY

51. // 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);

52. // Place a call
var cal = tel.dial(“123456789”);

53. // Receiving a call
tel.onincoming = function (event) {
var incomingCall = event.call;
// Get the number of the incoming call
console.log(incomingCall.number);
// Answer the call
incomingCall.answer();
};
// 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);
});
};

54. WEBSMS

55. // SMS object
var sms = navigator.mozSMS;
// Send a message
sms.send("123456789", "Hello world!");

56. // Recieve a message
sms.onreceived = function (event) {
// Read message
console.log(event.message);
};

57. WEB ACTIVITIES

59. {
"activities": {
"share": {
"filters": {
"type": ["image/png", "image/gif"]
}
"href": "sharing.html",
"disposition": "window"
}
}
}

60. var activity = new MozActivity({
name: "view",
data: {
type: "image/png",
url: ...
}
});
activity.onsuccess = function () {
console.log("Showing the image!");
};
activity.onerror = function () {
console.log("Can't view the image!");
};

61. var register = navigator.mozRegisterActivityHandler({
name: "view",
disposition: "inline",
filters: {
type: "image/png"
}
});
register.onerror = function () {
console.log("Failed to register activity");
}

62. 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
});

64. Future APIs

66. Resource lock API
UDP Datagram Socket API
Peer to Peer API
WebNFC
WebUSB
HTTP-cache API
Calendar API
Spellcheck API
LogAPI
Keyboard/IME API
WebRTC
FileHandle API
Sync API

67. Web Apps from Mozilla

69. Dialer
Contacts
Settings
SMS
Web browser
Gallery
Video Player
Music Player
E-mail (POP, IMAP)
Calendar
Alarm Clock
Camera
Notes
First Run Experience
Notifications
Home Screen
Mozilla Marketplace
System Updater
Localization Support

71. https://hacks.mozilla.org/2013/01/hacking-gaia-for-firefox-
os-part-1/

72. Get started

73. https://addons.mozilla.org/firefox/addon/firefox-os-
simulator/

74. FIREFOX OS
BOILERPLATE APP
https://github.com/robnyman/Firefox-OS-Boilerplate-App

75. WebRTC

78. 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 functions
if (navigator.getUserMedia) {
navigator.getUserMedia({video: true}, successCallback, errorCallback);
} else {
console.log('Native web camera streaming (getUserMedia) not supported
in this browser.');
// Display a friendly "sorry" message to the user
}

79. function successCallback(stream) {
// Set the source of the video element with the stream from the camera
if (video.mozSrcObject !== undefined) {
video.mozSrcObject = stream;
} else {
video.src = (window.URL && window.URL.createObjectURL(stream)) ||
stream;
}
video.play();
}

80. Getting help

82. https://lists.mozilla.org/listinfo/dev-webapps
irc://irc.mozilla.org/
#openwebapps

83. Trying things out

87. Robert Nyman
robertnyman.com
robert@mozilla.com
Mozilla
@robertnyman