The Open Web and what it means

The Open Web
and what it means

Mozilla is a
global non-
proﬁt dedicated
to putting you
in control of
your online
experience and
shaping the
future of the
Web for the
public good

<button id="browser-id">Log in</button>

<script>
document.querySelector("#browser-id").onclick = function () {
navigator.id.get(function (assertion) {
if (assertion) {
AJAX request to your server with the assertion
}
});
}
</script>

POST request to https://browserid.org/verify with
two parameters:

curl -d "assertion=<ASSERTION>&audience=https://
mysite.com" "https://browserid.org/verify"

{
"status": "okay",
"email": "lloyd@example.com",
"audience": "https://mysite.com",
"expires": 1308859352261,
"issuer": "browserid.org"
}

Open Web technologies:

HTML5, CSS, JavaScript

A manifest ﬁle

{
"version": "1.0",
"name": "ABBAInfo",
"description": "Getting some ABBA info",
"icons": {
"16": "/abbainfo/images/icon-16.png",
"48": "/abbainfo/images/icon-48.png",
"128": "/abbainfo/images/icon-128.png"
},
"developer": {
"name": "Robert Nyman",
"url": "http://robertnyman.com"
},
"installs_allowed_from": [
"*"
],
"launch_path": "/abbainfo/",
"locales": {
},
"default_locale": "en"
}

MIME type:

application/x-web-app-manifest+json

navigator.mozApps.install(
URLToManifestFile,
installData,
sucessCallback,
errorCallback
);

Introducing Web Runtime - WebRT

Currently:

Windows
Mac
Android

What's needed to run/install a Web App?

HTML5-based WebRT:
include.js

Available at:
http://myapps.mozillalabs.com/
jsapi/include.js

https://myapps.mozillalabs.com/

<button id="view-fullscreen">Fullscreen</button>

<script type="text/javascript">
(function () {
var viewFullScreen = document.getElementById("view-fullscreen");
if (viewFullScreen) {
viewFullScreen.addEventListener("click", function () {
var docElm = document.documentElement;
if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
}
else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}
}, false);
}
})();
</script>

html:-moz-full-screen {
background: red;
}

html:-webkit-full-screen {
background: red;
}

takePicture.onchange = function (event) {
// Get a reference to the taken picture or chosen file
var files = event.target.files,
file;
if (files && files.length > 0) {
file = files[0];
// Get window.URL object
var URL = window.URL || window.webkitURL;

// Create ObjectURL
var imgURL = URL.createObjectURL(file);

// Set img src to ObjectURL
showPicture.src = imgURL;

// Revoke ObjectURL
URL.revokeObjectURL(imgURL);
}
};

// Get battery level in percentage
var batteryLevel = battery.level * 100 + "%";

// Get whether device is charging or not
var chargingStatus = battery.charging;

// Time until the device is fully charged
var batteryCharged = battery.chargingTime;

// Time until the device is discharged
var batteryDischarged = battery.dischargingTime;

battery.addEventLister("levelchange", function () {
// Device's battery level changed
}, false);

battery.addEventListener("chargingchange", function () {
// Device got plugged in to power, or unplugged
}, false);

battery.addEventListener("chargingtimechange", function () {
// Device's charging time changed
}, false);

battery.addEventListener("dischargingtimechange", function () {
// Device's discharging time changed
}, false);

// IndexedDB
var indexedDB = window.indexedDB || window.webkitIndexedDB ||
window.mozIndexedDB || window.OIndexedDB || window.msIndexedDB,
IDBTransaction = window.IDBTransaction ||
window.webkitIDBTransaction || window.OIDBTransaction ||
window.msIDBTransaction,
dbVersion = 1;

// Create/open database
var request = indexedDB.open("elephantFiles", dbVersion);

createObjectStore = function (dataBase) {
// Create an objectStore
dataBase.createObjectStore("elephants");
}

// Currently only in latest Firefox versions
request.onupgradeneeded = function (event) {
createObjectStore(event.target.result);
};

request.onsuccess = function (event) {
// Create XHR
var xhr = new XMLHttpRequest(),
blob;

xhr.open("GET", "elephant.png", true);

// Set the responseType to blob
xhr.responseType = "blob";

xhr.addEventListener("load", function () {
if (xhr.status === 200) {
// Blob as response
blob = xhr.response;

// Put the received blob into IndexedDB
putElephantInDb(blob);
}
}, false);
// Send XHR
xhr.send();
}

putElephantInDb = function (blob) {
// Open a transaction to the database
var transaction = db.transaction(["elephants"], IDBTransaction.READ_WRITE);

// Put the blob into the dabase
var put = transaction.objectStore("elephants").put(blob, "image");

// Retrieve the file that was just stored
transaction.objectStore("elephants").get("image").onsuccess = function (event) {
var imgFile = event.target.result;

// Get window.URL object
var URL = window.URL || window.webkitURL;

// Create and revoke ObjectURL
var imgURL = URL.createObjectURL(imgFile);

// Set img src to ObjectURL
var imgElephant = document.getElementById("elephant");
imgElephant.setAttribute("src", imgURL);

// Revoking ObjectURL
URL.revokeObjectURL(imgURL);
};
};

https://github.com/andreasgal/B2G

https://github.com/andreasgal/gaia

// 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 call = 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();

// SMS object
var sms = navigator.mozSMS;

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

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

Robert Nyman
robertnyman.com/speaking/ robnyman@mozilla.com
robertnyman.com/html5/ Twitter: @robertnyman
robertnyman.com/css3/

The Open Web and what it means

Recommended

More Related Content

What's hot (20)

Viewers also liked (9)

Similar to The Open Web and what it means (20)

More from Robert Nyman (20)

Recently uploaded (20)

The Open Web and what it means