0
INTRODUCING

FIREFOX OS

Sayak Sarkar (@sayak_sarkar)
http://sayak.in
What is

Firefox OS?

Firefox OS is an open platform for mobile Devices,
built entirely using HTML5 and other open Web sta...
WHY USE HTML5?
In-built distribution - the web
Simple technologies used by lots
of developers
Evolution of existing practi...
PROMISES OF HTML5
firefox OS
How Real is it?
Released in four countries: Spain, Poland, Venezuela
and Columbia (more to come very soon)
18 mobile opera...
"Movistar offers
the ZTE Open for
€69, including €30
of balance for
prepaid customers
and a 4GB
microSD card"
ARCHITECTURE
Third Party HTML5 Apps
Third Party HTML5 Apps
GAIA
GAIA
Web APIs / Web Actitivies
Web APIs / Web Actitivies
G...
-

+

=
PREDICTABLE HTML5 SUPPORT
SECURITY
APPLICATION MANIFEST
{
{
"version": "1.0",
"version": "1.0",
"name": "MozillaBall",
"name": "MozillaBall",
"description": ...
APPLICATIONS
Web Content
Web Content
Regular web content
Regular web content

Installed Web App
Installed Web App
A regula...
APPLICATIONS
PERMISSIONS

"permissions": {
"permissions": {
"contacts": {
"contacts": {
"description": "Required for autocompletion in ...
WEB APIS
WEB APIS (FOR ALL
Vibration API (W3C)
Screen Orientation
Geolocation API
Mouse Lock API (W3C)
Open WebApps
Network Informa...
BATTERY
STATUS API
BATTERY STATUS API
var battery = navigator.battery;
var battery = navigator.battery;
if (battery) {
if (battery) {
var bat...
SCREEN
ORIENTATION
API
SCREEN ORIENTATION API
// Portrait mode:
// Portrait mode:
screen.mozLockOrientation("portrait");
screen.mozLockOrientatio...
VIBRATION API
VIBRATION API
// Vibrate for one second
// Vibrate for one second
navigator.vibrate(1000);
navigator.vibrate(1000);
// Vib...
NETWORK
INFORMATION
API
NETWORK INFORMATION API

var connection = window.navigator.mozConnection,
var connection = window.navigator.mozConnection,...
☼

AMBIENT LIGHT
EVENTS
AMBIENT LIGHT EVENTS

window.addEventListener("devicelight", function (event) {
window.addEventListener("devicelight", fun...
PAGE VISIBILITY
PAGE VISIBILITY
document.addEventListener("visibilitychange", function () {
document.addEventListener("visibilitychange", ...
WEB APIS (PRIVILEGED APPS)
Device Storage API
Browser API
TCP Socket API
Contacts API
systemXHR
CONTACTS API
CONTACTS API
var contact = new mozContact();
var contact = new mozContact();
contact.init({name: "Tom"});
contact.init({na...
WEB APIS (CERTIFIED APPS)
WebTelephony

WebBluetooth

WebSMS

Permissions API

Idle API

Network Stats API

Settings API

...
CERTIFIED APPS = THE OS 
CERTIFIED APPS
Dialer

Alarm Clock

Contacts

Camera

Settings

Notes

SMS

First Run Experience

Web browser

Notificatio...
WEB
ACTIVITIES
GET A PHOTO?
var getphoto = new MozActivity({
var getphoto = new MozActivity({
name: "pick",
name: "pick",
data: {
data: {...
FIREFOX OS + ANDROID!
APP
DISTRIBUTION
FIREFOX OS MARKETPLACE

https://marketplace.firefox.com/
INSTALL FROM THE WEB…
var installapp = navigator.mozApps.install(manifestURL);
installapp.onsuccess = function(data) {
// ...
DYNAMIC APP WEB SEARCH
DEVELOPMENT
ENVIRONMENT
FIREFOX OS
BOILERPLATE
APP

https://github.com/robnyman/Firefox-OS-Boilerplate-App
FIREFOX OS SIMULATOR

https://addons.mozilla.org/firefox/addon/firefox-os-simulator/
PROTOTYPING WITH JSFIDDLE

1.Write your code as a JSFiddle
2.Append /webapp.manifest to your Fiddle
URL and paste this lin...
BUILDING
BLOCKS?
CERTIFIED APPS BUILDING BLOCKS

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

http://buildingfirefoxos.com/
MOZILLA BRICK

http://mozilla.github.io/brick/
WHAT’S
COOKING?
MORE WEB APIS
Resource lock API

Spellcheck API

UDP Datagram Socket API

LogAPI

Peer to Peer API

Keyboard/IME API

WebN...
APPMAKER
Resource lock APIUDP Datagram Socket APIPeer to Peer
APIWebNFCWebUSBHTTP-cache APICalendar
APISpellcheck APILogAP...
RESOURCES
DEVELOPER HUB

https://marketplace.firefox.com/developers/
MOZILLA DEVELOPER BLOG

https://hacks.mozilla.org/category/firefox-os/
FIREFOX OS VIDEO SERIES

https://hacks.mozilla.org/category/videoseries/
FIREFOX OS WIKI

https://developer.mozilla.org/en/docs/Mozilla/Firefox_OS
THANKS!
SAYAK SARKAR
@sayak_sarkar
http://sayak.in/
Firefox OS
Upcoming SlideShare
Loading in...5
×

Firefox OS

2,716

Published on

Introductory Slides on Firefox OS.

Published in: Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,716
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
359
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Transcript of "Firefox OS"

  1. 1. INTRODUCING FIREFOX OS Sayak Sarkar (@sayak_sarkar) http://sayak.in
  2. 2. What is Firefox OS? Firefox OS is an open platform for mobile Devices, built entirely using HTML5 and other open Web standards which is free from the rules and restrictions of existing proprietary platforms.
  3. 3. WHY USE HTML5? In-built distribution - the web Simple technologies used by lots of developers Evolution of existing practices Open, independent, standardized
  4. 4. PROMISES OF HTML5
  5. 5. firefox OS
  6. 6. How Real is it? Released in four countries: Spain, Poland, Venezuela and Columbia (more to come very soon) 18 mobile operator partners, 6 hardware partners Hardware options: Alcatel One Touch Fire, ZTE Open, Geeksphone Keon, Geeksphone Peak… 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
  7. 7. "Movistar offers the ZTE Open for €69, including €30 of balance for prepaid customers and a 4GB microSD card"
  8. 8. ARCHITECTURE Third Party HTML5 Apps Third Party HTML5 Apps GAIA GAIA Web APIs / Web Actitivies Web APIs / Web Actitivies Gecko rendering engine Gecko rendering engine Linux/Gonk (ADB enabled) Linux/Gonk (ADB enabled)
  9. 9. - + =
  10. 10. PREDICTABLE HTML5 SUPPORT
  11. 11. SECURITY
  12. 12. APPLICATION MANIFEST { { "version": "1.0", "version": "1.0", "name": "MozillaBall", "name": "MozillaBall", "description": "Exciting Open Web development action!", "description": "Exciting Open Web development action!", "icons": { "icons": { "16": "/img/icon-16.png", "16": "/img/icon-16.png", "48": "/img/icon-48.png", "48": "/img/icon-48.png", "128": "/img/icon-128.png" "128": "/img/icon-128.png" }, }, "developer": { "developer": { "name": "Mozilla Labs", "name": "Mozilla Labs", "url": "http://mozillalabs.com" "url": "http://mozillalabs.com" }, }, "installs_allowed_from": ["*"], "installs_allowed_from": ["*"], "appcache_path": "/cache.manifest", "appcache_path": "/cache.manifest", "locales": { "locales": { "es": { "es": { "description": "¡Acción abierta emocionante del desarrollo del Web!", "description": "¡Acción abierta emocionante del desarrollo del Web!", "developer": { "developer": { "url": "http://es.mozillalabs.com/" "url": "http://es.mozillalabs.com/" } } } } }, }, "default_locale": "en" "default_locale": "en" } }
  13. 13. APPLICATIONS Web Content Web Content Regular web content Regular web content Installed Web App Installed Web App A regular web app A regular web app Privileged Web App Privileged Web App More access, more More access, more responsibility responsibility Certified Web App Certified Web App Device-critical Device-critical applications applications
  14. 14. APPLICATIONS
  15. 15. PERMISSIONS "permissions": { "permissions": { "contacts": { "contacts": { "description": "Required for autocompletion in the share screen", "description": "Required for autocompletion in the share screen", "access": "readcreate" "access": "readcreate" }, }, "alarms": { "alarms": { "description": "Required to schedule notifications" "description": "Required to schedule notifications" } } } }
  16. 16. WEB APIS
  17. 17. 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
  18. 18. BATTERY STATUS API
  19. 19. BATTERY STATUS API var battery = navigator.battery; var battery = navigator.battery; if (battery) { if (battery) { var batteryLevel = Math.round(battery.level * 100) + "%", var batteryLevel = Math.round(battery.level * 100) + "%", charging = (battery.charging)? "" :: "not ", charging = (battery.charging)? "" "not ", chargingTime = parseInt(battery.chargingTime // 60, 10), chargingTime = parseInt(battery.chargingTime 60, 10), dischargingTime = parseInt(battery.dischargingTime // 60, 10); dischargingTime = parseInt(battery.dischargingTime 60, 10); } } // Set events // Set events battery.addEventListener("levelchange", setStatus, false); battery.addEventListener("levelchange", setStatus, false); battery.addEventListener("chargingchange", setStatus, false); battery.addEventListener("chargingchange", setStatus, false); battery.addEventListener("chargingtimechange", setStatus, false); battery.addEventListener("chargingtimechange", setStatus, false); battery.addEventListener("dischargingtimechange", setStatus, false); battery.addEventListener("dischargingtimechange", setStatus, false);
  20. 20. SCREEN ORIENTATION API
  21. 21. SCREEN ORIENTATION API // Portrait mode: // Portrait mode: screen.mozLockOrientation("portrait"); screen.mozLockOrientation("portrait"); /* /* */ */ Possible values: Possible values: "landscape" "landscape" "portrait" "portrait" "landscape-primary" "landscape-primary" "landscape-secondary" "landscape-secondary" "portrait-primary" "portrait-primary" "portrait-secondary" "portrait-secondary"
  22. 22. VIBRATION API
  23. 23. VIBRATION API // Vibrate for one second // Vibrate for one second navigator.vibrate(1000); navigator.vibrate(1000); // Vibration pattern [vibrationTime, pause,…] // Vibration pattern [vibrationTime, pause,…] navigator.vibrate([200, 100, 200, 100]); navigator.vibrate([200, 100, 200, 100]); // Vibrate for 5 seconds // Vibrate for 5 seconds navigator.vibrate(5000); navigator.vibrate(5000); // Turn off vibration // Turn off vibration navigator.vibrate(0); navigator.vibrate(0);
  24. 24. NETWORK INFORMATION API
  25. 25. NETWORK INFORMATION API var connection = window.navigator.mozConnection, var connection = window.navigator.mozConnection, online = connection.bandwidth > 0, online = connection.bandwidth > 0, metered = connection.metered; metered = connection.metered;
  26. 26. ☼ AMBIENT LIGHT EVENTS
  27. 27. AMBIENT LIGHT EVENTS window.addEventListener("devicelight", function (event) { window.addEventListener("devicelight", function (event) { // The level of the ambient light in lux // The level of the ambient light in lux // The lux values for "dim" typically begin below 50, // The lux values for "dim" typically begin below 50, // and the values for "bright" begin above 10000 // and the values for "bright" begin above 10000 console.log(event.value); console.log(event.value); }); });
  28. 28. PAGE VISIBILITY
  29. 29. PAGE VISIBILITY document.addEventListener("visibilitychange", function () { document.addEventListener("visibilitychange", function () { if (document.hidden) { if (document.hidden) { console.log("App is hidden"); console.log("App is hidden"); } } else { else { console.log("App has focus"); console.log("App has focus"); } } }); });
  30. 30. WEB APIS (PRIVILEGED APPS) Device Storage API Browser API TCP Socket API Contacts API systemXHR
  31. 31. CONTACTS API
  32. 32. CONTACTS API var contact = new mozContact(); var contact = new mozContact(); contact.init({name: "Tom"}); contact.init({name: "Tom"}); var request = navigator.mozContacts.save(contact); var request = navigator.mozContacts.save(contact); request.onsuccess = function() { request.onsuccess = function() { console.log("Success"); console.log("Success"); }; }; request.onerror = function() { request.onerror = function() { console.log("Error") console.log("Error") }; };
  33. 33. WEB APIS (CERTIFIED APPS) 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
  34. 34. CERTIFIED APPS = THE OS 
  35. 35. CERTIFIED APPS 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
  36. 36. WEB ACTIVITIES
  37. 37. GET A PHOTO? var getphoto = new MozActivity({ var getphoto = new MozActivity({ name: "pick", name: "pick", data: { data: { type: ["image/png", "image/jpeg"], "image/jpg"] type: ["image/png", "image/jpeg"], "image/jpg"] } } }); }); getphoto.onsuccess = function () { getphoto.onsuccess = function () { var img = document.createElement("img"); var img = document.createElement("img"); if (this.result.blob.type.indexOf("image") != -1) { if (this.result.blob.type.indexOf("image") != -1) { img.src = window.URL.createObjectURL(this.result.blob); img.src = window.URL.createObjectURL(this.result.blob); } } }; }; getphoto.onerror = function () { // error getphoto.onerror = function () { // error }; };
  38. 38. FIREFOX OS + ANDROID!
  39. 39. APP DISTRIBUTION
  40. 40. FIREFOX OS MARKETPLACE https://marketplace.firefox.com/
  41. 41. INSTALL FROM THE WEB… var installapp = navigator.mozApps.install(manifestURL); installapp.onsuccess = function(data) { // App is installed }; installapp.onerror = function() { // App wasn't installed, info is in // installapp.error.name };
  42. 42. DYNAMIC APP WEB SEARCH
  43. 43. DEVELOPMENT ENVIRONMENT
  44. 44. FIREFOX OS BOILERPLATE APP https://github.com/robnyman/Firefox-OS-Boilerplate-App
  45. 45. FIREFOX OS SIMULATOR https://addons.mozilla.org/firefox/addon/firefox-os-simulator/
  46. 46. PROTOTYPING WITH JSFIDDLE 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 https://hacks.mozilla.org/2013/08/using-jsfiddle-to-prototype-firefox-os-apps/
  47. 47. BUILDING BLOCKS?
  48. 48. CERTIFIED APPS BUILDING BLOCKS http://buildingfirefoxos.com/
  49. 49. CERTIFIED APPS BUILDING BLOCKS http://buildingfirefoxos.com/
  50. 50. MOZILLA BRICK http://mozilla.github.io/brick/
  51. 51. WHAT’S COOKING?
  52. 52. MORE WEB 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
  53. 53. APPMAKER Resource lock APIUDP Datagram Socket APIPeer to Peer APIWebNFCWebUSBHTTP-cache APICalendar APISpellcheck APILogAPIKeyboard/IME API WebRTC FileHandle API Sync API
  54. 54. RESOURCES
  55. 55. DEVELOPER HUB https://marketplace.firefox.com/developers/
  56. 56. MOZILLA DEVELOPER BLOG https://hacks.mozilla.org/category/firefox-os/
  57. 57. FIREFOX OS VIDEO SERIES https://hacks.mozilla.org/category/videoseries/
  58. 58. FIREFOX OS WIKI https://developer.mozilla.org/en/docs/Mozilla/Firefox_OS
  59. 59. THANKS! SAYAK SARKAR @sayak_sarkar http://sayak.in/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×