Posted by & filed under Content - Highlights and Reviews, Programming & Development.

codeA guest post by Rob Lauer, a Product Manager for Telerik who has a passion for hybrid mobile app development and the open web. In his other life he raises two kids, plays Ultimate Frisbee, and (for better or worse) is an avid Wisconsin Badger fan. Rob can be reached at @rdlauer.

Firefox OS is a new mobile operating system from Mozilla, creators of the venerable Firefox web browser. When first announced, Firefox OS (or “Boot-to-Gecko” as it was originally known) was met with much excitement from the web developer community. For the first time, web developers were granted the ability to develop truly native mobile apps using their existing HTML, JavaScript, and CSS skills.

The advantages of Firefox OS are clear – without having to learn any proprietary code, developers can use the HTML5 stack and their favorite framework to develop rich native apps for an exciting new platform. Also, with Firefox OS support coming in PhoneGap, we can take these apps and port them to other popular platforms including iOS, Android, and Windows Phone.

But how do we, as web developers, start writing Firefox OS apps? What tools do we need to be successful and how do we get an app in the hands of Firefox OS users? In this two part series I will show you just how easy it can be to write a Firefox OS app, what you need to know about the different types of apps, and what options you have to distribute your final product.

Let’s get started with this first Part!

Our First Firefox OS App

We are going to create a simple single page application that will show off a few key features of the Firefox OS platform. We’ll create an app that allows us to see how native page transitions work and access some information from the device itself. Let’s create an app that shows us the status of our device’s battery.

Please note that you can download the full application code from this github repository.

The basic markup of our app will look like this:

You’ll see that we have two section elements that represent the pages, or views, of our app. The first is a welcome screen and the second is the battery status information.

You will also notice that we are referencing some CSS assets. These come from – an incredibly useful resource for developing apps that conform to the Firefox OS UX guidelines. Thankfully these assets allow us to not only display native-looking UI widgets, but they also add some native-looking transitions for navigation.

Adding an App Manifest

Before we do anything else, we need to create an app manifest file – which all Firefox OS apps require. An app manifest is simply a JSON-formatted file that contains meta data about your app. Here is an example of an app manifest:

Save this file as manifest.webapp in the same directory as your application’s index.html file from above. There is a lot more information that you can store in your app manifest, but for now we’ll keep it simple.

Firefox OS Simulator

Now that we have the skeleton of our app created, we’ll probably want to see what it actually looks like. Luckily for us, Mozilla offers us the Firefox OS Simulator. Available for Mac and Windows versions of Firefox, the simulator is easily the most important tool you have when building Firefox OS apps. (Please note that you should be on at least Firefox version 26.)

Download the latest version of the simulator add-on here.

Since the simulator is part of the new Firefox App Manager, you’ll want to start up the app manager by entering the following command in Firefox’s address bar:

Next, start the simulator by clicking the Start Simulator button and then click on the appropriate OS version (for me it is Firefox OS 1.2).

To install your app run in the simulator, we are going to execute it as a “hosted app” (don’t worry about app types right now, we’ll cover those in the next post). Simply enter the hosted location of your manifest.webapp file in the Add Hosted App box. In my case it looks like this:

Note that you may have to adjust the launch_path in your manifest file depending on how your web server serves files.

Provided everything worked correctly, navigate to your app in the simulator and click to open it. It should look something like this:


Great! But unfortunately the app itself doesn’t really “do” anything yet. Let’s go ahead and add our first Web API to access a native device feature.

Our First Web API

We will discuss the Firefox OS Web APIs in more detail in a future post, but for now all you need to know is that these are APIs you access with plain JavaScript. In our case, since we want to access information about the device’s battery, we are going to focus on the Battery Status API.

In my app.js file I’m going to include the following code:

This code helps us to navigate between our two views by adding adding event listeners to the “click” action of some UI elements. We also check to see if navigator.battery exists, and if so, access four different properties provided by the device, all with JavaScript. How cool is that?

With this additional code in place, if you update your app in the Firefox App Manager (click the Update button) and navigate to the second page of the app you should see some more information about the battery (albeit fake information since we’re in a simulator).


What’s Next?

So far we have created a simple Firefox OS app, utilized a Web API, and verified the functionality in the simulator. In Part 2, we’ll want to look more closely at the different types of Firefox OS apps, how you can distribute them, and even get into why you should consider developing for the platform.

Look below for some great JavaScript resources from Safari Books Online.

Not a subscriber? Sign up for a free trial.

Safari Books Online has the content you need

Eloquent JavaScript is a guide to JavaScript that focuses on good programming techniques rather than offering a mish-mash of cut-and-paste effects. The author teaches you how to leverage JavaScript’s grace and precision to write real browser-based applications. The book begins with the fundamentals of programming—variables, control structures, functions, and data structures—then moves on to more complex topics, like object-oriented programming, regular expressions, and browser events. With clear examples and a focus on elegance, Eloquent JavaScript will have you fluent in the language of the web in no time.
Learning JavaScript Programming Video teaches you the basics of programming with JavaScript, the worlds most used programming language. The tutorial is designed for the absolute beginner – no prior JavaScript programming experience is required in order to get the most out of this video training. You will start with learning what programming is, and specifically, what JavaScript is, how it it used, and its limitations. You will discover variables and data types, and how to take input and create output. Craig covers conditions, loops, arrays, sorting, functions, paramaters and debugging. You will even learn advanced concepts such as OOP, string manipulations, regular expressions and other programming patterns.

Tags: android, Boot-to-Gecko, CSS, Firefox OS, html5, iOS, Javascript, JSON, Mozilla, PhoneGap, Windows Phone,

4 Responses to “Developing Your First Firefox OS App, Part 1”

  1. Ste

    Great start but needs more work. I am using XAMP and cannot get the ‘update’ to push the application to the simulator. I have to open up Firefox in the simulator and go to my directory via the URL bar. Take some time to help folks get set up instead.

    • Ste


      Got it working! The Firefox OS 1.2 did not work so I tried 1.3 which is near enough stable. Would it be okay to build my first application off this and release to the store? Of course with a link to this, mention to yourself and the code is left open source :)

  2. Rob

    @Ste – I didn’t have the problems you pointed out. A couple things come to mind though. Firefox 27 just came out, which potentially could have had some change. I have noticed that I need to shut down the simulator, start it back up, and then click the “update” button to make it work. It’s still kind of touchy!

    • Ste

      Thanks for the reply. I guess you are right about 27 having an affect on the build! Thanks again and look forward to part 2