In this talk Rob will introduce the Mozilla Labs Apps project and the related technologies that are helping it happen. The aim of this project is to produce an apps eco-system on the Web that uses open technologies and gives developers and users the freedom to sell and use apps in the way they want.
OPEN WEB APPS
Mozilla Labs Apps project
Hi, I’m Rob Hawkes and I’m going to talk about the Mozilla Labs Apps project and what it
means 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 leek
pie 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 new
technologies on the Web.
I’m interested in everything that’s going on but my particular focus at Mozilla is on game
development using Web technologies.
And for those of you with no idea of what a rawket is, I made a multiplayer game called
Rawkets in which players ﬂy around in little rockets and shoot each other in the face with
It’s actually quite fun!
We might have enough time for questions at the end but feel free to grab me in person after
this 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 cool
If you’ve met me before then you probably already know about my slight addiction to HTML5
canvas, 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.
experiences on the Web that can rival those on the desktop and mobile.
But just having the technology isn’t good enough.
Things could be better
Currently, app platforms are predominantly closed in either the technology required to make
the apps or the methods that are used to distribute them.
Although these approaches do have their beneﬁts they also put unnecessary constraints on
the developers and users of apps.
It’s also not an ideal solution if we want an open Web.
Mozilla Labs Apps project
For the good of the Web
At Mozilla we think there is a better way, a way that puts the developers and users of apps
back 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.
Apps can be used cross-platform
It allows you to create rich HTML5 app experiences that run across multiple devices and form
factors (desktop, mobile, tablet, etc.)
What you already use to make websites
It allows you to use Web standards and open technologies such as HTML5, CSS and
Anything you currently use to build a website with can be used to build an app.
Putting devs and consumers in control
It puts you in control of every aspect of the app experience; from easy development, to
distribution, to direct communication with your customers.
Laying the groundwork
Right now we’re in a limited Developer Preview to lay the groundwork and test things but
we’ll soon be opening that up so more people can try it out.
How to create an app
Creating a Web app isn’t crazy hard, it’s just a case of understanding the new features in
Apps are websites
They use the same technology
Apps 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.
Extending the website
Adding new functionality for apps
The Mozilla Labs Apps project proposes some additions to standard websites and introduces
other on the Web.
is relatively small and should make sense to you.
getting really involved in Web apps.
Turning a website into an app
The only thing that you need to do to turn a website into app is create an application
"description": "Exciting Open Web development action!",
"name": "Mozilla Labs",
This is a JSON ﬁle that effectively describes your application; it’s name, icons, and other
Important to remember
There are a couple of important things to remember when creating an application manifest.
An element of security
The ﬁ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 a
rouge manifest ﬁle will be able to be put on the same domain without your knowledge.
The second is that it needs to be served with a speciﬁc content type (application/x-web-app-
This is probably the most tricky process in turning a website into an app as it involves
changing settings on your server or a bit of hackery in your manifest ﬁle.
If you don’t want to ﬁddle with your server then you can always set the content-type header
using something like PHP or Node.js.
It’s also recommended that the manifest ﬁle has an extension of .webapp, although this isn’t
Making sure everything is ok
If you want to make sure your manifest is valid you can have it checked at http://
Via extension and soon in the browser
You can install and manage apps using an extension for Firefox on the desktop and an
application for Android.
We’re working on building the necessary functionality directly into Firefox, as well as
Installing an app
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 to
decide what to do with the app.
When installed, apps can be accessed and managed via a special dashboard during the
This is available by accessing https://myapps.mozillalabs.com or clicking on the Apps link at
the bottom of the Firefox window.
Apps launched from the dashboard are opened in an application tab at the far left-hand side
of the tab bar.
An application tab is different in that it has a much smaller visual footprint in the tab bar and
there is little browser UI cluttering the screen, like the address bar.
App stores and money
Creating an app is only half the story, the ﬁnal chapter is distributing your app and getting it
in the hands of users.
There are a couple of prominent options here.
Go it alone
Take full control and do it yourself
The ﬁrst option is to provide the app only via your own website and do the leg work in
regards to promotion.
This option is an enticing one for developers who want full control over where and how their
app is distributed.
However, right now this is a tricky option if you want to charge for your app.
Like the Mozilla App Marketplace
The 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 worry
about payment systems nor have to do as much promotion.
The marketplace uses PayPal and BrowserID to make the purchase and conﬁrmation of
purchase as easy as possible.
Apps are no longer just glorified websites
I think what is most interesting about the apps project is the ability to break away from the
concept of apps being nothing more than gloriﬁed websites.
Instead, the new functionality allows Web apps to look and act much like native applications
that you would ﬁnd in an operating system, rather than a website running within a browser.
Installing apps within the OS
We 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.
mentioned 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 in
Whenever a user requests to install an app they will see an option to install it natively.
…or desktop, or home screen
Apps installed using WebRT are no different to any other native application that you have on
They’re installed in a standard applications folder and can be launched in the same way that
you launch any other application.
For example, on the Mac your app would be installed in the ~/Applications directory.
No browser UI
The application is yours and yours alone
WebRT applications use a browser rendering engine behind the scenes but don’t display any
normal browser UI that would clutter your app.
Instead, WebRT apps look and feel like native applications while actually using HTML and
This is an example of my HTML5 game running as a WebRT application, check out the lack of
Right now WebRT uses the version of Firefox you already have installed to grab the rendering
engine. In the future you won’t necessarily need a browser installed and WebRT will handle
grabbing a relevant rendering engine behind the scenes.
Pushing apps even further
Aside from WebRT and the apps API there are many other Web technologies that help push
apps even further.
Full Screen API
Simple, yet powerful
The Full Screen API allows you to expand any HTML element to ﬁll the users screen, even if
the browser isn’t running full screen itself.
It’s different to using the F11 shortcut for full screen a that makes the entire browser full
screen and keeps the address bar and other UI if you place the mouse near the top of the
With the Full Screen API only the speciﬁc HTML element that you choose will be made full
screen and the browser UI will be hidden. It’s useful for things like video and games.
Bi-directional real-time communication
WebSockets is particular favourite of mine.
a browser and a server.
This means you can instantly push data to and from the user as soon as it becomes available.
Who needs the Internet anyway
Technologies like the application cache, Local Storage, and IndexedDB allow for a website or
app to cache necessary assets to that it can still run while offline.
Combining these techniques will allow your application to continue working even if the
Internet connection goes down. You just sync up all the changes when it gets connected
Device APIs is a catch-all term for the technologies that allow developers to access hardware
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 who
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 with
What APIs would you need to do that?
Device APIs I cannot wait for
There are so many Device APIs in the pipeline when you combine all the efforts by the various
Here are just a few of my favourites.
Media Capture API
Accessing the camera and microphone
The Media Capture API will let you access the camera and microphone on a device.
For example, instead of requiring a user to upload a proﬁle image you could take one using
the webcam and use that instead. Simple but effective.
You could also do things like using the microphone input for voice recognition in for input
areas. I know Google are already experimenting heavily in this area.
Find out how much juice is left
The Battery API is interesting because it allows you to ﬁnd out how much power is remaining,
or whether the device is currently being charged.
RFID-like wireless communication
The WebNFC API is pretty cool.
It gives you the ability to transmit and receive data within distances no larger than a few
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.
Vibrating you with open technologies
Or 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 way
Find out more
Documentation and resources
I hope I’ve given you a taste for the Mozilla Labs Apps project and the potential for Web apps
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 Labs
For technical information the apps section of the Mozilla Developer Network is the place to
It’s full of clear documentation on every detail of the project so far and is being update all the
Talk to us
#openwebapps on Mozilla IRC
For 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 #openwebapps
room on irc.mozilla.org so deﬁnitely head over there if you have any particular questions or
We’ll be happy to help.
HTML5 & WebSockets game
Twitter sentiment analysis
Delving into your soul
Personal website and blog
MORE COOL STUFF
Technical Evangelist at Mozilla
Web development podcast
Get in touch with me on Twitter: @robhawkes
Follow my blog (Rawkes) to keep up to date with stuff that I’m working on: http://
I’ve recently worked on a project that analyses sentiment on Twitter: http://rawkes.com/
@ASKMDN & #ASKMDN ON TWITTER
Coming back this year
Web development topics
And lastly, I’d like to quickly mention Ask MDN which is a project that I’m working on at
The concept is simple; every so often we gather a bunch of experts to answer your questions
about 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.
If you have any questions feel free to grab me on Twitter (@robhawkes) or email