Mozilla Web Apps   Building apps with    web technology
Mozilla is aglobal non-profit dedicatedto putting youin control ofyour onlineexperience andshaping thefuture of theWeb for ...
@robertnyman@mozhacks
"Very emotional. But I dont like it."
On which platforms will Web Apps run?
Introducing Web Runtime - WebRT
Currently:WindowsMacAndroid
Future:As many aspossible
Whats needed to run/install a Web App?
The Mozilla Labs AppRuntime extensionhttps://addons.mozilla.org/en-US/firefox/addon/app-runtime/
HTML5-based WebRT:include.jsAvailable at:http://myapps.mozillalabs.com/jsapi/include.js
https://myapps.mozillalabs.com/
Android App:Mozilla Labs App Runtimefor AndroidAvailable at:https://developer.mozilla.org/en/Apps#Web_runtime
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
Apache - in mime.types:application/x-web-app-manifest+json webappApache - in .htaccess:AddType application/x-web-app-manif...
NGinx - in mime.types:application/x-web-app-manifest+json webapp;
IIS:In IIS Manager, right-click the local computer, and clickProperties.Click the MIME Types button.Click New.In the Exten...
curl -I http://localhost/abbainfo/manifest.webapp
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...
Errorsdenied:               User refuses to install the apppermissionDenied:     Site is not allowed to trigger the instal...
Content
<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>ABBAInfo</title>        <link rel="stylesheet"...
offline & localStorage
sessionStorage.setItem("Swedes", "Sedins");console.log(sessionStorage.getItem("Swedes"));
localStorage.setItem("Bryan Adams", "Musician");
var ryanReynolds = {    "startedIn" : "Hillside",    "movie" : "Green Lantern"};localStorage.setItem("ryanReynolds", JSON....
<!DOCTYPE html><html manifest="offline.appcache"><head>...
CACHE MANIFEST# VERSION 10CACHE:offline.htmlbase.cssFALLBACK:online.css offline.cssNETWORK:/live-updates
IndexedDB
var indexedDB = window.indexedDB || window.webkitIndexedDB|| window.mozIndexedDB || window.msIndexedDB;var request = index...
var request = indexedDB.open("ABBADatabase", 2),    customerData = [        {ssn: "444-44-4444", name: "Bill", age: 35, em...
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;}
Marketplace
https://apps-preview.mozilla.org/
Dev tools
http://groups.google.com/group/mozilla-apps
irc.mozilla.org#openwebapps
Try new things
Robert Nymanrobertnyman.com/speaking/ robnyman@mozilla.comrobertnyman.com/html5/    Twitter: @robertnymanrobertnyman.com/c...
Mozilla Web Apps - Super-VanJS
Mozilla Web Apps - Super-VanJS
Mozilla Web Apps - Super-VanJS
Mozilla Web Apps - Super-VanJS
Mozilla Web Apps - Super-VanJS
Mozilla Web Apps - Super-VanJS
Mozilla Web Apps - Super-VanJS
Mozilla Web Apps - Super-VanJS
Mozilla Web Apps - Super-VanJS
Mozilla Web Apps - Super-VanJS
Mozilla Web Apps - Super-VanJS
Mozilla Web Apps - Super-VanJS
Mozilla Web Apps - Super-VanJS
Mozilla Web Apps - Super-VanJS
Mozilla Web Apps - Super-VanJS
Mozilla Web Apps - Super-VanJS
Mozilla Web Apps - Super-VanJS
Mozilla Web Apps - Super-VanJS
Mozilla Web Apps - Super-VanJS
Upcoming SlideShare
Loading in...5
×

Mozilla Web Apps - Super-VanJS

3,565

Published on

Building apps with web technology

Published in: Technology, News & Politics
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,565
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
28
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

Mozilla Web Apps - Super-VanJS

  1. 1. Mozilla Web Apps Building apps with web technology
  2. 2. Mozilla is aglobal non-profit dedicatedto putting youin control ofyour onlineexperience andshaping thefuture of theWeb for thepublic good
  3. 3. @robertnyman@mozhacks
  4. 4. "Very emotional. But I dont like it."
  5. 5. On which platforms will Web Apps run?
  6. 6. Introducing Web Runtime - WebRT
  7. 7. Currently:WindowsMacAndroid
  8. 8. Future:As many aspossible
  9. 9. Whats needed to run/install a Web App?
  10. 10. The Mozilla Labs AppRuntime extensionhttps://addons.mozilla.org/en-US/firefox/addon/app-runtime/
  11. 11. HTML5-based WebRT:include.jsAvailable at:http://myapps.mozillalabs.com/jsapi/include.js
  12. 12. https://myapps.mozillalabs.com/
  13. 13. Android App:Mozilla Labs App Runtimefor AndroidAvailable at:https://developer.mozilla.org/en/Apps#Web_runtime
  14. 14. Developing a Web App
  15. 15. Open Web technologies:HTML5, CSS, JavaScriptA manifest file
  16. 16. Manifest file
  17. 17. { "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"}
  18. 18. MIME type:application/x-web-app-manifest+json
  19. 19. Apache - in mime.types:application/x-web-app-manifest+json webappApache - in .htaccess:AddType application/x-web-app-manifest+json webapp
  20. 20. NGinx - in mime.types:application/x-web-app-manifest+json webapp;
  21. 21. IIS:In IIS Manager, right-click the local computer, and clickProperties.Click the MIME Types button.Click New.In the Extension box, type the file name extension.In the MIME type box, type a description that exactlymatches the file type defined on the computer.Click OK.
  22. 22. curl -I http://localhost/abbainfo/manifest.webapp
  23. 23. Installing a Web App
  24. 24. navigator.mozApps.install( URLToManifestFile, installData, sucessCallback, errorCallback);
  25. 25. 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); } );}
  26. 26. Errorsdenied: User refuses to install the apppermissionDenied: Site is not allowed to trigger the installationmanifestURLError: URL to the manifest is malformednetworkError: app host is unreachablemanifestParseError: manifest contains syntax errorsinvalidManifest: manifest contains semantic errors
  27. 27. Content
  28. 28. <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>ABBAInfo</title> <link rel="stylesheet" href="css/base.css" type="text/css" media="screen"> </head> <body> <div id="container"> ABBA </div> <script type="text/javascript"> (function () { // Press the R key to reload the page window.addEventListener("keydown", function (evt) { if (evt.keyCode === 82) { location.reload(); } }, false); })(); </script> </body></html>
  29. 29. offline & localStorage
  30. 30. sessionStorage.setItem("Swedes", "Sedins");console.log(sessionStorage.getItem("Swedes"));
  31. 31. localStorage.setItem("Bryan Adams", "Musician");
  32. 32. var ryanReynolds = { "startedIn" : "Hillside", "movie" : "Green Lantern"};localStorage.setItem("ryanReynolds", JSON.stringify(anthonyWeiner));console.log(typeof JSON.parse(localStorage.getItem("ryanReynolds")));
  33. 33. <!DOCTYPE html><html manifest="offline.appcache"><head>...
  34. 34. CACHE MANIFEST# VERSION 10CACHE:offline.htmlbase.cssFALLBACK:online.css offline.cssNETWORK:/live-updates
  35. 35. IndexedDB
  36. 36. var indexedDB = window.indexedDB || window.webkitIndexedDB|| window.mozIndexedDB || window.msIndexedDB;var request = indexedDB.open("ABBADatabase");
  37. 37. var request = indexedDB.open("ABBADatabase", 2), customerData = [ {ssn: "444-44-4444", name: "Bill", age: 35, email: "bill@company.com"}, {ssn: "555-55-5555", name: "Donna", age: 32, email: "donna@home.org"} ];request.onerror = function(event) { // Handle errors.};request.onupgradeneeded = function(event) var objectStore = db.createObjectStore("customers", { keyPath: "ssn"} ); objectStore.createIndex("name", "name", { unique: false }); objectStore.createIndex("email", "email", { unique: true } ); for (var i in customerData) { objectStore.add(customerData[i]); }};
  38. 38. Fullscreen
  39. 39. <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>
  40. 40. mozRequestFullScreenWithKeys?
  41. 41. html:-moz-full-screen { background: red;}html:-webkit-full-screen { background: red;}
  42. 42. Marketplace
  43. 43. https://apps-preview.mozilla.org/
  44. 44. Dev tools
  45. 45. http://groups.google.com/group/mozilla-apps
  46. 46. irc.mozilla.org#openwebapps
  47. 47. Try new things
  48. 48. 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.

×