Mozilla Web Apps - Super-VanJS
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,181
On Slideshare
4,120
From Embeds
61
Number of Embeds
4

Actions

Shares
Downloads
28
Comments
0
Likes
7

Embeds 61

http://lanyrd.com 52
http://a0.twimg.com 4
http://us-w1.rockmelt.com 4
http://paper.li 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Mozilla Web Apps Building apps with web technology
  • 2. Mozilla is aglobal non-profit dedicatedto putting youin control ofyour onlineexperience andshaping thefuture of theWeb for thepublic good
  • 3. @robertnyman@mozhacks
  • 4. "Very emotional. But I dont like it."
  • 5. On which platforms will Web Apps run?
  • 6. Introducing Web Runtime - WebRT
  • 7. Currently:WindowsMacAndroid
  • 8. Future:As many aspossible
  • 9. Whats needed to run/install a Web App?
  • 10. The Mozilla Labs AppRuntime extensionhttps://addons.mozilla.org/en-US/firefox/addon/app-runtime/
  • 11. HTML5-based WebRT:include.jsAvailable at:http://myapps.mozillalabs.com/jsapi/include.js
  • 12. https://myapps.mozillalabs.com/
  • 13. Android App:Mozilla Labs App Runtimefor AndroidAvailable at:https://developer.mozilla.org/en/Apps#Web_runtime
  • 14. Developing a Web App
  • 15. Open Web technologies:HTML5, CSS, JavaScriptA manifest file
  • 16. Manifest file
  • 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. MIME type:application/x-web-app-manifest+json
  • 19. Apache - in mime.types:application/x-web-app-manifest+json webappApache - in .htaccess:AddType application/x-web-app-manifest+json webapp
  • 20. NGinx - in mime.types:application/x-web-app-manifest+json webapp;
  • 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. curl -I http://localhost/abbainfo/manifest.webapp
  • 23. Installing a Web App
  • 24. navigator.mozApps.install( URLToManifestFile, installData, sucessCallback, errorCallback);
  • 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. 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. Content
  • 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. offline & localStorage
  • 30. sessionStorage.setItem("Swedes", "Sedins");console.log(sessionStorage.getItem("Swedes"));
  • 31. localStorage.setItem("Bryan Adams", "Musician");
  • 32. var ryanReynolds = { "startedIn" : "Hillside", "movie" : "Green Lantern"};localStorage.setItem("ryanReynolds", JSON.stringify(anthonyWeiner));console.log(typeof JSON.parse(localStorage.getItem("ryanReynolds")));
  • 33. <!DOCTYPE html><html manifest="offline.appcache"><head>...
  • 34. CACHE MANIFEST# VERSION 10CACHE:offline.htmlbase.cssFALLBACK:online.css offline.cssNETWORK:/live-updates
  • 35. IndexedDB
  • 36. var indexedDB = window.indexedDB || window.webkitIndexedDB|| window.mozIndexedDB || window.msIndexedDB;var request = indexedDB.open("ABBADatabase");
  • 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. Fullscreen
  • 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. mozRequestFullScreenWithKeys?
  • 41. html:-moz-full-screen { background: red;}html:-webkit-full-screen { background: red;}
  • 42. Marketplace
  • 43. https://apps-preview.mozilla.org/
  • 44. Dev tools
  • 45. http://groups.google.com/group/mozilla-apps
  • 46. irc.mozilla.org#openwebapps
  • 47. Try new things
  • 48. Robert Nymanrobertnyman.com/speaking/ robnyman@mozilla.comrobertnyman.com/html5/ Twitter: @robertnymanrobertnyman.com/css3/