firefox os, the open web & webapis - lxjs, portugal

44
Firefox OS, the Open Web & WebAPIs @robertnyman

Upload: robert-nyman

Post on 06-May-2015

2.297 views

Category:

Technology


0 download

TRANSCRIPT

Page 1: Firefox OS, the Open Web & WebAPIs - LXJS, Portugal

Firefox OS, the Open Web & WebAPIs @robertnyman

Page 2: Firefox OS, the Open Web & WebAPIs - LXJS, Portugal

“Bem Vindo”

Page 3: Firefox OS, the Open Web & WebAPIs - LXJS, Portugal
Page 4: Firefox OS, the Open Web & WebAPIs - LXJS, Portugal
Page 5: Firefox OS, the Open Web & WebAPIs - LXJS, Portugal
Page 6: Firefox OS, the Open Web & WebAPIs - LXJS, Portugal
Page 7: Firefox OS, the Open Web & WebAPIs - LXJS, Portugal
Page 8: Firefox OS, the Open Web & WebAPIs - LXJS, Portugal
Page 9: Firefox OS, the Open Web & WebAPIs - LXJS, Portugal

Using HTML5, CSS and JavaScript together with a number of APIs to build apps and customize the UI.

Firefox OS

Page 13: Firefox OS, the Open Web & WebAPIs - LXJS, Portugal

Open Web Apps

Page 14: Firefox OS, the Open Web & WebAPIs - LXJS, Portugal
Page 15: Firefox OS, the Open Web & WebAPIs - LXJS, Portugal

HTML5 + manifest file (JSON)

Page 16: Firefox OS, the Open Web & WebAPIs - LXJS, Portugal

{ "version": "1", "name": "Firefox OS Boilerplate App", "launch_path": "/index.html", "description": "Boilerplate Firefox OS app", "icons": { "16": "/images/logo16.png", "32": "/images/logo32.png", "48": "/images/logo48.png", "64": "/images/logo64.png", "128": "/images/logo128.png" }, "developer": { "name": "Robert Nyman", "url": "http://robertnyman.com" }, "installs_allowed_from": ["*"], "default_locale": "en"}

Page 17: Firefox OS, the Open Web & WebAPIs - LXJS, Portugal

Packaged & hosted apps

Page 18: Firefox OS, the Open Web & WebAPIs - LXJS, Portugal

WebAPIs

Page 19: Firefox OS, the Open Web & WebAPIs - LXJS, Portugal
Page 20: Firefox OS, the Open Web & WebAPIs - LXJS, Portugal

Security Levels

Page 21: Firefox OS, the Open Web & WebAPIs - LXJS, Portugal

Web Content

Regular web content

Installed Web App

A regular web app

Privileged Web App

More access, more responsibility

Certified Web App

Device-critical applications

Page 23: Firefox OS, the Open Web & WebAPIs - LXJS, Portugal

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

Page 25: Firefox OS, the Open Web & WebAPIs - LXJS, Portugal

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

REGULAR APIS

Page 26: Firefox OS, the Open Web & WebAPIs - LXJS, Portugal

VIBRATION API

Page 27: Firefox OS, the Open Web & WebAPIs - LXJS, Portugal

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

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

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

// Turn off vibrationnavigator.vibrate(0);

Page 28: Firefox OS, the Open Web & WebAPIs - LXJS, Portugal

DEVICEPROXIMITY

Page 29: Firefox OS, the Open Web & WebAPIs - LXJS, Portugal

window.addEventListener("deviceproximity", function (event) { // Current device proximity, in centimeters console.log(event.value); // The maximum sensing distance the sensor is // able to report, in centimeters console.log(event.max); // The minimum sensing distance the sensor is // able to report, in centimeters console.log(event.min);});

Page 30: Firefox OS, the Open Web & WebAPIs - LXJS, Portugal

AMBIENT LIGHT EVENTS

Page 31: Firefox OS, the Open Web & WebAPIs - LXJS, Portugal

window.addEventListener("devicelight", function (event) { // The lux values for "dim" typically begin below 50, // and the values for "bright" begin above 10000 console.log(event.value);});

Page 32: Firefox OS, the Open Web & WebAPIs - LXJS, Portugal

PAGE VISIBILITY

Page 33: Firefox OS, the Open Web & WebAPIs - LXJS, Portugal

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

Page 34: Firefox OS, the Open Web & WebAPIs - LXJS, Portugal

Device Storage API

Browser API

TCP Socket API

Contacts API

systemXHR

PRIVILEGED APIS

Page 35: Firefox OS, the Open Web & WebAPIs - LXJS, Portugal

WEB ACTIVITIES

Page 36: Firefox OS, the Open Web & WebAPIs - LXJS, Portugal
Page 37: Firefox OS, the Open Web & WebAPIs - LXJS, Portugal

var activity = new MozActivity({ name: "view", data: { type: "image/png", url: ... }});

activity.onsuccess = function () { console.log("Showing the image!");};

activity.onerror = function () { console.log("Can't view the image!");};

Page 38: Firefox OS, the Open Web & WebAPIs - LXJS, Portugal

{ "activities": { "share": { "filters": { "type": ["image/png", "image/gif"] } "href": "sharing.html", "disposition": "window" } }}

Page 39: Firefox OS, the Open Web & WebAPIs - LXJS, Portugal

Get started

Page 43: Firefox OS, the Open Web & WebAPIs - LXJS, Portugal