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

5. @robertnyman

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

8. Open Web Apps

9. https://developer.mozilla.org/docs/Apps/Getting_Started

11. Steps to Take

12. Develop Web App using
1. HTML5, CSS, & Javascript
2. Create an app manifest file
3. Publish/install the app

14. 1.
Develop Web App using
HTML5, CSS & JavaScript

15. Reuse any existing web site/app or develop from scratch with open
web standards.
Utilize HTML5 features such as localStorage, offline manifest,
IndexedDB and access Web APIs for more options.
Responsive web design for adapting to varying resolutions and
screen orientation.

16. 2.
Create an app manifest file

17. Create a file with a .webapp extension

18. {
"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"
}

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

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

21. Apache - in mime.types:
application/x-web-app-manifest+json webapp
Apache - in .htaccess:
AddType application/x-web-app-manifest+json webapp
NGinx - in mime.types:
types {
text/html html htm shtml;
text/css css;
text/xml xml;
application/x-web-app-manifest+json webapp;
}

22. IIS:
In IIS Manager, right-click the local
computer, and click Properties.
Click the MIME Types button.
Click New.
In the Extension box, type the file name
extension.
In the MIME type box, type a description
that exactly matches the file type defined
on the computer.
Click OK.

23. curl -I http://mozillalabs.com/manifest.webapp

24. 3.
Publish/install the app

25. Firefox Marketplace

26. https://marketplace.firefox.com/

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

28. Installing/hosting the app

29. var request = navigator.mozApps.install(
"http://mozillalabs.com/MozillaBall.webapp",
{
user_id: "some_user"
}
);
request.onsuccess = function() {
// Success! Notification, launch page etc
}
request.onerror = function() {
// Failed. this.error.name has details
}

30. Packaged vs. Hosted Apps

31. A packaged app is an Open Web App that has all of its resources
(HTML, CSS, JavaScript, app manifest, and so on) contained in a zip
file, instead of having its resources on a Web server.
A packaged app is simply a zip file with the app manifest in its root
directory. The manifest must be named manifest.webapp.

32. Can be privileged apps with more API access than hosted apps
Resources are accessed from the zip file, which is stored on the device where the
app is installed)
Enforce a specific Content Security Policy for all application content
Can embed remote content in iframes, but that content will not have access to
privileged APIs nor will it have the default CSP applied to it

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

34. WebAPIs

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

36. Security Levels

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

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

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

40. PERMISSIONS

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

43. BATTERY STATUS
API

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

45. NOTIFICATION

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

47. SCREEN
ORIENTATION API

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

49. VIBRATION API

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

51. WEB PAYMENTS

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

53. NETWORK
INFORMATION API

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

55. DEVICEPROXIMITY

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

57. AMBIENT LIGHT
EVENTS

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

59. window.addEventListener("lightlevel", function (event) {
// Possible values: "normal", "bright", "dim"
console.log(event.value);
});

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

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

62. DEVICE STORAGE
API

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

64. // "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]);

65. 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;
}
};

66. CONTACTS API

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

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

69. WEBTELEPHONY

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

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

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

73. WEBSMS

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

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

76. WEB ACTIVITIES

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

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

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

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

83. Future APIs

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

86. Web Apps from Mozilla

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

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

91. Get started

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

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

94. WebRTC

97. 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
}

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

99. Getting help

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

102. Trying things out

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