Creating your first mobile application for Firefox OS, the new Rockstar!

If you are new to Firefox OS, the definition says it all. "Firefox OS (project name: Boot to Gecko also known as B2G) is a Linux-based open source operating system for smartphones and tablet computers being developed by Mozilla."

Thing is that, there is a new OS coming to market sometime near future. Smartphones will be equipped with a fresh new OS known as Firefox OS. In this post, let us create a first hello world application and see it running inside Firefox OS.

No No. You don't have to learn a new language. It's a promise. Well, stop guessing now. Firefox OS is designed to allow HTML5 applications to integrate directly with the device's hardware using JavaScript. So, you just need to know a bit of html, css and javascript to begin writing awesome apps for Firefox OS.  You can access your phone's contacts, camera, settings, so on and so forth just like you did with your Hybrid Mobile Apps. Firefox OS is not just a framework like Phone Gap. It is an open source operating system written in HTML/CSS/JS/C++.  As a developer, you can modify anything and everything. Firefox OS is not a garden with a wall like other Mobile Operating systems. It is open and wall-less !!

This post is not about the history of Firefox OS, the need or its future. Read the below posts if you interested in such stuff. We shall start using it instead !!

Wiki Definition
Documentation from Firefox

There is also a marketplace now for Firefox OS apps. Here it is 

As a developer, you only need to learn three things.

Think of a concept, use a responsive frameworks to design it, develop your apps using web technologies and publish it to marketplace. Oh Yes, you can make some money too :)

Now, the first thing to know, there are only few phones at present with Firefox OS installed. I know its difficult to get one at this point of time. So, it's obvious. There is a simulator available using which you can install your app, test it and then you can publish it.

Firefox OS Simulator

The Simulator is easy to install and runs on Windows, Linux and Mac. To install it, use Firefox as your browser and click here. (Simulator is around 60 MB. Do not worry if your browser goes for a task during installation. Just 'continue' running it.)

Once you install it, On the Firefox menu (Windows) or the Tools menu (Mac, Linux), go to Web Developer and click Firefox OS Simulator. The dashboard appears.

Click the Stopped button. It changes into the Running button and Firefox OS boots up in its own window. The default size for this window is 320x480.

Let us now create an application locally (without a web server) and deploy it inside the simulator. 
Follow the steps written below. (Create all the files mentioned below in a single folder)

Create a basic index.html in your favorite editor with the below html.

<!DOCTYPE html>
    <meta charset="utf-8">
<h1>Hello World from Firefox OS</h1>
Create a folder by name "img". Within that, create one more folder by name"icons" and you can add three icons with size 16 X 16 , 48 X 48 , 128 X 128 respectively. This step is just for adding an icon for your app. In my case, I have three icons by names mortar-16.png, mortar-48.png and mortar-128.png. You can have your own icons for your app.

The Open Web App manifest contains information that a Web browser needs to interact with an app. A manifest is one of the key things that distinguish an Open Web App from a website. It is a JSON file with a name and description for the app, and it can also contain the origin of the app, icons, and the permissions required by the app, among other things.

Using your favorite text editor, create a file by name manifest.webapp. Copy the below json contents into it. Save the file.

  "version": "0.1",
  "name": "MY First App",
  "description": "Some Description for my awesome App",
  "launch_path": "index.html",
  "icons": {
    "16": "/img/icons/mortar-16.png",
    "48": "/img/icons/mortar-48.png",
    "128": "/img/icons/mortar-128.png"
  "installs_allowed_from": ["*"],
  "appcache_path": "/cache.manifest",
  "default_locale": "en"

You are almost ready. I have created a video on how to deploy the application you just created. Watch it.

It is a matter of few minutes to get started with a basic hello world app for Firefox OS. This post only talks about creating and installing a basic app. You can use the device capabilities to access maps, camera, sensors and settings using javascript inside Firefox OS. We shall look into it in coming days. Happy Coding !

Popular posts from this blog

Facebook Javascript API : Feed and Share Dialog for Beginners

Developing a Link Chopper using C# and API in 1 Hour

WCF: Operation Overloading inside Service Contracts using C#