Post on 29-Aug-2014
description
transcript
The Open Web and what it means
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
<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"}
navigator.id.logout();
pdf.js
Web Apps
Open Web technologies:
HTML5, CSS, JavaScript
A manifest file
Manifest file
{ "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
Installing a Web App
navigator.mozApps.install( URLToManifestFile, installData, sucessCallback, errorCallback);
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); } );}
offline & localStorage
Web Apps and platforms
Introducing Web Runtime - WebRT
Currently:
WindowsMacAndroid
Future:
As many as possible
What's needed to run/install a Web App?
HTML5-based WebRT: include.js
Available at:http://myapps.mozillalabs.com/jsapi/include.js
Marketplace
Dev tools
Fullscreen
<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>
mozRequestFullScreenWithKeys?
html:-moz-full-screen { background: red;}
html:-webkit-full-screen { background: red;}
<input type="file" id="take-picture" accept="image/*">
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); }};
Battery
// Get battery level in percentagevar batteryLevel = battery.level * 100 + "%";
// Get whether device is charging or notvar chargingStatus = battery.charging;
// Time until the device is fully chargedvar batteryCharged = battery.chargingTime;
// Time until the device is dischargedvar 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
// IndexedDBvar indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.OIndexedDB || window.msIndexedDB, IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.OIDBTransaction || window.msIDBTransaction, dbVersion = 1;
// Create/open databasevar request = indexedDB.open("elephantFiles", dbVersion);
createObjectStore = function (dataBase) { // Create an objectStore dataBase.createObjectStore("elephants");}
// Currently only in latest Firefox versionsrequest.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); };};
Boot to Gecko
https://github.com/andreasgal/B2G
https://github.com/andreasgal/gaia
Telephony & SMS
// Telephony objectvar 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 callvar call = tel.dial("123456789");
// Receiving a calltel.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 callcall.hangUp();
// SMS objectvar sms = navigator.mozSMS;
// Send a messagesms.send("123456789", "Hello world!");
// Recieve a messagesms.onrecieved = function (event) { // Read message console.log(event.message);};
Vibration
(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);})();
Try new things
Take care of each other
Robert Nymanrobnyman@mozilla.comTwitter: @robertnyman
robertnyman.com/speaking/robertnyman.com/html5/robertnyman.com/css3/