Mozilla Web Apps - Super-VanJS
8 likes8,893 views
This document provides an overview of Mozilla Web Apps including: - Web Apps can run on platforms like Windows, Mac, Android and more. - They are built with open web technologies like HTML5, CSS, and JavaScript. - A manifest file is needed to define the app and install it using the Mozilla Labs App Runtime extension. - Web Apps can use features like offline storage, IndexedDB, and fullscreen mode.
![{
"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"
}](https://image.slidesharecdn.com/web-apps-super-vanjs-120114153810-phpapp02/85/Mozilla-Web-Apps-Super-VanJS-30-320.jpg)
![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]);
}
};](https://image.slidesharecdn.com/web-apps-super-vanjs-120114153810-phpapp02/85/Mozilla-Web-Apps-Super-VanJS-50-320.jpg)
Mozilla Web Apps - Super-VanJS
- 1. Mozilla Web Apps Building apps with web technology
- 5. Mozilla is a global non- profit dedicated to putting you in control of your online experience and shaping the future of the Web for the public good
- 8. "Very emotional. But I don't like it."
- 13. On which platforms will Web Apps run?
- 14. Introducing Web Runtime - WebRT
- 18. What's needed to run/install a Web App?
- 19. The Mozilla Labs App Runtime extension https:// addons.mozilla.org/ en-US/firefox/addon/ app-runtime/
- 25. Android App: Mozilla Labs App Runtime for Android Available at: https:// developer.mozilla.org/en/ Apps#Web_runtime
- 27. Developing a Web App
- 28. Open Web technologies: HTML5, CSS, JavaScript A manifest file
- 29. Manifest file
- 30. { "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" }
- 32. Apache - in mime.types: application/x-web-app-manifest+json webapp Apache - in .htaccess: AddType application/x-web-app-manifest+json webapp
- 33. NGinx - in mime.types: application/x-web-app-manifest+json webapp;
- 34. IIS: In IIS Manager, right-click the local computer, and click Properties. 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 exactly matches the file type defined on the computer. Click OK.
- 36. Installing a Web App
- 37. navigator.mozApps.install( URLToManifestFile, installData, sucessCallback, errorCallback );
- 38. 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); } ); }
- 39. Errors denied: User refuses to install the app permissionDenied: Site is not allowed to trigger the installation manifestURLError: URL to the manifest is malformed networkError: app host is unreachable manifestParseError: manifest contains syntax errors invalidManifest: manifest contains semantic errors
- 40. Content
- 41. <!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>
- 45. var ryanReynolds = { "startedIn" : "Hillside", "movie" : "Green Lantern" }; localStorage.setItem("ryanReynolds", JSON.stringify(anthonyWeiner)); console.log(typeof JSON.parse(localStorage.getItem("ryanReynolds")));
- 47. CACHE MANIFEST # VERSION 10 CACHE: offline.html base.css FALLBACK: online.css offline.css NETWORK: /live-updates
- 48. IndexedDB
- 49. var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB; var request = indexedDB.open("ABBADatabase");
- 50. 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]); } };
- 51. Fullscreen
- 52. <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>
- 54. html:-moz-full-screen { background: red; } html:-webkit-full-screen { background: red; }
- 57. Marketplace
- 61. Dev tools
- 66. Try new things
- 67. Robert Nyman robertnyman.com/speaking/ robnyman@mozilla.com robertnyman.com/html5/ Twitter: @robertnyman robertnyman.com/css3/