Mozilla Web Apps - Super-VanJS

Mozilla Web Apps Building apps with web technology

Mozilla is aglobal non-proﬁt dedicatedto putting youin control ofyour onlineexperience andshaping thefuture of theWeb for thepublic good

@robertnyman@mozhacks

"Very emotional. But I dont like it."

On which platforms will Web Apps run?

Introducing Web Runtime - WebRT

Currently:WindowsMacAndroid

Future:As many aspossible

Whats needed to run/install a Web App?

The Mozilla Labs AppRuntime extensionhttps://addons.mozilla.org/en-US/ﬁrefox/addon/app-runtime/

HTML5-based WebRT:include.jsAvailable at:http://myapps.mozillalabs.com/jsapi/include.js

https://myapps.mozillalabs.com/

Android App:Mozilla Labs App Runtimefor AndroidAvailable at:https://developer.mozilla.org/en/Apps#Web_runtime

Developing a Web App

Open Web technologies:HTML5, CSS, JavaScriptA manifest ﬁle

Manifest ﬁle

{ "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 webappApache - 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 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.

curl -I http://localhost/abbainfo/manifest.webapp

Installing a Web App

navigator.mozApps.install( URLToManifestFile, installData, sucessCallback, errorCallback);

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

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>

ofﬂine & 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 10CACHE:offline.htmlbase.cssFALLBACK:online.css offline.cssNETWORK:/live-updates

IndexedDB

var indexedDB = window.indexedDB || window.webkitIndexedDB|| window.mozIndexedDB || window.msIndexedDB;var request = indexedDB.open("ABBADatabase");

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

https://apps-preview.mozilla.org/

Dev tools

http://groups.google.com/group/mozilla-apps

irc.mozilla.org#openwebapps

Try new things

Robert Nymanrobertnyman.com/speaking/ robnyman@mozilla.comrobertnyman.com/html5/ Twitter: @robertnymanrobertnyman.com/css3/

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

Mozilla Web Apps - Super-VanJS

by Robert Nyman

Accessibility

Categories

Upload Details

Usage Rights

4 Embeds 57

Statistics