1.
Christian Heilmann (@codepo8)
Sapo Codebits, Lisbon, Portugal, April 2014
FIREFOX OS
HTML5 FOR A TRULY WORLD-WIDE-WEB

2.
I LIVE BY THE RIVER…

3.
PEOPLE ARE BUSY…

4.
BENEFITS OF HTML5
★ In-built distribution - the web
★ Simple technologies used by lots of
developers
★ Evolution of existing practices
★ Open, independent, standardised

5.
PROMISES OF HTML5

6.
LOCKOUT

7.
FIXING HTML ISSUES

8.
FIREFOX OS

9.
SOME FACTS…
★ Released in fourteen countries: Spain, Poland, Venezuela,
Colombia, Peru, Uruguay, Mexico, Brasil (more soon)
★ Released with 7 mobile operator partners, 3 hardware
partners
★ Hardware options: Alcatel One Touch Fire, ZTE Open,
Geeksphone Keon, Geeksphone Peak, LG Fireweb…
★ Aimed at emerging markets/low end market
★ Aimed to be an alternative to feature phones and
unavailable closed environments.
★ Open source - it is all on GitHub

10.
"Movistar offers the
ZTE Open for €69,
including €30 of
balance for prepaid
customers and a
4GB microSD card"

11.
ARCHITECTURE
Linux/Gonk (ADB enabled)
Gecko rendering engine
Third Party HTML5 Apps
Web APIs / Web Actitivies
GAIA

12.
- + =

13.
PREDICTABLE HTML5 SUPPORT

14.
SECURITY

15.
AVOIDING USER OVERLOAD…
http://smus.com/installable-webapps/

16.
APPLICATION MANIFEST
{
"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/"
}
}
},
"default_locale": "en"
}

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

18.
APPLICATIONS

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

20.
CROSS-PLATFORM

21.
WEB APIS

22.
WEB APIS (FOR ALL)
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

23.
BATTERY STATUS
API

24.
BATTERY STATUS API
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);
}

25.
VIBRATION API

26.
VIBRATION API
// 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);

27.
NETWORK
INFORMATION API

28.
NETWORK INFORMATION API
var connection = window.navigator.mozConnection,
online = connection.bandwidth > 0,
metered = connection.metered;

29.
PAGE VISIBILITY

30.
PAGE VISIBILITY
document.addEventListener("visibilitychange", function () {
if (document.hidden) {
console.log("App is hidden");
}
else {
console.log("App has focus");
}
});

31.
PUSH
NOTIFICATIONS

32.
WEB APIS (PRIVILEGED APPS)
Device Storage API
Browser API
TCP Socket API
Contacts API
systemXHR

33.
CONTACTS API

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

35.
CERTIFIED APPS = THE OS :)

36.
WEB
ACTIVITIES

37.
GET A PHOTO?
var getphoto = new MozActivity({
name: "pick",
data: {
type: ["image/png", "image/jpeg"], "image/jpg"]
}
});
!
getphoto.onsuccess = function () {
var img = document.createElement("img");
if (this.result.blob.type.indexOf("image") != -1) {
img.src = window.URL.createObjectURL(this.result.blob);
}
};
getphoto.onerror = function () { // error
};

38.
APP
DISTRIBUTION

39.
FIREFOX OS MARKETPLACE
https://marketplace.firefox.com/

40.
INSTALL FROM THE WEB…

41.
DYNAMIC APP WEB SEARCH

42.
DEVELOPMENT
ENVIRONMENT

43.
DEVELOPER ENVIRONMENT

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

45.
PROTOTYPING WITH JSFIDDLE
https://hacks.mozilla.org/2013/08/using-jsfiddle-to-prototype-firefox-os-apps/
1. Write your code as a JSFiddle
2. Append /webapp.manifest to your Fiddle
URL and paste this link into the Firefox OS
simulator to install the app
3. Alternatively, append /fxos.html to your
Fiddle URL to get an install page like a
typical Firefox OS hosted application

46.
BUILDING
BLOCKS?

47.
CERTIFIED APPS BUILDING BLOCKS
http://buildingfirefoxos.com/

48.
CERTIFIED APPS BUILDING BLOCKS
http://buildingfirefoxos.com/

49.
MOZILLA BRICK
http://mozilla.github.io/brick/

50.
MOZILLA BRICK
<x-flipbox>
<div>I'm the front face.</div>
<div>And I'm the back face.</div>
</x-flipbox>
!
//JavaScript
toggleButton.addEventListener("click", function() {
flipBox.toggle();
});
http://mozilla.github.io/brick/

51.
CORDOVA IMPLEMENTATION APIS
• Camera
• Contacts
• Device
• Device-motion
• Geolocation
• Orientation
• Vibration

52.
CORDOVA IMPLEMENTATION APIS
$ sudo npm install -g cordova
$ cordova create hello com.example.hello HelloWorld
$ cd hello
$ cordova platform add firefoxos
$ cordova prepare firefoxos

53.
CAMERA API
$ cordova plugin add org.apache.cordova.camera
!
//Cordova code
navigator.camera.getPicture(function (src) {
var img = document.createElement('img');
img.id = 'slide';
img.src = src;
}, function () {}, {
destinationType: 1
});

54.
WHAT’S
COOKING?

55.
MORE WEB APIS…
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

56.
APPMAKER!
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

57.
WHERE TO
GET INFO?

58.
https://marketplace.firefox.com/developers/
DEVELOPER HUB

59.
https://hacks.mozilla.org/category/firefox-os/
MOZILLA DEVELOPER BLOG

60.
http://mozilla.github.io/app-basics-videos/
FIREFOX OS VIDEO SERIES

61.
https://developer.mozilla.org/en/docs/Mozilla/Firefox_OS
FIREFOX OS WIKI

62.
TO WRAP UP…

63.
https://hacks.mozilla.org/2013/12/write-elsewhere-run-on-firefox/
!
Aquarium Plants (Android w/ hand-coded native wrapper)
Calc (iOS w/ hand-coded native wrapper)
Calcula Hipoteca (Amazon Appstore)
Captain Rogers (HTML5 Desktop)
Cartelera Panama (Appcelerator Titanium)
Fresh Food Finder (PhoneGap)
Picross (WebOS)
Reditr (Chrome Dev Store)
Speed Cube Timer (Blackberry Webworks)
Squarez (C++)
Touch 12i (Windows Phone/ HTML5)
NOTHING IS WASTED…

64.
THANKS!
CHRIS HEILMANN
@CODEPO8