Post on 29-Aug-2014
description
Mozilla Web AppsBuilding apps with web technology
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
@robertnyman@mozhacks
"Very emotional. But I don't like it."
On which platforms will Web Apps run?
Introducing Web Runtime - WebRT
Currently:
WindowsMacAndroid
Future:
As many as possible
What's needed to run/install a Web App?
The Mozilla Labs App Runtime extension
https://addons.mozilla.org/en-US/firefox/addon/app-runtime/
HTML5-based WebRT: include.js
Available at:http://myapps.mozillalabs.com/jsapi/include.js
Android App:Mozilla Labs App Runtime for Android
Available at:https://developer.mozilla.org/en/Apps#Web_runtime
Developing a Web App
Open Web technologies:
HTML5, CSS, JavaScript
A manifest file
Manifest file
{ "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"}
MIME type:
application/x-web-app-manifest+json
Apache - in mime.types:
application/x-web-app-manifest+json webapp
Apache - in .htaccess:
AddType application/x-web-app-manifest+json webapp
NGinx - in mime.types:
application/x-web-app-manifest+json webapp;
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.
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.webapp", { "userID": "Robocop" }, function () { console.log("Worked!"); console.log(result); }, function (result) { console.log("Failed :-("); console.log(result); } );}
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
Content
<!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>
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.stringify(anthonyWeiner));
console.log(typeof JSON.parse(localStorage.getItem("ryanReynolds")));
<!DOCTYPE html><html manifest="offline.appcache"><head>...
CACHE MANIFEST
# VERSION 10
CACHE:offline.htmlbase.css
FALLBACK:online.css offline.css
NETWORK:/live-updates
IndexedDB
var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
var request = indexedDB.open("ABBADatabase");
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]); }};
Fullscreen
<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>
mozRequestFullScreenWithKeys?
html:-moz-full-screen { background: red;}
html:-webkit-full-screen { background: red;}
Marketplace
Dev tools
http://groups.google.com/group/mozilla-apps
irc.mozilla.org
#openwebapps
Try new things
Robert Nymanrobnyman@mozilla.comTwitter: @robertnyman
robertnyman.com/speaking/robertnyman.com/html5/robertnyman.com/css3/