Mozilla Web Apps - Super-VanJS
-
Upload
robert-nyman -
Category
Technology
-
view
3.923 -
download
0
description
Transcript of Mozilla Web Apps - Super-VanJS
![Page 1: Mozilla Web Apps - Super-VanJS](https://reader034.fdocuments.net/reader034/viewer/2022042623/54001e5b8d7f7249088b48ab/html5/thumbnails/1.jpg)
Mozilla Web AppsBuilding apps with web technology
![Page 2: Mozilla Web Apps - Super-VanJS](https://reader034.fdocuments.net/reader034/viewer/2022042623/54001e5b8d7f7249088b48ab/html5/thumbnails/2.jpg)
![Page 3: Mozilla Web Apps - Super-VanJS](https://reader034.fdocuments.net/reader034/viewer/2022042623/54001e5b8d7f7249088b48ab/html5/thumbnails/3.jpg)
![Page 4: Mozilla Web Apps - Super-VanJS](https://reader034.fdocuments.net/reader034/viewer/2022042623/54001e5b8d7f7249088b48ab/html5/thumbnails/4.jpg)
![Page 5: Mozilla Web Apps - Super-VanJS](https://reader034.fdocuments.net/reader034/viewer/2022042623/54001e5b8d7f7249088b48ab/html5/thumbnails/5.jpg)
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
![Page 6: Mozilla Web Apps - Super-VanJS](https://reader034.fdocuments.net/reader034/viewer/2022042623/54001e5b8d7f7249088b48ab/html5/thumbnails/6.jpg)
@robertnyman@mozhacks
![Page 7: Mozilla Web Apps - Super-VanJS](https://reader034.fdocuments.net/reader034/viewer/2022042623/54001e5b8d7f7249088b48ab/html5/thumbnails/7.jpg)
![Page 8: Mozilla Web Apps - Super-VanJS](https://reader034.fdocuments.net/reader034/viewer/2022042623/54001e5b8d7f7249088b48ab/html5/thumbnails/8.jpg)
"Very emotional. But I don't like it."
![Page 11: Mozilla Web Apps - Super-VanJS](https://reader034.fdocuments.net/reader034/viewer/2022042623/54001e5b8d7f7249088b48ab/html5/thumbnails/11.jpg)
![Page 12: Mozilla Web Apps - Super-VanJS](https://reader034.fdocuments.net/reader034/viewer/2022042623/54001e5b8d7f7249088b48ab/html5/thumbnails/12.jpg)
![Page 13: Mozilla Web Apps - Super-VanJS](https://reader034.fdocuments.net/reader034/viewer/2022042623/54001e5b8d7f7249088b48ab/html5/thumbnails/13.jpg)
On which platforms will Web Apps run?
![Page 14: Mozilla Web Apps - Super-VanJS](https://reader034.fdocuments.net/reader034/viewer/2022042623/54001e5b8d7f7249088b48ab/html5/thumbnails/14.jpg)
Introducing Web Runtime - WebRT
![Page 15: Mozilla Web Apps - Super-VanJS](https://reader034.fdocuments.net/reader034/viewer/2022042623/54001e5b8d7f7249088b48ab/html5/thumbnails/15.jpg)
Currently:
WindowsMacAndroid
![Page 16: Mozilla Web Apps - Super-VanJS](https://reader034.fdocuments.net/reader034/viewer/2022042623/54001e5b8d7f7249088b48ab/html5/thumbnails/16.jpg)
Future:
As many as possible
![Page 18: Mozilla Web Apps - Super-VanJS](https://reader034.fdocuments.net/reader034/viewer/2022042623/54001e5b8d7f7249088b48ab/html5/thumbnails/18.jpg)
What's needed to run/install a Web App?
![Page 19: Mozilla Web Apps - Super-VanJS](https://reader034.fdocuments.net/reader034/viewer/2022042623/54001e5b8d7f7249088b48ab/html5/thumbnails/19.jpg)
The Mozilla Labs App Runtime extension
https://addons.mozilla.org/en-US/firefox/addon/app-runtime/
![Page 20: Mozilla Web Apps - Super-VanJS](https://reader034.fdocuments.net/reader034/viewer/2022042623/54001e5b8d7f7249088b48ab/html5/thumbnails/20.jpg)
![Page 21: Mozilla Web Apps - Super-VanJS](https://reader034.fdocuments.net/reader034/viewer/2022042623/54001e5b8d7f7249088b48ab/html5/thumbnails/21.jpg)
![Page 22: Mozilla Web Apps - Super-VanJS](https://reader034.fdocuments.net/reader034/viewer/2022042623/54001e5b8d7f7249088b48ab/html5/thumbnails/22.jpg)
HTML5-based WebRT: include.js
Available at:http://myapps.mozillalabs.com/jsapi/include.js
![Page 23: Mozilla Web Apps - Super-VanJS](https://reader034.fdocuments.net/reader034/viewer/2022042623/54001e5b8d7f7249088b48ab/html5/thumbnails/23.jpg)
![Page 25: Mozilla Web Apps - Super-VanJS](https://reader034.fdocuments.net/reader034/viewer/2022042623/54001e5b8d7f7249088b48ab/html5/thumbnails/25.jpg)
Android App:Mozilla Labs App Runtime for Android
Available at:https://developer.mozilla.org/en/Apps#Web_runtime
![Page 26: Mozilla Web Apps - Super-VanJS](https://reader034.fdocuments.net/reader034/viewer/2022042623/54001e5b8d7f7249088b48ab/html5/thumbnails/26.jpg)
![Page 27: Mozilla Web Apps - Super-VanJS](https://reader034.fdocuments.net/reader034/viewer/2022042623/54001e5b8d7f7249088b48ab/html5/thumbnails/27.jpg)
Developing a Web App
![Page 28: Mozilla Web Apps - Super-VanJS](https://reader034.fdocuments.net/reader034/viewer/2022042623/54001e5b8d7f7249088b48ab/html5/thumbnails/28.jpg)
Open Web technologies:
HTML5, CSS, JavaScript
A manifest file
![Page 29: Mozilla Web Apps - Super-VanJS](https://reader034.fdocuments.net/reader034/viewer/2022042623/54001e5b8d7f7249088b48ab/html5/thumbnails/29.jpg)
Manifest file
![Page 30: Mozilla Web Apps - Super-VanJS](https://reader034.fdocuments.net/reader034/viewer/2022042623/54001e5b8d7f7249088b48ab/html5/thumbnails/30.jpg)
{ "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"}
![Page 31: Mozilla Web Apps - Super-VanJS](https://reader034.fdocuments.net/reader034/viewer/2022042623/54001e5b8d7f7249088b48ab/html5/thumbnails/31.jpg)
MIME type:
application/x-web-app-manifest+json
![Page 32: Mozilla Web Apps - Super-VanJS](https://reader034.fdocuments.net/reader034/viewer/2022042623/54001e5b8d7f7249088b48ab/html5/thumbnails/32.jpg)
Apache - in mime.types:
application/x-web-app-manifest+json webapp
Apache - in .htaccess:
AddType application/x-web-app-manifest+json webapp
![Page 33: Mozilla Web Apps - Super-VanJS](https://reader034.fdocuments.net/reader034/viewer/2022042623/54001e5b8d7f7249088b48ab/html5/thumbnails/33.jpg)
NGinx - in mime.types:
application/x-web-app-manifest+json webapp;
![Page 34: Mozilla Web Apps - Super-VanJS](https://reader034.fdocuments.net/reader034/viewer/2022042623/54001e5b8d7f7249088b48ab/html5/thumbnails/34.jpg)
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.
![Page 35: Mozilla Web Apps - Super-VanJS](https://reader034.fdocuments.net/reader034/viewer/2022042623/54001e5b8d7f7249088b48ab/html5/thumbnails/35.jpg)
curl -I http://localhost/abbainfo/manifest.webapp
![Page 36: Mozilla Web Apps - Super-VanJS](https://reader034.fdocuments.net/reader034/viewer/2022042623/54001e5b8d7f7249088b48ab/html5/thumbnails/36.jpg)
Installing a Web App
![Page 37: Mozilla Web Apps - Super-VanJS](https://reader034.fdocuments.net/reader034/viewer/2022042623/54001e5b8d7f7249088b48ab/html5/thumbnails/37.jpg)
navigator.mozApps.install( URLToManifestFile, installData, sucessCallback, errorCallback);
![Page 38: Mozilla Web Apps - Super-VanJS](https://reader034.fdocuments.net/reader034/viewer/2022042623/54001e5b8d7f7249088b48ab/html5/thumbnails/38.jpg)
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); } );}
![Page 39: Mozilla Web Apps - Super-VanJS](https://reader034.fdocuments.net/reader034/viewer/2022042623/54001e5b8d7f7249088b48ab/html5/thumbnails/39.jpg)
Errors
denied: permissionDenied: manifestURLError: networkError: manifestParseError:invalidManifest:
User refuses to install the appSite is not allowed to trigger the installationURL to the manifest is malformedapp host is unreachablemanifest contains syntax errorsmanifest contains semantic errors
![Page 40: Mozilla Web Apps - Super-VanJS](https://reader034.fdocuments.net/reader034/viewer/2022042623/54001e5b8d7f7249088b48ab/html5/thumbnails/40.jpg)
Content
![Page 41: Mozilla Web Apps - Super-VanJS](https://reader034.fdocuments.net/reader034/viewer/2022042623/54001e5b8d7f7249088b48ab/html5/thumbnails/41.jpg)
<!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>
![Page 42: Mozilla Web Apps - Super-VanJS](https://reader034.fdocuments.net/reader034/viewer/2022042623/54001e5b8d7f7249088b48ab/html5/thumbnails/42.jpg)
offline & localStorage
![Page 43: Mozilla Web Apps - Super-VanJS](https://reader034.fdocuments.net/reader034/viewer/2022042623/54001e5b8d7f7249088b48ab/html5/thumbnails/43.jpg)
sessionStorage.setItem("Swedes", "Sedins");console.log(sessionStorage.getItem("Swedes"));
![Page 44: Mozilla Web Apps - Super-VanJS](https://reader034.fdocuments.net/reader034/viewer/2022042623/54001e5b8d7f7249088b48ab/html5/thumbnails/44.jpg)
localStorage.setItem("Bryan Adams", "Musician");
![Page 45: Mozilla Web Apps - Super-VanJS](https://reader034.fdocuments.net/reader034/viewer/2022042623/54001e5b8d7f7249088b48ab/html5/thumbnails/45.jpg)
var ryanReynolds = { "startedIn" : "Hillside", "movie" : "Green Lantern"};
localStorage.setItem("ryanReynolds", JSON.stringify(anthonyWeiner));
console.log(typeof JSON.parse(localStorage.getItem("ryanReynolds")));
![Page 46: Mozilla Web Apps - Super-VanJS](https://reader034.fdocuments.net/reader034/viewer/2022042623/54001e5b8d7f7249088b48ab/html5/thumbnails/46.jpg)
<!DOCTYPE html><html manifest="offline.appcache"><head>...
![Page 47: Mozilla Web Apps - Super-VanJS](https://reader034.fdocuments.net/reader034/viewer/2022042623/54001e5b8d7f7249088b48ab/html5/thumbnails/47.jpg)
CACHE MANIFEST
# VERSION 10
CACHE:offline.htmlbase.css
FALLBACK:online.css offline.css
NETWORK:/live-updates
![Page 48: Mozilla Web Apps - Super-VanJS](https://reader034.fdocuments.net/reader034/viewer/2022042623/54001e5b8d7f7249088b48ab/html5/thumbnails/48.jpg)
IndexedDB
![Page 49: Mozilla Web Apps - Super-VanJS](https://reader034.fdocuments.net/reader034/viewer/2022042623/54001e5b8d7f7249088b48ab/html5/thumbnails/49.jpg)
var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
var request = indexedDB.open("ABBADatabase");
![Page 50: Mozilla Web Apps - Super-VanJS](https://reader034.fdocuments.net/reader034/viewer/2022042623/54001e5b8d7f7249088b48ab/html5/thumbnails/50.jpg)
var request = indexedDB.open("ABBADatabase", 2), customerData = [ {ssn: "444-44-4444", name: "Bill", age: 35, email: "[email protected]"}, {ssn: "555-55-5555", name: "Donna", age: 32, email: "[email protected]"} ]; 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]); }};
![Page 51: Mozilla Web Apps - Super-VanJS](https://reader034.fdocuments.net/reader034/viewer/2022042623/54001e5b8d7f7249088b48ab/html5/thumbnails/51.jpg)
Fullscreen
![Page 52: Mozilla Web Apps - Super-VanJS](https://reader034.fdocuments.net/reader034/viewer/2022042623/54001e5b8d7f7249088b48ab/html5/thumbnails/52.jpg)
<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>
![Page 53: Mozilla Web Apps - Super-VanJS](https://reader034.fdocuments.net/reader034/viewer/2022042623/54001e5b8d7f7249088b48ab/html5/thumbnails/53.jpg)
mozRequestFullScreenWithKeys?
![Page 54: Mozilla Web Apps - Super-VanJS](https://reader034.fdocuments.net/reader034/viewer/2022042623/54001e5b8d7f7249088b48ab/html5/thumbnails/54.jpg)
html:-moz-full-screen { background: red;}
html:-webkit-full-screen { background: red;}
![Page 55: Mozilla Web Apps - Super-VanJS](https://reader034.fdocuments.net/reader034/viewer/2022042623/54001e5b8d7f7249088b48ab/html5/thumbnails/55.jpg)
![Page 56: Mozilla Web Apps - Super-VanJS](https://reader034.fdocuments.net/reader034/viewer/2022042623/54001e5b8d7f7249088b48ab/html5/thumbnails/56.jpg)
![Page 57: Mozilla Web Apps - Super-VanJS](https://reader034.fdocuments.net/reader034/viewer/2022042623/54001e5b8d7f7249088b48ab/html5/thumbnails/57.jpg)
Marketplace
![Page 59: Mozilla Web Apps - Super-VanJS](https://reader034.fdocuments.net/reader034/viewer/2022042623/54001e5b8d7f7249088b48ab/html5/thumbnails/59.jpg)
![Page 61: Mozilla Web Apps - Super-VanJS](https://reader034.fdocuments.net/reader034/viewer/2022042623/54001e5b8d7f7249088b48ab/html5/thumbnails/61.jpg)
Dev tools
![Page 62: Mozilla Web Apps - Super-VanJS](https://reader034.fdocuments.net/reader034/viewer/2022042623/54001e5b8d7f7249088b48ab/html5/thumbnails/62.jpg)
![Page 63: Mozilla Web Apps - Super-VanJS](https://reader034.fdocuments.net/reader034/viewer/2022042623/54001e5b8d7f7249088b48ab/html5/thumbnails/63.jpg)
![Page 64: Mozilla Web Apps - Super-VanJS](https://reader034.fdocuments.net/reader034/viewer/2022042623/54001e5b8d7f7249088b48ab/html5/thumbnails/64.jpg)
http://groups.google.com/group/mozilla-apps
![Page 65: Mozilla Web Apps - Super-VanJS](https://reader034.fdocuments.net/reader034/viewer/2022042623/54001e5b8d7f7249088b48ab/html5/thumbnails/65.jpg)
irc.mozilla.org
#openwebapps
![Page 66: Mozilla Web Apps - Super-VanJS](https://reader034.fdocuments.net/reader034/viewer/2022042623/54001e5b8d7f7249088b48ab/html5/thumbnails/66.jpg)
Try new things
![Page 67: Mozilla Web Apps - Super-VanJS](https://reader034.fdocuments.net/reader034/viewer/2022042623/54001e5b8d7f7249088b48ab/html5/thumbnails/67.jpg)
Robert [email protected]: @robertnyman
robertnyman.com/speaking/robertnyman.com/html5/robertnyman.com/css3/