FIREFOX OSA (MOBILE) WEB DEVELOPERS DREAM

Carsten Sandtner ( ) 2014 - muxCamp Worms 2014@casarock

WHO AM I?Carsten Sandtner

Head of Development at //mediaman GmbHMozilla representative

Javascript enthusiast and web developer since 1998.

HTML5 BASED OPERATING SYSTEMS

The full Safari engine is inside of iPhone. And so,you can write amazing Web 2.0 and Ajax apps

that look exactly and behave exactly like apps onthe iPhone. And these apps can integrate

perfectly with iPhone services. They can make acall, they can send an email, they can look up a

location on Google Maps. And guess what?There’s no SDK that you need!

WEBOSInvented by Palm. Aimed at smartphones and tablets.

Launched 2009Apps are written in HTML5Palm sold to HP. HP to LG 2013First (mobile) OS with HTML5 UI!Enyo Framework still alive

CHROMEOSA Linux distribution where Google Chrome is the "UI" layer

Launched 2009Desktop only!The browser is the OS (at least UI)Still alive. Chromebooks are available

WINDOWS 8(.1)Not the OS, but First Class Apps in HTML5.

Build Windows 8 Apps in HTML5, CSS and JavascriptFirst Class Apps.

FIREFOX OSFully open mobile operating system based on web standards

First version released 2011For smartphones and tabletsFully web basedApp development: Just HTML5

FIREFOX OSIN DETAIL

ARCHITECTURE

GONKLow level OS of Firefox OS. Linux based on Android Open

SourceProject

GECKOWell known rendering engine by Mozilla

GAIAUI level of Firefox OS

Only interface to the underlying operating system and hardware

WEB APIS AND WEB ACTIVITIESWeb APIs

Access device hardwareProvides access to data storageSecurity - sensitive APIs need approvementSome are already standard (W3C)

Web ActivitiesAccess to sensible user dataApp requests data from an other appe.g. Dial a number requests Phone appOnly available for installed or higher privileged apps

APPS AND 3RD PARTY APPSEvery HTML5, Javascript, CSS based Apps for Firefox OS

Using WebAPIs and Web Activities

APP DEVELOPMENTJust Open Web Apps

3 DIFFERENT APP TYPES1. hosted2. privileged3. certified

Definition in webapp.manifest

THE WEB APP MANIFESTJSON Configuration fileIncludes: permissions, author, description, type, icons, localeetc.

EXAMPLE (MINIMAL){ "name": "My Awesome App", "description": "My elevator pitch goes here", "launch_path": "/", "icons": { "128": "/img/icon-128.png" }, "developer": { "name": "Your Name", "url": "http://your-homepage-here.tld" }, "default_locale": "en"}

EXAMPLE PRIVILEGED APP{ "name": "My Awesome Privileged App", .... "type": "privileged", "fullscreen": "true", "permissions": { "contacts": { "description": "Required for autocompletion in the share screen", "access": "readcreate" } }, "default_locale": "en", ...}

WEB APISOpen API specifications to access the hardware of devices

Created with and submitted to standards bodies and otherbrowser makers

Secured by three layer security model

WEB APIS: HOSTED APPSVibration API, Screen Orientation, Geolocation API, MouseLock API, Open WebApps, Network Information API, BatteryStatus API, Alarm API, Push Notifications API, WebFM API /FMRadio, WebPayment, IndexedDB, Ambient light sensor,Proximity sensor, Notification.

WEB APIS: PRIVILEGED APPSDevice Storage API, Browser API, TCP Socket API, ContactsAPI, systemXHR.

WEB APIS: CERTIFIED APPSWebTelephony, WebSMS, Idle API, Settings API, PowerManagement API, Mobile Connection API, WiFi InformationAPI, WebBluetooth, Permissions API, Network Stats API,Camera API, Time/Clock API, Attention screen, Voicemail.

Example: Battery APIvar battery = navigator.battery, info = { charging: battery.charging, chargingTime: parseInt(battery.chargingTime / 60, 10), dischargingTime: parseInt(battery.dischargingTime / 60, 10), level: Math.round(battery.level * 100) };

EXAMPLE: GEOLOCATION API*navigator.geolocation.getCurrentPosition(handleLocation);

function handleLocation(position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; /* coords.altitude coords.accuracy coords.altitudeAccuracy coords.heading coords.speed timestamp */}

*Ok, ok, not really a new one!

EXAMPLE: VIBRATION APIvar pattern = [200, 100, 200, 200, 100], vibrating = navigator.vibrate(pattern);

EXAMPLE: NOTIFICATION APINeeds permissions granted by users! (e.g. webapp.manifest)"permissions": { "desktop-notification": { "description": "Allows to display notifications on the user's desktop." }}

// At first, let's check if we have permission for notification// If not, let's ask for itif (Notification && Notification.permission !== "granted") { Notification.requestPermission(function (status) { if (Notification.permission !== status) { Notification.permission = status; }});}

if (Notification && Notification.permission === "granted") { var n = new Notification("Hi!");}

EXAMPLE: CONNECTION APIGet information about current connection

var connection = window.navigator.mozConnection, data = { online: connection.bandwidth, metered: connection.metered }

EXAMPLE: AMBIENTLIGHTGet current Lux of ambient light

var resElement = document.querySelector("#results");window.ondevicelight = function (event) { // Read out the lux value var lux = event.value;};

EXAMPLE: CONTACTS APIRead/Write/Delete Contacts - Permission required!

"permissions": { "contacts":{ "description": "Contacts permissions is required to write contact from Google to your Firefox OS phone", "access": "readwrite" } }}

var contactData = { givenName: ["John"], familyName: ["Doe"]};

var person = new mozContact(contactData); // Firefox OS 1.3 takes a parameter// save the new contactvar saving = navigator.mozContacts.save(person);

saving.onsuccess = function() { console.log('new contact saved');};

saving.onerror = function(err) { console.error(err);};

EXAMPLE: DEVICE STORAGE APISave/Read from sdcard, photo, music, video ...

"permissions": { "device-storage:pictures":{ "access": "readwrite" }, "device-storage:sdcard":{ "access": "readwrite" }}

var sdcard = navigator.getDeviceStorage("sdcard"), file = new Blob(["This is a text file."], {type: "text/plain"}), request = sdcard.addNamed(file, "my-file.txt");

request.onsuccess = function () {..}request.onerror = function () {..}

var pics = navigator.getDeviceStorage('pictures');// browse all the images availablevar cursor = pics.enumerate();cursor.onsuccess = function () { var file = this.result; console.log("File found: " + file.name);

// check if there is other results if (!this.done) { // Then we move to the next result, which call the cursor // success with the next file as result. this.continue(); }}

AND THERE ARE MANY MORE!APIs at MDN

WEB ACTIVITIES

WEB ACTIVITIESconfigure, costcontrol, dial, open, pick, record, save-bookmark, share, view.

New ones: f.e type: “websms/sms” or “webcontacts/contact”

EXAMPLE: DIAL A NUMBERvar getphoto = new MozActivity({ name: "pick", data: { type: ["image/png", "image/jpg", "image/jpeg"] }});

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

TOOLS&UTILS

TESTINGSimulatorBrowser - It's a Web App!

DEVELOPMENTNo SDK!Use your favorite IDE/EditorIt's HTML5!

DEBUGGINGDeveloper tools in Firefox! (NOT! Firebug)Remote Debugger!

UI COMPONENTS

http://buildingfirefoxos.com/

UI COMPONENTS - BRICK!

http://mozilla.github.io/brick/

FIREFOX OS BOILERPLATE

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

PHONEGAP AND CORDOVA

http://build.phonegap.com/http://cordova.apache.org/

HOW TO DISTRIBUTE YOUR APP

HOSTED APPHost the App on your web spaceProvide installation using WebAPI

PRIVILEGED APPDistribute via Firefox OS Marketplace

THANK YOU!Carsten Sandtner

@casarock