Over a million developers have joined DZone.

Why is Firefox OS a Great Achievement?

· Mobile Zone

Visually compose APIs with easy-to-use tooling. Learn how IBM API Connect provides near-universal access to data and services both on-premises and in the cloud, brought to you in partnership with IBM.

I'm a bit puzzled where to write this article. This should go to HTML5 zone as I'm going to talk about and code in HTML5. On the other hand this can also be an article in the mobile zone as I'm going to talk about a new mobile operating system. To be fair I'm going to code in HTML5 and post this as a mobile zone article.

You may have noticed that two capital letters in the title. If you think that it is a short for operating system you're right. Mozilla has been developing a new mobile operating system called Firefox OS (also referred to by its codename "Boot to Gecko" or "B2G").

If you ever felt that developing native application for mobile requires at least as many developers as many platform is your target, you will love Firefox OS. There are existing solutions to fill this gap between native and mobile web apps but they have boundaries. What would you say if I told you that HTML5 is native for Firefox OS? I'm not kidding! You write your web application with HMTL5 and your ready for Firefox OS. No conversion, no web view packaged app and the most important no limited access to the device. You can simply reach the desired part of the device via simple APIs.

Today I'm going to show you how to start developing an Open Web App (OWA).

A SOHW which is the Simple Old Hello World can be enough to start!

The code itself as simple as it seems to be:

<!DOCTYPE html>
  <title>Simple Old Hello World</title>
  Hello Wrold!

The user interface for an OWA is simply HTML, css. Easy, right?

To be able to use this as an application running on the OS we need to describe this. For this purpose we need to give a manifest file to the OS to know some thing about the application. These informations go to manifest.webapp:

  "version": "0.1",
  "name": "Simple Old Hello Wrold",
  "description": "This is a basic implementation of Hello World for Firefox OS.",
  "launch_path": "/index.html",
  "icons": {
  "30": "/img/icon-30x30.png",
  "60": "/img/icon-60x60.png"
  "installs_allowed_from" : ["https://marketplace.example.com"],
  "developer": {
  "name": "Gergő István Nagy"
  "orientation" : ["portrait"]

Project layout figure

www (as root)

As we are ready with coding we should try this somewhere.

You have several options to do this:

  • You can build the OS and deploy it to a supported device
  • You can run Firefox OS desktop client
  • or use the Firefox OS simulator which is available as a Firefox add-on
After you downloaded it, point to the “www “ directory and select the manifest.webapp.

Click on "Add Directory":

The simulator will start and you will see your application:

If you press the "Home" button it will take you to the Home screen where you can see the application icon:

Maybe you expected more difficult steps to create this simple application. Sorry, that's it. No separate SDK is required, no any special IDE is required, only your favorite text editor and the knowledge of HTML5 technology.


Firefox OS is a new/old platform for web developers to go mobile. Already existing HTML5 applications can run on this platform. If your application was developed with mobile in mind it also ready for Firefox OS. There are other ways how to distribute or even monetize you HTML5 mobile ready application via Firefox Marketplace.

To go further check the links below:





The Mobile Zone is brought to you in partnership with Strongloop and IBM.  Visually compose APIs with easy-to-use tooling. Learn how IBM API Connect provides near-universal access to data and services both on-premises and in the cloud.


The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}