1. The Open Web
and what it means

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

7. @robertnyman

14. <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>

15. POST request to https://browserid.org/verify with
two parameters:
curl -d "assertion=<ASSERTION>&audience=https://
mysite.com" "https://browserid.org/verify"

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

17. navigator.id.logout();

20. pdf.js

21. Web Apps

22. Open Web technologies:
HTML5, CSS, JavaScript
A manifest file

23. Manifest file

25. {
"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"
}

26. MIME type:
application/x-web-app-manifest+json

27. Installing a Web App

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

29. var mozApps = navigator.mozApps;
if (mozApps) {
navigator.mozApps.install(
"http://localhost/abbainfo/manifest.webapp",
{
"userID": "Robocop"
},
function () {
console.log("Worked!");
console.log(result);
},
function (result) {
console.log("Failed :-(");
console.log(result);
}
);
}

30. offline & localStorage

31. Web Apps and platforms

32. Introducing Web Runtime - WebRT

33. Currently:
Windows
Mac
Android

34. Future:
As many as
possible

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

39. HTML5-based WebRT:
include.js
Available at:
http://myapps.mozillalabs.com/
jsapi/include.js

41. https://myapps.mozillalabs.com/

42. Marketplace

44. Dev tools

47. Fullscreen

50. <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>

51. mozRequestFullScreenWithKeys?

52. html:-moz-full-screen {
background: red;
}
html:-webkit-full-screen {
background: red;
}

53. Camera

55. <input type="file" id="take-picture" accept="image/*">

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

57. Battery

59. // 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;

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

61. IndexedDB

62. // 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);

63. createObjectStore = function (dataBase) {
// Create an objectStore
dataBase.createObjectStore("elephants");
}
// Currently only in latest Firefox versions
request.onupgradeneeded = function (event) {
createObjectStore(event.target.result);
};

64. 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();
}

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

66. Boot to Gecko

69. https://github.com/andreasgal/B2G
https://github.com/andreasgal/gaia

71. Telephony & SMS

72. // 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");

73. // 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();

74. // 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);
};

75. Vibration

76. (function () {
document.querySelector("#vibrate-one-second").addEventListener("click",
function () {
navigator.mozVibrate(1000);
}, false);
document.querySelector("#vibrate-twice").addEventListener("click",
function () {
navigator.mozVibrate([200, 100, 200, 100]);
}, false);
document.querySelector("#vibrate-long-time").addEventListener("click",
function () {
navigator.mozVibrate(5000);
}, false);
document.querySelector("#vibrate-off").addEventListener("click",
function () {
navigator.mozVibrate(0);
}, false);
})();

77. Try new things

82. Take care of each other

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