Embed Size (px)
DESCRIPTION
Citation preview
JavaScript APIs - The Web is the
Platform
@robertnyman@mozhacks
Developing a Web App
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
<!DOCTYPE html><html manifest="offline.appcache"><head>...
CACHE MANIFEST
# VERSION 10
CACHE:offline.htmlbase.css
FALLBACK:online.css offline.css
NETWORK:/live-updates
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
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); }};
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);};
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);
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
Robert [email protected]: @robertnyman
robertnyman.com/speaking/robertnyman.com/html5/robertnyman.com/css3/
