Open Web Apps and the Mozilla Labs Apps project

P S AP ject E B s pro N W s Ap p aw kes PE Lab Ro bH O MozillaHi, I’m Rob Hawkes and I’m going to talk about the Mozilla Labs Apps project and what itmeans for the Web.

I work at Mozilla, a non-proﬁt company who is ﬁghting for a better Web.If you’re unsure about how much I love Mozilla then check out this beautiful chicken and leekpie with extra Firefox goodness.It was made by my talented girlfriend and it was delicious.

My official job title is Technical Evangelist but I prefer what it says on my business card.Part of my job is to engage with developers and designers like you and I about cool newtechnologies on the Web.I’m interested in everything that’s going on but my particular focus at Mozilla is on gamedevelopment using Web technologies.And for those of you with no idea of what a rawket is, I made a multiplayer game calledRawkets in which players ﬂy around in little rockets and shoot each other in the face withHTML5 and JavaScript.It’s actually quite fun!http://rawkets.com

We might have enough time for questions at the end but feel free to grab me in person afterthis talk or on Twitter. I’m always happy to help.These slides will go online after this talk and they’ll be available from my personal website.I’ll put all the details up at the end.

Created by Phil Banks (@emirpprime)Now, it’s no secret that I spend most of my time experimenting with HTML5 and other cooltechnologies like JavaScript.If you’ve met me before then you probably already know about my slight addiction to HTML5canvas, visual programming, and gaming.

The concept of Web apps is something that is gaining a lot of traction at the moment.No doubt this is as a result of the success of native applications on the desktop and mobile,particularly with iOS and Android.What’s exciting is that HTML5 and JavaScript are now allowing developers to create appexperiences on the Web that can rival those on the desktop and mobile.But just having the technology isn’t good enough.

ion at situ etter nt be b rre ou ld Cu ing sc ThCurrently, app platforms are predominantly closed in either the technology required to makethe apps or the methods that are used to distribute them.Although these approaches do have their beneﬁts they also put unnecessary constraints onthe developers and users of apps.It’s also not an ideal solution if we want an open Web.

je ct p ro eb p s W A p fthe bs good o La rthe zilla Fo MoAt Mozilla we think there is a better way, a way that puts the developers and users of appsback in charge.We think there is a way that embraces open technology and is for the good of the Web.We call it the Mozilla Labs Apps project and we’re working hard to make it a reality.

ach Re rm tfo s-pla cros ed us be an sc AppIt allows you to create rich HTML5 app experiences that run across multiple devices and formfactors (desktop, mobile, tablet, etc.)

g y o lo ch n es e sit n t ew eb pe om ak O us et eady alr ou ty WhaIt allows you to use Web standards and open technologies such as HTML5, CSS andJavaScript.Anything you currently use to build a website with can be used to build an app.

oice f ch ol o on tr o m ers in c ed Fre d consum an vs de tting PuIt puts you in control of every aspect of the app experience; from easy development, todistribution, to direct communication with your customers.

ie w rev r p wo rk p e nd velo theg rou De aying LRight now we’re in a limited Developer Preview to lay the groundwork and test things butwe’ll soon be opening that up so more people can try it out.

te d r ta app g s ttin te an Ge to crea HowCreating a Web app isn’t crazy hard, it’s just a case of understanding the new features inbrowsers.

tes bsi we olo gy ar e tec hn ps me Ap et he sa us ey ThApps are websites and are built using the same technology and processes.If you already know how to make a website then creating your ﬁrst Web app is a breeze.

s ite e b e w ap ps th for in g on ality nd fun cti Exte g new ddin AThe Mozilla Labs Apps project proposes some additions to standard websites and introducesa few new JavaScripts APIs into the browser that help make apps an experience unlike anyother on the Web.If you don’t know JavaScript then don’t be put off, the amount that’s needed to make an appis relatively small and should make sense to you.However, I would deﬁnitely advise learning JavaScript development if you’re planning ongetting really involved in Web apps.

fe st n i a m o an a pp io n int a t ite plic we bs Ap rninga TuThe only thing that you need to do to turn a website into app is create an applicationmanifest.

{ "version": "1.0", "name": "MozillaBall", "description": "Exciting Open Web development action!", "icons": { "16": "/img/icon-16.png", "48": "/img/icon-48.png", "128": "/img/icon-128.png" }, "developer": { "name": "Mozilla Labs", "url": "http://mozillalabs.com" }, "installs_allowed_from": [ "https://appstore.mozillalabs.com" ], "default_locale": "en" }This is a JSON ﬁle that effectively describes your application; it’s name, icons, and otherrelated data.

nts e irem ember q u t re ttor em fes tan ni mp or Ma IThere are a couple of important things to remember when creating an application manifest.

a in o m ty e d curi am nt of se S me ele AnThe ﬁrst is that it needs to be hosted from the same domain as your Web app.This is pretty straightforward and it adds an element of security in that it is unlikely that arouge manifest ﬁle will be able to be put on the same domain without your knowledge.

Content-type header application/x-web-app-manifest+jsonThe second is that it needs to be served with a specific content type (application/x-web-app-manifest+json).This is probably the most tricky process in turning a website into an app as it involveschanging settings on your server or a bit of hackery in your manifest file.If you don’t want to fiddle with your server then you can always set the content-type headerusing something like PHP or Node.js.

Extension my-manifest-file.webappIt’s also recommended that the manifest ﬁle has an extension of .webapp, although this isn’tenforced.

to r a lid s ok va st hin g i nife everyt Ma su re king MaIf you want to make sure your manifest is valid you can have it checked at http://appmanifest.org

p s a p lin g er tal bro ws Ins nt he oni so nd na sio xten ViaeYou can install and manage apps using an extension for Firefox on the desktop and anapplication for Android.We’re working on building the necessary functionality directly into Firefox, as well asproviding a JavaScript include that can be used in other browsers.https://addons.mozilla.org/en-US/ﬁrefox/addon/app-runtime/https://apps.mozillalabs.com/bin/Soup-0.1.apk

Installing an app navigator.mozApps.install(manifestUrl)Installing an app is achieved through the new mozApps JavaScript API, particularly the installmethod.By passing it a string URL to the app’s manifest ﬁle you will trigger the installation process.An example of when you would call this method is after a user clicks on an “Install this app”button on your own website.

The install method triggers an installation dialogue within the browser that allows the user todecide what to do with the app.

When installed, apps can be accessed and managed via a special dashboard during thedeveloper preview.This is available by accessing https://myapps.mozillalabs.com or clicking on the Apps link atthe bottom of the Firefox window.

Apps launched from the dashboard are opened in an application tab at the far left-hand sideof the tab bar.An application tab is different in that it has a much smaller visual footprint in the tab bar andthere is little browser UI cluttering the screen, like the address bar.

ion u t trib ey Dis dm on s an tore ps ApCreating an app is only half the story, the ﬁnal chapter is distributing your app and getting itin the hands of users.There are a couple of prominent options here.

ne alo o it elf rs G it y ou do land tro on full c TakeThe ﬁrst option is to provide the app only via your own website and do the leg work inregards to promotion.This option is an enticing one for developers who want full control over where and how theirapp is distributed.However, right now this is a tricky option if you want to charge for your app.

s rm fo ace lat g park etpl tin pM Exis illa Ap Moz he et LikThe second option is to use an existing platform like the Mozilla App Marketplace.There are many beneﬁts to this option but the main ones are that you don’t need to worryabout payment systems nor have to do as much promotion.The marketplace uses PayPal and BrowserID to make the purchase and conﬁrmation ofpurchase as easy as possible.http://apps-preview.mozilla.org/

nce erie exp eb sit es ive ifie dw at lor N er jus tg long no are ps ApI think what is most interesting about the apps project is the ability to break away from theconcept of apps being nothing more than gloriﬁed websites.Instead, the new functionality allows Web apps to look and act much like native applicationsthat you would ﬁnd in an operating system, rather than a website running within a browser.

RT eb W e OS th ithin sw pp ga llin InstaWe call this WebRT (Web run-time) and it’s really cool.It allows you to install Web apps in the operating system as if they were a native application.Right now, WebRT is supported on Windows, Mac, and Android.It’s built into the Firefox extension, Android application, and JavaScript include that Imentioned earlier for installing and managing apps.

It’s really easy to use and you don’t need to do anything special as a developer to enable it inyour app.Whenever a user requests to install an app they will see an option to install it natively.

ock e d th reen m ro or home sc f nch sktop, Lau or de …Apps installed using WebRT are no different to any other native application that you have onyour computer.They’re installed in a standard applications folder and can be launched in the same way thatyou launch any other application.For example, on the Mac your app would be installed in the ~/Applications directory.

U I ser row alo ne o b rs ou N an dy rs ou isy ation lic app TheWebRT applications use a browser rendering engine behind the scenes but don’t display anynormal browser UI that would clutter your app.Instead, WebRT apps look and feel like native applications while actually using HTML andJavaScript behind the scenes.

This is an example of my HTML5 game running as a WebRT application, check out the lack ofbrowser UI.Right now WebRT uses the version of Firefox you already have installed to grab the renderingengine. In the future you won’t necessarily need a browser installed and WebRT will handlegrabbing a relevant rendering engine behind the scenes.

gy olo c h n er rth d te even fu late ap ps Re shing PuAside from WebRT and the apps API there are many other Web technologies that help pushapps even further.

PI n A re e ul Sc we rf ull et po F im ple ,y SThe Full Screen API allows you to expand any HTML element to ﬁll the users screen, even ifthe browser isn’t running full screen itself.It’s different to using the F11 shortcut for full screen a that makes the entire browser fullscreen and keeps the address bar and other UI if you place the mouse near the top of thescreen.With the Full Screen API only the speciﬁc HTML element that you choose will be made fullscreen and the browser UI will be hidden. It’s useful for things like video and games.https://bugzilla.mozilla.org/show_bug.cgi?id=545812http://blog.pearce.org.nz/2011/09/mozilla-full-screen-api-progress-update.htmlhttps://wiki.mozilla.org/Platform/Features/Full_Screen_APIs

e ts ock bS ation e W omm un ic ec l-tim al rea ction ire Bi-dWebSockets is particular favourite of mine.It a JavaScript API that allows you to provide bi-directional real-time communication betweena browser and a server.This means you can instantly push data to and from the user as soon as it becomes available.

se ts a s line yw ay Off ern et an Int he st ed ne WhoTechnologies like the application cache, Local Storage, and IndexedDB allow for a website orapp to cache necessary assets to that it can still run while offline.This includes things like JavaScript ﬁles, CSS and images as well as standard key/value data.Combining these techniques will allow your application to continue working even if theInternet connection goes down. You just sync up all the changes when it gets connectedagain.https://developer.mozilla.org/en/Offline_resources_in_Firefox

P Is e A evic cript D aS Jav ith arew ardw h ssing ce AcDevice APIs is a catch-all term for the technologies that allow developers to access hardwareand operating system APIs using JavaScript.

At Mozilla we’re working on the WebAPI effort which is our attempt at solving this problem.In other camps it might be referred to as DAP, which is the Device APIs Working Group whoare producing a W3C speciﬁcation for accessing various parts of a device through JavaScript.In fact, we recently joined the DAP to collaborate and contribute to the existing efforts.The approach we’re taking is to try and replicate the functionality of a mobile phone withJavaScript.What APIs would you need to do that?http://hacks.mozilla.org/2011/08/introducing-webapi/http://arewemobileyet.com/

tes uri avo for y f ait tw M Ican no Is AP evice DThere are so many Device APIs in the pipeline when you combine all the efforts by the variousbrowser manufacturers.Here are just a few of my favourites.

PI A re tu phone ap ia C m icro ed era and M cam the ssing ce AcThe Media Capture API will let you access the camera and microphone on a device.Being able to do this with JavaScript will make a whole world of difference in so many areas.For example, instead of requiring a user to upload a proﬁle image you could take one usingthe webcam and use that instead. Simple but effective.You could also do things like using the microphone input for voice recognition in for inputareas. I know Google are already experimenting heavily in this area.

P I A tery eft at eisl B juic uch m ow th ou FindThe Battery API is interesting because it allows you to ﬁnd out how much power is remaining,or whether the device is currently being charged.

P I C A NF ion eb un icat W m om sc les wire -like RFIDThe WebNFC API is pretty cool.It gives you the ability to transmit and receive data within distances no larger than a fewcentimetres.The idea is that it can be used in phones for things like payment (like the new Barclaycard),travel (think Oyster Card), and ﬁle transfer.https://bugzilla.mozilla.org/show_bug.cgi?id=674741

P I n A tio ogies ibra hn ol V ent ec op ith youw ating VibrOr what about the Vibration API that gives you access to the vibration motors of a device.Apart from having a humorous name, it’s APIs like this are really going to change the waythat apps are created with JavaScript.https://bugzilla.mozilla.org/show_bug.cgi?id=679966

o re t m ou rces ind res ou F ion and ntat e ocum DI hope I’ve given you a taste for the Mozilla Labs Apps project and the potential for Web appsright now.There is much, much more to learn about them and the related technology.

One of the places to check out for general information is the apps section on the Mozilla Labswebsite.https://apps.mozillalabs.com/

For technical information the apps section of the Mozilla Developer Network is the place togo.It’s full of clear documentation on every detail of the project so far and is being update all thetime.https://developer.mozilla.org/en/Apps

u s lk to C Ta illa IR M oz on ps ap eb nw pe #oFor anything that can’t be answered by those websites you should get in touch with us.The developers and relevant apps-related people at Mozilla hang out in the #openwebappsroom on irc.mozilla.org so deﬁnitely head over there if you have any particular questions orconcerns.We’ll be happy to help.

Rob Hawkes @robhawkes Rawkes.com Personal website and blog RECENT PROJECTS MORE COOL STUFF Twitter sentiment analysis Rawket Scientist Delving into your soul Technical Evangelist at Mozilla Rawkets.com ExplicitWeb.co.uk HTML5 & WebSockets game Web development podcastGet in touch with me on Twitter: @robhawkesFollow my blog (Rawkes) to keep up to date with stuff that I’m working on: http://rawkes.comI’ve recently worked on a project that analyses sentiment on Twitter: http://rawkes.com/blog/2011/05/05/people-love-a-good-smooch-on-a-balconyRawkets is my multiplayer HTML5 and JavaScript game. Play it, it’s fun: http://rawkets.com

Ask MDN Coming back this year Web development topics ASKMDN Hand-picked experts Great discussions @ASKMDN & #ASKMDN ON TWITTERAnd lastly, I’d like to quickly mention Ask MDN which is a project that I’m working on atMozilla.The concept is simple; every so often we gather a bunch of experts to answer your questionsabout a particular topic.We’ve had a whole bunch of sessions to date and it’s going down really well. If you follow@AskMDN on Twitter you’ll be sure not to miss the next one when it starts again this year.http://twitter.com/AskMDN

O U Y s? K tion N ues A yq TH An R b es wk es Ha wk ob ha ro @Thank you.If you have any questions feel free to grab me on Twitter (@robhawkes) or emailrob@rawkes.com.

http://hacks.mozilla.org	1296
http://lanyrd.com	26
http://www.twylah.com	21
http://www.newsblur.com	14
http://webdesigning.collected.info	9
http://www.zhuaxia.com	5
http://127.0.0.1	4
http://htmlfive.collected.info	3
http://www.hanrss.com	2
http://schoolofweb.org	1
http://www.ofelio.com	1
http://www.ilovetheopenweb.org	1
http://1kpl.us	1
http://webcache.googleusercontent.com	1

Open Web Apps and the Mozilla Labs Apps project

by Rob Hawkes on Feb 04, 2012

Accessibility

Categories

Tags

Upload Details

Usage Rights

14 Embeds 1,385

Statistics

Open Web Apps and the Mozilla Labs Apps project — Document Transcript