Mozilla Web Apps - Super-VanJS

  • 3,365 views
Uploaded on

Building apps with web technology

Building apps with web technology

  • 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
3,365
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
28
Comments
0
Likes
7

Embeds 0

No embeds

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/