Bringing the open web and APIs to mobile devices with Firefox OS - Whisky Web, Scotland

Bringing the Open Web & APIs to
mobile devices with Firefox OS

Firefox OS

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

https://developer.mozilla.org/docs/Apps/Getting_Started

Develop Web App using
1. HTML5, CSS, & Javascript

2. Create an app manifest ﬁle

3. Publish/install the app

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, oﬄine 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 ﬁle

Create a ﬁle 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
http://appmanifest.org/

Serve with Content-type/MIME type:

application/x-web-app-manifest+json

Apache - in mime.types:

application/x-web-app-manifest+json webapp

Apache - in .htaccess:

AddType application/x-web-app-manifest+json webapp

NGinx - in mime.types:

types {
text/html html htm shtml;
text/css css;
text/xml xml;
application/x-web-app-manifest+json webapp;
}

IIS:

In IIS Manager, right-click the local
computer, and click Properties.

Click the MIME Types button.

Click New.

In the Extension box, type the file name
extension.

In the MIME type box, type a description
that exactly matches the file type defined
on the computer.

Click OK.

curl -I http://mozillalabs.com/manifest.webapp

https://marketplace.firefox.com/

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

var request = navigator.mozApps.install(
"http://mozillalabs.com/MozillaBall.webapp",
{
user_id: "some_user"
}
);

request.onsuccess = function() {
// Success! Notiﬁcation, launch page etc
}

request.onerror = function() {
// Failed. this.error.name has details
}

A packaged app is an Open Web App that has all of its resources
(HTML, CSS, JavaScript, app manifest, and so on) contained in a zip
ﬁle, instead of having its resources on a Web server.

A packaged app is simply a zip ﬁle with the app manifest in its root
directory. The manifest must be named manifest.webapp.

Can be privileged apps with more API access than hosted apps

Resources are accessed from the zip ﬁle, which is stored on the device where the
app is installed)

Enforce a speciﬁc Content Security Policy for all application content

Can embed remote content in iframes, but that content will not have access to
privileged APIs nor will it have the default CSP applied to it

https://developer.mozilla.org/docs/Apps/
For_Web_developers

https://wiki.mozilla.org/WebAPI

Web Content Certiﬁed Web App

Regular web content Device-critical applications

Installed Web App

A regular web app

Privileged Web App

More access, more responsibility

https://wiki.mozilla.org/
WebAPI#Planned_for_initial_release_of_B2G_.
28aka_Basecamp.29

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

Vibration API (W3C) Web Activities
Screen Orientation Push Notiﬁcations API
Geolocation API WebFM API
Mouse Lock API (W3C) WebPayment
Open WebApps IndexedDB (W3C)
Network Information API (W3C) Ambient light sensor
Battery Status API (W3C) Proximity sensor
Alarm API Notiﬁcation

REGULAR APIS

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

var notification = navigator.mozNotification;
notification.createNotification(
"See this",
"This is a notification",
iconURL
);

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

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

// Vibrate for one second
navigator.vibrate(1000);

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

// Vibrate for 5 seconds

// Turn off vibration

var pay = navigator.mozPay(paymentToken);
pay.onsuccess = function (event) {
// Weee! Money!
};

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

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

window.addEventListener("devicelight", function (event) {
// The level of the ambient light in lux
});

window.addEventListener("lightlevel", function (event) {
// Possible values: "normal", "bright", "dim"
});

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

Device Storage API
Browser API
TCP Socket API
Contacts API
systemXHR

PRIVILEGED APIS

var deviceStorage = navigator.getDeviceStorage("videos");

// "external", "shared", or "default".
deviceStorage.type;

// Add a file - returns DOMRequest with file name
deviceStorage.add(blob);

// Same as .add, with provided name
deviceStorage.addNamed(blob, name);

// Returns DOMRequest/non-editable File object
deviceStorage.get(name);

// Returns editable FileHandle object
deviceStorage.getEditable(name);

// Returns DOMRequest with success or failure
deviceStorage.delete(name);

// Enumerates files
deviceStorage.enumerate([directory]);

// Enumerates files as FileHandles
deviceStorage.enumerateEditable([directory]);

WebTelephony WebBluetooth
WebSMS Permissions API
Idle API Network Stats API
Settings API Camera API
Power Management API Time/Clock API
Mobile Connection API Attention screen
WiFi Information API Voicemail

CERTIFIED APIS

// Telephony object
var 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 call
var cal = tel.dial(“123456789”);

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

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

// SMS object
var sms = navigator.mozSMS;

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

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

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

var register = navigator.mozRegisterActivityHandler({
name: "view",
disposition: "inline",
filters: {
type: "image/png"
}
});

register.onerror = function () {
console.log("Failed to register activity");
}

navigator.mozSetMessageHandler("activity", function (a) {
var img = getImageObject();
img.src = a.source.url;
// Call a.postResult() or a.postError() if
// the activity should return a value
});

Resource lock API Spellcheck API
UDP Datagram Socket API LogAPI
Peer to Peer API Keyboard/IME API
WebNFC WebRTC
WebUSB FileHandle API
HTTP-cache API Sync API
Calendar API

Dialer Alarm Clock

Contacts Camera

Settings Notes

SMS First Run Experience

Web browser Notiﬁcations

Gallery Home Screen

Video Player Mozilla Marketplace

Music Player System Updater

E-mail (POP, IMAP) Localization Support

Calendar

https://hacks.mozilla.org/2013/01/hacking-gaia-for-ﬁrefox-
os-part-1/

https://addons.mozilla.org/ﬁrefox/addon/ﬁrefox-os-
simulator/

FIREFOX OS
BOILERPLATE APP

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

https://lists.mozilla.org/listinfo/dev-webapps

irc://irc.mozilla.org/
#openwebapps

Robert Nyman
robertnyman.com
robert@mozilla.com
Mozilla

@robertnyman

Bringing the open web and APIs to mobile devices with Firefox OS - Whisky Web, Scotland

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Bringing the open web and APIs to mobile devices with Firefox OS - Whisky Web, Scotland (20)

More from Robert Nyman (20)

Recently uploaded (20)

Bringing the open web and APIs to mobile devices with Firefox OS - Whisky Web, Scotland