0
JavaScript APIs - The Web is the    Platform
@robertnyman@mozhacks
Developing a Web App
Open Web technologies:HTML5, CSS, JavaScriptA manifest file
Manifest file
{    "version": "1.0",    "name": "ABBAInfo",    "description": "Getting some ABBA info",    "icons": {        "16": "/abb...
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.we...
offline & localStorage
<!DOCTYPE html><html manifest="offline.appcache"><head>...
CACHE MANIFEST# VERSION 10CACHE:offline.htmlbase.cssFALLBACK:online.css offline.cssNETWORK:/live-updates
Web Apps and platforms
Introducing Web Runtime - WebRT
Currently:WindowsMacAndroid
Future:As many aspossible
Whats needed to run/install a Web App?
HTML5-based WebRT:include.jsAvailable at:http://myapps.mozillalabs.com/jsapi/include.js
https://myapps.mozillalabs.com/
Marketplace
Fullscreen
<button id="view-fullscreen">Fullscreen</button><script type="text/javascript">(function () {    var viewFullScreen = docu...
mozRequestFullScreenWithKeys?
html:-moz-full-screen {    background: red;}html:-webkit-full-screen {    background: red;}
Camera
<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.t...
Boot to Gecko
https://github.com/andreasgal/B2Ghttps://github.com/andreasgal/gaia
Telephony & SMS
// Telephony objectvar tel = navigator.mozTelephony;// Check if the phone is muted (read/write property)console.log(tel.mu...
// Receiving a calltel.onincoming = function (event) {    var incomingCall = event.call;     // Get the number of the inco...
// SMS objectvar sms = navigator.mozSMS;// Send a messagesms.send("123456789", "Hello world!");// Recieve a messagesms.onr...
Battery
// Get battery level in percentagevar batteryLevel = battery.level * 100 + "%";// Get whether device is charging or notvar...
battery.addEventLister("levelchange", function () {    // Devices battery level changed}, false);battery.addEventListener(...
Vibration
(function () {    document.querySelector("#vibrate-one-second").addEventListener("click",        function () {            ...
Try new things
Robert Nymanrobertnyman.com/speaking/ robnyman@mozilla.comrobertnyman.com/html5/    Twitter: @robertnymanrobertnyman.com/c...
JavaScript APIs - The Web is the Platform
JavaScript APIs - The Web is the Platform
JavaScript APIs - The Web is the Platform
JavaScript APIs - The Web is the Platform
JavaScript APIs - The Web is the Platform
JavaScript APIs - The Web is the Platform
JavaScript APIs - The Web is the Platform
JavaScript APIs - The Web is the Platform
JavaScript APIs - The Web is the Platform
JavaScript APIs - The Web is the Platform
JavaScript APIs - The Web is the Platform
JavaScript APIs - The Web is the Platform
JavaScript APIs - The Web is the Platform
JavaScript APIs - The Web is the Platform
JavaScript APIs - The Web is the Platform
JavaScript APIs - The Web is the Platform
JavaScript APIs - The Web is the Platform
JavaScript APIs - The Web is the Platform
Upcoming SlideShare
Loading in...5
×

JavaScript APIs - The Web is the Platform

4,964

Published on

Published in: Technology, Design
0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,964
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
48
Comments
0
Likes
10
Embeds 0
No embeds

No notes for slide

Transcript of "JavaScript APIs - The Web is the Platform"

  1. 1. JavaScript APIs - The Web is the Platform
  2. 2. @robertnyman@mozhacks
  3. 3. Developing a Web App
  4. 4. Open Web technologies:HTML5, CSS, JavaScriptA manifest file
  5. 5. Manifest file
  6. 6. { "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"}
  7. 7. MIME type:application/x-web-app-manifest+json
  8. 8. Installing a Web App
  9. 9. navigator.mozApps.install( URLToManifestFile, installData, sucessCallback, errorCallback);
  10. 10. 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); } );}
  11. 11. offline & localStorage
  12. 12. <!DOCTYPE html><html manifest="offline.appcache"><head>...
  13. 13. CACHE MANIFEST# VERSION 10CACHE:offline.htmlbase.cssFALLBACK:online.css offline.cssNETWORK:/live-updates
  14. 14. Web Apps and platforms
  15. 15. Introducing Web Runtime - WebRT
  16. 16. Currently:WindowsMacAndroid
  17. 17. Future:As many aspossible
  18. 18. Whats needed to run/install a Web App?
  19. 19. HTML5-based WebRT:include.jsAvailable at:http://myapps.mozillalabs.com/jsapi/include.js
  20. 20. https://myapps.mozillalabs.com/
  21. 21. Marketplace
  22. 22. Fullscreen
  23. 23. <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>
  24. 24. mozRequestFullScreenWithKeys?
  25. 25. html:-moz-full-screen { background: red;}html:-webkit-full-screen { background: red;}
  26. 26. Camera
  27. 27. <input type="file" id="take-picture" accept="image/*">
  28. 28. 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); }};
  29. 29. Boot to Gecko
  30. 30. https://github.com/andreasgal/B2Ghttps://github.com/andreasgal/gaia
  31. 31. Telephony & SMS
  32. 32. // 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");
  33. 33. // 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();
  34. 34. // SMS objectvar sms = navigator.mozSMS;// Send a messagesms.send("123456789", "Hello world!");// Recieve a messagesms.onrecieved = function (event) { // Read message console.log(event.message);};
  35. 35. Battery
  36. 36. // 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;
  37. 37. battery.addEventLister("levelchange", function () { // Devices battery level changed}, false);battery.addEventListener("chargingchange", function () { // Device got plugged in to power, or unplugged}, false);battery.addEventListener("chargingtimechange", function () { // Devices charging time changed}, false);battery.addEventListener("dischargingtimechange", function () { // Devices discharging time changed}, false);
  38. 38. Vibration
  39. 39. (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);})();
  40. 40. Try new things
  41. 41. Robert Nymanrobertnyman.com/speaking/ robnyman@mozilla.comrobertnyman.com/html5/ Twitter: @robertnymanrobertnyman.com/css3/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×