JavaScript APIs - The Web is the Platform

JavaScript APIs -
The Web is the
Platform

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

<!DOCTYPE html>
<html manifest="offline.appcache">
<head>
...

CACHE MANIFEST

# VERSION 10

CACHE:
offline.html
base.css

FALLBACK:
online.css offline.css

NETWORK:
/live-updates

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

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

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

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

JavaScript APIs - The Web is the Platform

More Related Content

What's hot

Similar to JavaScript APIs - The Web is the Platform

More from Robert Nyman

Recently uploaded

JavaScript APIs - The Web is the Platform