Firefox OSLengyel Zsolt

zsolt.lengyel.it@gmail.com

Bringing the Open Web to Mobile Devices OS

Bringing the Open Web to Mobile Devices OS

Bringing The Boot to Gecko project was launched to enable the Open Web as a platform for mobile devices. We’re making innovation possible by driving the development of new Web standards.

Bringing The Boot to Gecko project was launched to enable the Open Web as a platform for mobile devices. We’re making innovation possible by driving the development of new Web standards.

Operators and developers write apps and services for one platform and

then rewrite them for others. Users who want to buy phones, e-readers and game consoles from different manufacturers often need to re-purchase apps for each device.

Operators and developers write apps and services for one platform and

then rewrite them for others. Users who want to buy phones, e-readers and game consoles from different manufacturers often need to re-purchase apps for each device.

Opportunities for Developers

Opportunities for Developers

Using HTML5 and the new Mozilla-proposed standard APIs, developers

everywhere will be able to create amazing experiences and apps.

Developers will no longer need to learn and develop against platform-

specific native APIs.

Using HTML5 and the new Mozilla-proposed standard APIs, developers

everywhere will be able to create amazing experiences and apps.

Developers will no longer need to learn and develop against platform-

specific native APIs.

Customization for OEMs & OperatorsCustomization for OEMs & Operators

OEMs and operators will be able to provide content and services across

their entire device portfolio, regardless of OS. And they will be able

to customize user experiences, manage app distribution and retain

customer attention, loyalty and billing relationships.

OEMs and operators will be able to provide content and services across

their entire device portfolio, regardless of OS. And they will be able

to customize user experiences, manage app distribution and retain

customer attention, loyalty and billing relationships.

Consumer FreedomConsumer Freedom

Consumers who use devices based on the Open Web platform will be able to easily access and download their own content regardless of which OS they use.

Consumers who use devices based on the Open Web platform will be able to easily access and download their own content regardless of which OS they use.

New Web StandardsNew Web Standards

Firefox OS produces an implementation of these new Web standards to free

mobile platforms from the encumbrances of the rules and restrictions of existing

proprietary platforms.

Firefox OS produces an implementation of these new Web standards to free

mobile platforms from the encumbrances of the rules and restrictions of existing

proprietary platforms.

ComponentsComponents

GONKGONK

GECKOGECKO

GAIA

GAIA

APPSAPPS

GONKGONK

Lower level operating system, consisting of a Linux kernel and HAL

(Hardware Abstraction Layer).

Possibility to expose anything from the hardware to Gecko.

Lower level operating system, consisting of a Linux kernel and HAL

(Hardware Abstraction Layer).

Possibility to expose anything from the hardware to Gecko.

GECKOGECKO

The application runtime.The rendering engine in Firefox for

HTML5, CSS & JavaScript.

Implements a number of APIs.

The application runtime.The rendering engine in Firefox for

HTML5, CSS & JavaScript.

Implements a number of APIs.

GAIAGAIA

The user interface.

Built entirely by HTML5 & Open Web APIs.

The user interface.

Built entirely by HTML5 & Open Web APIs.

Web APIsWeb APIs

The Boot to Gecko project is based entirely on open standards and the

source code is open and accessible to all.

Where open standards are missing, we're working with standards bodies and other

vendors to create them.

The Boot to Gecko project is based entirely on open standards and the

source code is open and accessible to all.

Where open standards are missing, we're working with standards bodies and other

vendors to create them.

WEBTELEPHONYWEBTELEPHONY

// Telephony objectvar 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);

// Place a callvar cal = tel.dial(“123456789”);

// Events for that callcall.onstatechange = function (event) { /* Possible values for state: "dialing", "ringing", "busy", "connecting", "connected", "disconnecting", "disconnected", "incoming" */ console.log(event.state);};

// Above options as direct eventscall.onconnected = function () { // Call was connected};

call.ondisconnected = function () { // Call was disconnected};

// Receiving a calltel.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 callcall.hangUp();

// Iterating over calls, and taking action depending on their changed statustel.oncallschanged = function (event) { tel.calls.forEach(function (call) { // Log the state of each call console.log(call.state); });};

WEBSMSWEBSMS

// SMS objectvar sms = navigator.mozSMS;

// Send a messagesms.send("123456789", "Hello world!");

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

BATTERY STATUS APIBATTERY STATUS API

var battery = navigator.mozBatteryif (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); }

VIBRATION APIVIBRATION API

// Vibrate for one secondnavigator.mozVibrate(1000);

// Vibration pattern [vibrationTime, pause,…]navigator.mozVibrate([200, 100, 200, 100]);

// Vibrate for 5 secondsnavigator.mozVibrate(5000);

// Turn off vibrationnavigator.mozVibrate(0);

CONTACTS APICONTACTS 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")};

SETTINGS APISETTINGS API

var settings = window.navigator.mozSettings;settings.getLock().set({"background": "pretty.png"});

DEVICE STORAGE APIDEVICE STORAGE API

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

SCREENORIENTATION API

SCREENORIENTATION API

// Portrait mode:screen.mozLockOrientation("portrait");

/* Possible values: "landscape" "portrait" "landscape-primary" "landscape-secondary" "portrait-primary" "portrait-secondary"*/

NETWORK INFORMATION API

NETWORK INFORMATION API

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

KEYBOARD/IME APIKEYBOARD/IME API

var keyboard = window.navigator.mozKeyboard;keyboard.sendKey(0, keyCode);

Web Apps from MozillaWeb Apps from Mozilla

CERTIFIED

PRIVILEGED

HOSTED

Vibration API, Screen Orientation, Geolocation API, Mouse Lock API, Open WebApps, Network Information API, Battery Status API, Alarm API, Push Notifications API, WebFM API / FMRadio, WebPayment, IndexedDB, Ambient light sensor, Proximity sensor, Notification

Device Storage APIBrowser API

TCP Socket APIContacts APIsystemXHR

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

Security LevelsSecurity Levels

Writing Apps, Mozilla Marketplace

Web apps are apps built using standard Web technologies. They work in any modern Web browser, and can be developed using your favorite tools.

The Open Web apps project proposes some small additions to existing sites to turn them into apps that run in a rich, fun, and powerful computing environment.

These apps run on desktop browsers and mobile devices, and are easier for a user to discover and launch than Web sites.

Steps to TakeSteps to Take

Develop Web App using HTML5, CSS, & Javascript1.

Create an app manifest file2.

Publish/install the app3.

1. Develop Web App using HTML5, CSS & JavaScript

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.

2. Create an app manifest file

Create a file with a .webapp extensionCreate a file with a .webapp extension

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

MANIFEST CHECKER

3. Publish/install the app

Mozilla MarketplaceMozilla Marketplace

Installing/hosting the appInstalling/hosting the app

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}

Development tools

Your favourite tools

App Manager

Questions

Thank you for your attention!