This article is more than 1 year old

Firefox OS mobilises HTML5, without the added Steve Jobs

Succeed or fail, you'll still have a working web app

Review Do you want to build applications for Firefox OS? The first step is to head over to the Mozilla website and sign up for a developer kit.

Just kidding, there's no developer kit. There are also no developer fees and no new programming languages to learn. You can start building apps for Firefox OS today, using nothing more than HTML, CSS and a generous helping of JavaScript.

Using the free, widely understood languages of the web stack means that the barrier to entry for potential Firefox OS developers is very low.

As Daniel Appelquist of Mozilla's Firefox OS partner Telefonica says in a recent video interview: "It changes the economics of app development because it's cheaper to get into the game as an app developer. You don't need as many tools. You don't need to join expensive developer programs. You can start developing with what you have right now."

The idea behind Firefox OS is simple: building apps for the mobile web using exactly the same tools and languages as the desktop web.

No special APIs, no native code, no special programs or tools to "extend", "accelerate" or "optimize" HTML5 or CSS as Apple did under Steve Jobs.

That's all well and good to say, but just how easy is it to actually build a Firefox app?

The question takes on added urgency as the first consumer release of Firefox OS phones arrive in Europe, courtesy of Telefonica on Tuesday. I’ve been using Firefox OS on a Keon handset from Spanish manufacturer Keon for more than a month now.

Well, as it turns out, it really is that easy. As easy, in fact, as throwing together a webpage.

However, as with a webpage, if you want your app to actually do something useful you'll likely need to dive into JavaScript (and possibly some server-side tools depending on what you want your app to do).

The first step in building an app for Firefox OS is determining which sort of app you want to build. There are two options; packaged apps and hosted apps. A packaged app is what it sounds like: all of your app's assets - HTML, CSS, JavaScript, images, manifest and so on - are packaged up in a zip file that becomes the means of distribution. A hosted application keeps all of its assets on the server and more or less functions (from the developer's viewpoint) like a website.

Both types of apps need a valid manifest file and both can be listed in the Firefox Marketplace. In the case of packaged apps you'll upload a zip file to the marketplace. Hosted apps just provide a URL and the Firefox Marketplace links to the install location.

For testing reasons it's easiest to start off creating a hosted app that lives on your local network. If later you decided you'd prefer to package it up, it's not hard to convert between the two.

To start with I went even simpler than that, creating nothing more than a manifest file for my website. A manifest file is just a simple JSON file which essentially tells Firefox OS, “hey, here's an app” and sets a few variables.

I began with the very basic ten-line example file you'll find on the Mozilla Developer Network (home to the best documentation on Firefox OS) and tweaked it to fit my site. Impressed with the simplicity of creating an app, I uploaded the file, browsed to my install page and... nothing.

The devil, as always, is in the detail. In this case the detail is that Firefox OS manifest files need to be served as content type application/x-web-app-manifest+json, which just about no server on the web will do out of the box. It's worth noting, though, that GitHub will serve it properly, which is handy for hosting apps from GitHub Pages. To add the necessary content type to other servers, see the Mozilla Dev Center.

JavaScript dive

Once the technical side was taken care of, everything else worked just fine. I created a basic page to install my app (which just points to the aforementioned manifest file). Now would be the time to build a mobile interface for your site. My site happens to already use CSS @media queries to handle different screen sizes, so everything already worked.

Of course, my app is just, well, my website, which is not very exciting, but if you've got a Keon or Geekphone's other Firefox OS handset the Peak and want to see what it's like to install an app, feel free to try it out.

In fact, not only is my test app not very exciting, it's not much of an app at all. At this stage it's little different than a home screen shortcut. But if you already have a functioning web app, say an HTML5-based game, adding a manifest file and creating an install script is all it takes to turn your web app into an installable Firefox OS app.

A manifest file and a simple install script is also a good place to get started with Firefox OS apps because it gets the two things unique to the platform out of the way. You now have what amounts to a container for your app. But before you start building everything from scratch, be sure to check out the Firefox OS style guide (wholly optional) and what Mozilla calls "Build Blocks", reusable interface elements for developers.

To build a useful app you'll want to dive into the various JavaScript APIs that make up the core of Firefox OS's functionality.

Using the APIs is a two-fold process. First, you have to build out your app using the APIs and then you need to list any restricted APIs your app uses in your manifest file. When the user installs your app they'll get a chance to approve the permissions you request. For example, if your app asks for location data the user first needs to agree to give your app access. Users can change those permissions at any time in the OS' settings app, of course.

There are quite a few very useful APIs for developers, but perhaps the most important is the offline storage API. Firefox OS apps may be made with HTML, CSS and JavaScript, but the good ones are not web apps, in the sense that they need internet access. Obviously some Firefox OS apps will always need to be online, just as there are plenty of apps for iOS and Android that are useless without a fast internet connection.

There is, however, no need to require a network connection just because you've built an app with HTML. Even if your app uses the network - to sync edited files to a user's Dropbox account, for example - you'll still likely want to store the data locally and only upload when access is available.

What's perhaps most exciting (and challenging) for developers at this stage is that the guide essentially ends here. Once your container is built the only limitation on your app is the web. You have all the freedom of the web to build anything you want without worrying about whether or not it will be approved by big-name app stores.

If you want to get in the Mozilla Marketplace there is an approval process, but it's nothing like Google Play or Apple's notoriously restrictive App Store. Even better for web app developers, Firefox OS finally offers access to the kinds of APIs you need to build compelling apps.

The result is a kind of wild west of app development where the possibilities are only now being explored. If you missed the app gold rushes on iOS and Android because you didn't want to learn a new programming language or your ideas didn't fit the mould of what was declared possible, Firefox OS wants you.

Of course Firefox OS is an unproven platform. There's always the chance that you'll be pouring your energy into something that never takes off. Firefox OS could go the way of Web OS. Or it could follow in the Firefox web browser's footsteps, slowly but surely gaining traction around the world. Even in the worst case scenario, though, you'll still have a fully functional web app.

Having scratched the surface of Firefox OS app development though I'm inclined to agree with Mozilla, which is calling Firefox OS "the platform HTML5 deserves." ®

More about

More about

More about


Send us news

Other stories you might like