SlideShare a Scribd company logo
1 of 83
Download to read offline
Firefox OS, the Open Web & WebAPIs

@robertnyman
Mozilla is a
global nonprofit dedicated
to putting you
in control of
your online
experience and
shaping the
future of the
Web for the
public good
Firefox OS

Using HTML5, CSS and
JavaScript together with a
number of APIs to build
apps and customize the UI.
Foxconn
Foxconn
Open Web Apps
HTML5 + manifest file (JSON)
{
"version": "1",
"name": "Firefox OS Boilerplate App",
"launch_path": "/index.html",
"description": "Boilerplate Firefox OS app",
"icons": {
"16": "/images/logo16.png",
"32": "/images/logo32.png",
"48": "/images/logo48.png",
"64": "/images/logo64.png",
"128": "/images/logo128.png"
},
"developer": {
"name": "Robert Nyman",
"url": "http://robertnyman.com"
},
"installs_allowed_from": ["*"],
"default_locale": "en"
}
Packaged & hosted apps
WebAPIs
Security Levels
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
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)

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
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);
}
NOTIFICATION
var notification = navigator.mozNotification;
notification.createNotification(
"See this",
"This is a notification",
iconURL
);
SCREEN
ORIENTATION API
// Portrait mode:
screen.mozLockOrientation("portrait");
/*
Possible values:
"landscape"
"portrait"
"landscape-primary"
"landscape-secondary"
"portrait-primary"
"portrait-secondary"
*/
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);
WEB PAYMENTS
var pay = navigator.mozPay(paymentToken);
pay.onsuccess = function (event) {
// Weee! Money!
};
mozmarket.receipts.Prompter({
storeURL: "https://marketplace.mozilla.org/app/myapp",
supportHTML: '<a href="mailto:me@example.com">email
me@example.com</a>',
verify: true
});
DEVICEPROXIMITY
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);
});
AMBIENT LIGHT
EVENTS
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);
});
PAGE VISIBILITY
document.addEventListener("visibilitychange", function () {
if (document.hidden) {
console.log("App is hidden");
}
else {
console.log("App has focus");
}
});
Device Storage API
Browser API
TCP Socket API
Contacts API
systemXHR

PRIVILEGED APIS
DEVICE STORAGE
API
var deviceStorage = navigator.getDeviceStorage("videos");
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;
}
};
WEB ACTIVITIES
Interacting with the camera
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!");
};
{
"activities": {
"share": {
"filters": {
"type": ["image/png", "image/gif"]
}
"href": "sharing.html",
"disposition": "window"
}
}
}
Future APIs
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
Web Apps from Mozilla
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
Web Components & Mozilla Brick
http://mozilla.github.io/brick/
<x-flipbox>
<div>I'm the front face.</div>
<div>And I'm the back face.</div>
</x-flipbox>
// assume that toggleButton and flipBox are already
// defined as their respective DOM elements
toggleButton.addEventListener("click", function(){
flipBox.toggle();
});
appbar
calendar
datepicker
deck
flipbox
iconbutton
layout

slidebox
slider
tabbar
toggle
togglegroup
tooltip
Get started
https://addons.mozilla.org/firefox/addon/firefox-ossimulator/
FIREFOX OS
BOILERPLATE APP

https://github.com/robnyman/Firefox-OS-Boilerplate-App
APP MANAGER
https://marketplace.firefox.com/
https://marketplace.firefox.com/developers/
Trying things out
Go have some fun!
Robert Nyman
robertnyman.com
robert@mozilla.com
Mozilla

@robertnyman

More Related Content

Viewers also liked

Viewers also liked (6)

Mozilla
MozillaMozilla
Mozilla
 
Mozilla presenation .ppt
Mozilla presenation .pptMozilla presenation .ppt
Mozilla presenation .ppt
 
Firefox presentation
Firefox presentationFirefox presentation
Firefox presentation
 
Firefox OS
Firefox OSFirefox OS
Firefox OS
 
mozilla firefox
mozilla firefox mozilla firefox
mozilla firefox
 
Mozilla & Open Web
Mozilla & Open WebMozilla & Open Web
Mozilla & Open Web
 

Similar to Firefox OS, the Open Web & WebAPIs - HTML5DevConf, San Francisco

Bringing the Open Web & APIs to 
mobile devices with Firefox OS - GOTO confer...
Bringing the Open Web & APIs to 
mobile devices with Firefox OS - GOTO confer...Bringing the Open Web & APIs to 
mobile devices with Firefox OS - GOTO confer...
Bringing the Open Web & APIs to 
mobile devices with Firefox OS - GOTO confer...
Robert Nyman
 
Bringing the Open Web & APIs to 
mobile devices with Firefox OS, JSFoo, India
Bringing the Open Web & APIs to 
mobile devices with Firefox OS, JSFoo, IndiaBringing the Open Web & APIs to 
mobile devices with Firefox OS, JSFoo, India
Bringing the Open Web & APIs to 
mobile devices with Firefox OS, JSFoo, India
Robert Nyman
 
Bringing the Open Web & APIs to 
mobile devices with Firefox OS - BrazilJS
Bringing the Open Web & APIs to 
mobile devices with Firefox OS - BrazilJSBringing the Open Web & APIs to 
mobile devices with Firefox OS - BrazilJS
Bringing the Open Web & APIs to 
mobile devices with Firefox OS - BrazilJS
Robert Nyman
 
Bringing the Open Web & APIs to 
mobile devices with Firefox OS - SpainJS
Bringing the Open Web & APIs to 
mobile devices with Firefox OS - SpainJSBringing the Open Web & APIs to 
mobile devices with Firefox OS - SpainJS
Bringing the Open Web & APIs to 
mobile devices with Firefox OS - SpainJS
Robert Nyman
 
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 MeetBringing 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
Robert Nyman
 
(Christian heilman) firefox
(Christian heilman) firefox(Christian heilman) firefox
(Christian heilman) firefox
NAVER D2
 
Bringing the open web and APIs to mobile devices with Firefox OS - Whisky W...
 	Bringing the open web and APIs to mobile devices with Firefox OS - Whisky W... 	Bringing the open web and APIs to mobile devices with Firefox OS - Whisky W...
Bringing the open web and APIs to mobile devices with Firefox OS - Whisky W...
Robert Nyman
 
WebAPIs & Apps - Mozilla London
WebAPIs & Apps - Mozilla LondonWebAPIs & Apps - Mozilla London
WebAPIs & Apps - Mozilla London
Robert Nyman
 
Firefox os-introduction
Firefox os-introductionFirefox os-introduction
Firefox os-introduction
zsoltlengyelit
 
Fixing the mobile web - Internet World Romania
Fixing the mobile web - Internet World RomaniaFixing the mobile web - Internet World Romania
Fixing the mobile web - Internet World Romania
Christian Heilmann
 
Firefox OS, the Open Web & WebAPIs - LXJS, Portugal
Firefox OS, the Open Web & WebAPIs - LXJS, PortugalFirefox OS, the Open Web & WebAPIs - LXJS, Portugal
Firefox OS, the Open Web & WebAPIs - LXJS, Portugal
Robert Nyman
 

Similar to Firefox OS, the Open Web & WebAPIs - HTML5DevConf, San Francisco (20)

Bringing the Open Web & APIs to 
mobile devices with Firefox OS - GOTO confer...
Bringing the Open Web & APIs to 
mobile devices with Firefox OS - GOTO confer...Bringing the Open Web & APIs to 
mobile devices with Firefox OS - GOTO confer...
Bringing the Open Web & APIs to 
mobile devices with Firefox OS - GOTO confer...
 
Bringing the Open Web & APIs to 
mobile devices with Firefox OS, JSFoo, India
Bringing the Open Web & APIs to 
mobile devices with Firefox OS, JSFoo, IndiaBringing the Open Web & APIs to 
mobile devices with Firefox OS, JSFoo, India
Bringing the Open Web & APIs to 
mobile devices with Firefox OS, JSFoo, India
 
Bringing the Open Web & APIs to 
mobile devices with Firefox OS - BrazilJS
Bringing the Open Web & APIs to 
mobile devices with Firefox OS - BrazilJSBringing the Open Web & APIs to 
mobile devices with Firefox OS - BrazilJS
Bringing the Open Web & APIs to 
mobile devices with Firefox OS - BrazilJS
 
Bringing the Open Web & APIs to 
mobile devices with Firefox OS - SpainJS
Bringing the Open Web & APIs to 
mobile devices with Firefox OS - SpainJSBringing the Open Web & APIs to 
mobile devices with Firefox OS - SpainJS
Bringing the Open Web & APIs to 
mobile devices with Firefox OS - SpainJS
 
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 MeetBringing 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
 
WebAPIs + Brick - WebBR2013
WebAPIs + Brick - WebBR2013WebAPIs + Brick - WebBR2013
WebAPIs + Brick - WebBR2013
 
(Christian heilman) firefox
(Christian heilman) firefox(Christian heilman) firefox
(Christian heilman) firefox
 
Bringing the open web and APIs to mobile devices with Firefox OS - Whisky W...
 	Bringing the open web and APIs to mobile devices with Firefox OS - Whisky W... 	Bringing the open web and APIs to mobile devices with Firefox OS - Whisky W...
Bringing the open web and APIs to mobile devices with Firefox OS - Whisky W...
 
Front in recife
Front in recifeFront in recife
Front in recife
 
WebAPIs & Apps - Mozilla London
WebAPIs & Apps - Mozilla LondonWebAPIs & Apps - Mozilla London
WebAPIs & Apps - Mozilla London
 
Firefox os-introduction
Firefox os-introductionFirefox os-introduction
Firefox os-introduction
 
Firefox OS - The platform you deserve - Athens App Days - 2013-11-27
Firefox OS - The platform you deserve - Athens App Days - 2013-11-27Firefox OS - The platform you deserve - Athens App Days - 2013-11-27
Firefox OS - The platform you deserve - Athens App Days - 2013-11-27
 
Alagoas Dev Day
Alagoas Dev DayAlagoas Dev Day
Alagoas Dev Day
 
Fixing the mobile web - Internet World Romania
Fixing the mobile web - Internet World RomaniaFixing the mobile web - Internet World Romania
Fixing the mobile web - Internet World Romania
 
Firefox OS - The platform you deserve - Firefox OS Budapest workshop - 2013-1...
Firefox OS - The platform you deserve - Firefox OS Budapest workshop - 2013-1...Firefox OS - The platform you deserve - Firefox OS Budapest workshop - 2013-1...
Firefox OS - The platform you deserve - Firefox OS Budapest workshop - 2013-1...
 
Front In Fortaleza - WebAPIs
Front In Fortaleza - WebAPIsFront In Fortaleza - WebAPIs
Front In Fortaleza - WebAPIs
 
Firefox OS
Firefox OSFirefox OS
Firefox OS
 
Pivorak.javascript.global domination
Pivorak.javascript.global dominationPivorak.javascript.global domination
Pivorak.javascript.global domination
 
Andriy Vandakurov about "Frontend. Global domination"
Andriy Vandakurov about  "Frontend. Global domination" Andriy Vandakurov about  "Frontend. Global domination"
Andriy Vandakurov about "Frontend. Global domination"
 
Firefox OS, the Open Web & WebAPIs - LXJS, Portugal
Firefox OS, the Open Web & WebAPIs - LXJS, PortugalFirefox OS, the Open Web & WebAPIs - LXJS, Portugal
Firefox OS, the Open Web & WebAPIs - LXJS, Portugal
 

More from Robert Nyman

More from Robert Nyman (20)

Have you tried listening?
Have you tried listening?Have you tried listening?
Have you tried listening?
 
Building for Your Next Billion - Google I/O 2017
Building for Your Next Billion - Google I/O 2017Building for Your Next Billion - Google I/O 2017
Building for Your Next Billion - Google I/O 2017
 
Introduction to Google Daydream
Introduction to Google DaydreamIntroduction to Google Daydream
Introduction to Google Daydream
 
Predictability for the Web
Predictability for the WebPredictability for the Web
Predictability for the Web
 
The Future of Progressive Web Apps - View Source conference, Berlin 2016
The Future of Progressive Web Apps - View Source conference, Berlin 2016The Future of Progressive Web Apps - View Source conference, Berlin 2016
The Future of Progressive Web Apps - View Source conference, Berlin 2016
 
The Future of the Web - Cold Front conference 2016
The Future of the Web - Cold Front conference 2016The Future of the Web - Cold Front conference 2016
The Future of the Web - Cold Front conference 2016
 
The Future of Progressive Web Apps - Google for Indonesia
The Future of Progressive Web Apps - Google for IndonesiaThe Future of Progressive Web Apps - Google for Indonesia
The Future of Progressive Web Apps - Google for Indonesia
 
Google tech & products
Google tech & productsGoogle tech & products
Google tech & products
 
Introduction to Progressive Web Apps, Google Developer Summit, Seoul - South ...
Introduction to Progressive Web Apps, Google Developer Summit, Seoul - South ...Introduction to Progressive Web Apps, Google Developer Summit, Seoul - South ...
Introduction to Progressive Web Apps, Google Developer Summit, Seoul - South ...
 
Progressive Web Apps keynote, Google Developer Summit, Tokyo, Japan
Progressive Web Apps keynote, Google Developer Summit, Tokyo, JapanProgressive Web Apps keynote, Google Developer Summit, Tokyo, Japan
Progressive Web Apps keynote, Google Developer Summit, Tokyo, Japan
 
The web - What it has, what it lacks and where it must go - keynote at Riga D...
The web - What it has, what it lacks and where it must go - keynote at Riga D...The web - What it has, what it lacks and where it must go - keynote at Riga D...
The web - What it has, what it lacks and where it must go - keynote at Riga D...
 
The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...
The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...
The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...
 
The web - What it has, what it lacks and where it must go - Istanbul
The web - What it has, what it lacks and where it must go - IstanbulThe web - What it has, what it lacks and where it must go - Istanbul
The web - What it has, what it lacks and where it must go - Istanbul
 
The web - What it has, what it lacks and where it must go
The web - What it has, what it lacks and where it must goThe web - What it has, what it lacks and where it must go
The web - What it has, what it lacks and where it must go
 
Google, the future and possibilities
Google, the future and possibilitiesGoogle, the future and possibilities
Google, the future and possibilities
 
Developer Relations in the Nordics
Developer Relations in the NordicsDeveloper Relations in the Nordics
Developer Relations in the Nordics
 
What is Developer Relations?
What is Developer Relations?What is Developer Relations?
What is Developer Relations?
 
Android TV Introduction - Stockholm Android TV meetup
Android TV Introduction - Stockholm Android TV meetupAndroid TV Introduction - Stockholm Android TV meetup
Android TV Introduction - Stockholm Android TV meetup
 
New improvements for web developers - frontend.fi, Helsinki
New improvements for web developers - frontend.fi, HelsinkiNew improvements for web developers - frontend.fi, Helsinki
New improvements for web developers - frontend.fi, Helsinki
 
Mobile phone trends, user data & developer climate - frontend.fi, Helsinki
Mobile phone trends, user data & developer climate - frontend.fi, HelsinkiMobile phone trends, user data & developer climate - frontend.fi, Helsinki
Mobile phone trends, user data & developer climate - frontend.fi, Helsinki
 

Recently uploaded

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 

Recently uploaded (20)

presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
Manulife - Insurer Innovation Award 2024
Manulife - Insurer Innovation Award 2024Manulife - Insurer Innovation Award 2024
Manulife - Insurer Innovation Award 2024
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 

Firefox OS, the Open Web & WebAPIs - HTML5DevConf, San Francisco