Firefox OS - HTML5 for a truly world-wide-web

Christian Heilmann (@codepo8) Sapo Codebits, Lisbon, Portugal, April 2014

FIREFOX OS HTML5 FOR A TRULY WORLD-WIDE-WEB

I LIVE BY THE RIVER…

PEOPLE ARE BUSY…

BENEFITS OF HTML5

★ In-built distribution - the web

★ Simple technologies used by lots of developers

★ Evolution of existing practices

★ Open, independent, standardised

PROMISES OF HTML5

LOCKOUT

FIXING HTML ISSUES

FIREFOX OS

SOME FACTS…★ Released in fourteen countries: Spain, Poland, Venezuela,

Colombia, Peru, Uruguay, Mexico, Brasil (more soon)

★ Released with 7 mobile operator partners, 3 hardware partners

★ Hardware options: Alcatel One Touch Fire, ZTE Open, Geeksphone Keon, Geeksphone Peak, LG Fireweb…

★ 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

"Movistar offers the ZTE Open for €69, including €30 of balance for prepaid customers and a 4GB microSD card"

ARCHITECTURE

Linux/Gonk (ADB enabled)

Gecko rendering engine

Third Party HTML5 Apps

Web APIs / Web Actitivies

GAIA

- + =

PREDICTABLE HTML5 SUPPORT

SECURITY

AVOIDING USER OVERLOAD…

http://smus.com/installable-webapps/

APPLICATION MANIFEST{ "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/" } } }, "default_locale": "en" }

Privileged Web App

More access, more responsibility

Web Content

Regular web content

APPLICATIONS

Installed Web App

A regular web app

Certified Web App

Device-critical applications

APPLICATIONS

PERMISSIONS

"permissions": { "contacts": { "description": "Required for autocompletion in the share screen", "access": "readcreate" }, "alarms": { "description": "Required to schedule notifications" } }

CROSS-PLATFORM

WEB APIS

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

BATTERY STATUS API

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

VIBRATION API

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

NETWORK INFORMATION API

NETWORK INFORMATION API

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

PAGE VISIBILITY

PAGE VISIBILITY

document.addEventListener("visibilitychange", function () { if (document.hidden) { console.log("App is hidden"); } else { console.log("App has focus"); } });

PUSH NOTIFICATIONS

WEB APIS (PRIVILEGED APPS)

Device Storage API

Browser API

TCP Socket API

Contacts API

systemXHR

CONTACTS API

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

CERTIFIED APPS = THE OS :)

WEB ACTIVITIES

GET A PHOTO?

var getphoto = new MozActivity({ name: "pick", data: { type: ["image/png", "image/jpeg"], "image/jpg"] } }); !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};

APP DISTRIBUTION

FIREFOX OS MARKETPLACE

https://marketplace.firefox.com/

INSTALL FROM THE WEB…

DYNAMIC APP WEB SEARCH

DEVELOPMENT ENVIRONMENT

DEVELOPER ENVIRONMENT

FIREFOX OS BOILERPLATE APP

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

PROTOTYPING WITH JSFIDDLE

https://hacks.mozilla.org/2013/08/using-jsfiddle-to-prototype-firefox-os-apps/

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

BUILDING BLOCKS?

CERTIFIED APPS BUILDING BLOCKS

http://buildingfirefoxos.com/

CERTIFIED APPS BUILDING BLOCKS

http://buildingfirefoxos.com/

MOZILLA BRICK

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

MOZILLA BRICK<x-flipbox> <div>I'm the front face.</div> <div>And I'm the back face.</div> </x-flipbox> !

//JavaScript toggleButton.addEventListener("click", function() { flipBox.toggle(); });

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

CORDOVA IMPLEMENTATION APIS

• Camera • Contacts • Device • Device-motion • Geolocation • Orientation • Vibration

CORDOVA IMPLEMENTATION APIS

$ sudo npm install -g cordova

$ cordova create hello com.example.hello HelloWorld

$ cd hello

$ cordova platform add firefoxos

$ cordova prepare firefoxos

CAMERA API$ cordova plugin add org.apache.cordova.camera !

//Cordova code navigator.camera.getPicture(function (src) { var img = document.createElement('img'); img.id = 'slide'; img.src = src; }, function () {}, { destinationType: 1 });

WHAT’S COOKING?

MORE WEB APIS…

Resource lock API

UDP Datagram Socket API

Peer to Peer API

WebNFC

WebUSB

HTTP-cache API

Calendar API

Spellcheck API

LogAPI

Keyboard/IME API

WebRTC

FileHandle API

Sync API

APPMAKER!

Resource lock API

UDP Datagram Socket API

Peer to Peer API

WebNFC

WebUSB

HTTP-cache API

Calendar API

Spellcheck API

LogAPI

Keyboard/IME API

WebRTC

FileHandle API

Sync API

WHERE TO GET INFO?

https://marketplace.firefox.com/developers/

DEVELOPER HUB

https://hacks.mozilla.org/category/firefox-os/

MOZILLA DEVELOPER BLOG

http://mozilla.github.io/app-basics-videos/

FIREFOX OS VIDEO SERIES

https://developer.mozilla.org/en/docs/Mozilla/Firefox_OS

FIREFOX OS WIKI

TO WRAP UP…

https://hacks.mozilla.org/2013/12/write-elsewhere-run-on-firefox/

! Aquarium Plants (Android w/ hand-coded native wrapper) Calc (iOS w/ hand-coded native wrapper) Calcula Hipoteca (Amazon Appstore) Captain Rogers (HTML5 Desktop) Cartelera Panama (Appcelerator Titanium) Fresh Food Finder (PhoneGap) Picross (WebOS) Reditr (Chrome Dev Store) Speed Cube Timer (Blackberry Webworks) Squarez (C++) Touch 12i (Windows Phone/ HTML5)

NOTHING IS WASTED…

THANKS! CHRIS HEILMANN @CODEPO8