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!
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