The Future of Mobile Apps

Building and publishing a Firefox OS app in no time

A walk through the process of building and publishing a Firefox OS app. Max built BLIP, a small, minimalist whack-a-mole game to experiment with triggering hardware and controls of the One Touch Fire.

Dear developers out there,

I know you are tired of building mobile apps for nibbled apples and for millions of green robots with different screen resolutions. I’m sure you want to feel free again: to be able to see the horizon, smell a fresh summer breeze, and taste a sip of clear crystal water again. I would like to take a minute and introduce you to the future of app development:

Phone

We’ll build a Firefox OS app. I’ll walk you through the process of developing and releasing a Firefox game that I called BLIP.
You’ll see: app development for Firefox OS is very different and surprisingly easy—especially for frontend web-developers. You neither need to learn any complicated new languages nor a strange IDE. Just take your favorite editor and some web skills, like HTML5, CSS3 and Javascript.

1. App-Manifest

To get started with our game, we first need to store basic information about your app. You need a file called manifest.webapp, located in the root directory of your application and served as a JSON file. Generate the file and add this to your .htaccess file:

AddType application/x-web-app-manifest+json .webapp

All set up, you’re ready to fill it with information. You can find an example manifest at the Mozilla Developer Documentation.

{
  "version": "0.1",
  "name": "Blip",
  "description": "Blip is a minimalist Whack-A-Mole game.",
  "launch_path": "/",
  "orientation": ["portrait"],
  "fullscreen": "true",
  "icons": {
    "30": "/assets/images/icon-30.png",
    "60": "/assets/images/icon-60.png",
    "128": "/assets/images/icon-128.png"
  },
  "developer": {
    "name": "Max Boll",
    "url": "http://opoloo.com"
  },
  "locales": {
    "de": {
      "description": "Blip ist ein minimalistisches Whack-A-Mole Spiel.",
      "developer": {
        "url": "http://opoloo.de"
      }
    }
  },
  "default_locale": "en"
}

2. Offline Cache

All your application data can be stored in the local storage of your device to provide faster and offline access for further app usage. It’s as easy as setting up the manifest file. First, let your HTML document know the name of your cache manifest:

<html manifest="offline.appcache">

In this case, the cache file is named offline.appcache and it’s located in the root directory of our application. You can now add new lines inside that file. Each line means a new document that has to be cached, like this:

CACHE MANIFEST
/index.html
/assets/stylesheets/application.css
/assets/javascripts/application.js

For more information about application caching, see an example at the the Mozilla Docs.

3. Firefox OS Javascript API

All this is reason enough to say: app development for Firefox OS is so much easier than for Android or iOS, at least for web-developers. The JS API provides access to native software and hardware functions like, in the case of our game BLIP, vibration, screen, and speakers. Meanwhile, there are a lot of plug-ins that you can use to make, for example, in-app-purchase possible. You get a list of all installed apps on the device and can check if yours is already installed. If not, you can install it with one simple function via the browser. You may submit your app to the marketplace, but you don’t have to.

function is_installed() {
  var request = navigator.mozApps.checkInstalled("http://app.myxotod.de/manifest.webapp");
  request.onsuccess = function() {
    if (request.result) {
      return true;
    } else {
      return false;
    }
  };
  request.onerror = function() {
    console.log(this.error.message);
    return false;
  };
}

function install() {
  var request = navigator.mozApps.install("http://app.myxotod.de/manifest.webapp");
  request.onsuccess = function() {
    return true;
  };
  request.onerror = function() {
    console.log(this.error.name);
    return false;
  };
}

function vibrate(ms) {
  if ('vibrate' in navigator) {
    navigator.vibrate(ms);
  }
}

Read more about the Mozilla Javascript API.

4. Spread the word

When you are done and happy with your application, submit it to the Firefox marketplace by adhering to these guidelines or make a landing page with an install button on it.

Summary

Even if you’re not sick of app development for iOS and Android, you should check out Firefox OS. The system itself is in an early stage and I am looking forward to more stable versions, but app development and publishing is amazingly simple. Add your apps to the marketplace or just display an install button on your website.

Now, if you want to play around a bit, have a look at the little prototype of my Javascript game BLIP.

BLIP is a very simple and minimalist whack-a-mole game: a 6 by 6 grid and randomly appearing “squares”. If you tap on a square, it vanishes and another one appears in a random position. Every time a square is tapped, the phone will vibrate for 200ms and a sound will be played. The squares also have random colors and sounds. It’s a fun little game and pretty good for testing the basic functionality of app behavior on Firefox OS. The idea is to see how to trigger and play with the hardware and controls of the phone.

You can test it on your phone and find the source code on Github. Installing it to the dashboard from Firefox browser even works on my Google Nexus 4.

Any questions? Comments? Made your own Firefox app? Share it!
Happy coding!

Written on 2014-03-10 by Max Boll — Max is Opoloo’s very own frontend Bruce Lee: fast, smart and energetic, with a keen eye for interface architecture and a unique coding style. He belongs to the world elite of Rubik’s Cubers and half of his brain is made of algorithms.

Markdown Cheat Sheet