Recently, I’ve started digging into Mozilla technologies just for curiosity. One of the things that intrigued me more was the concept of the Firefox OS. I wondered how we could make a phone work mainly with web technologies and how the development process works for this kind of operating system.
While i was reading documentation and other blog entries about Firefox OS some questions arose, since the whole concept seems to be different from the other big players:
- How can we access phone features through JavaScript?
- How do you start developing for this platform or what steps are required to transform an existing web application into a fully functional app?
So once again i decided to learn by doing. Since i didn’t want to start from scratch, i tried to adapt Rapido (a simple project i made some time ago to learn the basic concepts of Meteor.js), make it work well on Firefox OS and submit everything to the marketplace.
One of the things that amazed me at first, was the fact that almost everything you need to get started is already included in Firefox’s developer tools. For example, to launch a phone simulator to run your project you just need to open “Web Developer -> App Manager”, choose the version of the software and add the location of your project as an app.
There are 2 kinds of applications, packaged and hosted. The first group works like regular applications where all JavaScript code is “downloaded” to the phone and is able to be correctly executed even without Internet. The other type, the one I used for Rapido, is like a website with access to certain phone features.
The DOM of the existing project needs to be responsive but this demand isn’t an issue, since you already assume it as a requirement even without reading the first line of the documentation. In the end, i can assure that this was in fact the part of this project that gave me most work to get it done, almost all other steps were quick and easy.
The only new concept that you need to learn to develop a hosted application is to write and serve its manifest. This file which should be in the application root (ex: app.domain.com/manifest.webapp) is a JSON file that describes the information about the authors, the special permissions that are needed, the location of the icons, etc.
By using Meteor.js, I had to play with the Router package, like it is described in this blog post, to be able to serve this file within the app.
For a very basic project, these steps were everything what I needed to do in order to transform Rapido in a Firefox OS application. One thing that I was reminded by the people who reviewed the app, was that all external links need to be opened in a new window since this devices don’t have a “back” button. Their validation form was also very helpful in the process of spotting common mistakes before the submission to the marketplace.
One feature of Firefox for Android that i had no idea it existed and works like a charm, is the ability to install this applications on your Android device through Firefox Marketplace. So with little effort I’ve got my app working on my phone as well.
Overall it was pretty easy to adapt Rapido to Firefox OS, the documentation is good, the process to submit the app to the market is intuitive and I’ve got a response in less than 24 hours on a weekend.
Since the battle of IOS vs Android is getting boring, it’s really cool that other players are trying to join the race with different approaches to spice things up.
The application is listed in the Marketplace and can be found here (Edit Nov 2014, i just removed the application from the market, since i no longer maintain it.)