Developing for the FirefoxOS

Developing for the Firefox OS

Firefox OS - be the future

Firefox OS

Firefox OS

This year Firefox OS will be officially released in 10 countries

Internet activity

Operating system structure

Gaia - user interface

Gecko - application runtime

Gonk - Linux kernel + HAL

Platform Architecture

Webapp development

Open Web apps

Defined by manifest

          "name": "My App",
          "description": "My elevator pitch goes here",
          "launch_path": "/",
          "icons": { "128": "/img/icon-128.png" },
          "developer": {
            "name": "Your name or organization",
            "url": ""

App manifest

Web APIs

WebAPI wiki

WebAPI Wiki

Ambient Light API

          function ambientCallback(ambient) {
              // do something with ambient.value
                                  ambientCallback, false);

App Access levels

stored on your server, easy to upgrade, limited access

reviewed by the App store, packaged and signed

part of the OS, only for Mozilla and partners

Security model

Web Activities

Web Activities – Firefox OS: the platform HTML5 deserves

Web activities

  • configure
  • costcontrol
  • dial
  • open
  • pick
  • record
  • save-bookmark
  • share
  • view
  • new, f.e type: “websms/sms” or “webcontacts/contact”

Sending a number to the phone

        var call = new MozActivity({
          name: "dial",
          data: {
            number: "+1804100100"

Get an image from the phone (1/2)

Pick activity
        var getphoto = new MozActivity({
          name: "pick",
          data: {
            type: ["image/png", 

Get an image from the phone (2/2)

        getphoto.onsuccess = function () {
          var img = document.createElement("img");
          img.src = window.URL.createObjectURL(this.result.blob);
        getphoto.onerror = function () { // error

firefox os simulator


firefox os simulator

Simulator dashboard

Simulator dashboard

App Manager (future)

App Manager

Using App Manager

Prepare your phone

Go into settings and
Device Information > More Information > Developer
Switch on the Remote debugging

Linux users should also configure udev rule

Access to the console

adb logcat | grep JS

Cordova on Firefox OS

Cordova on Simulator

What You See Is What You (might) Get

App Designer

App designer website

Developing with Brick (1/2)

Add a component

          <div>I'm the front face.</div>
          <div>And I'm the back face.</div>

Brick website

Developing with Brick (2/2)

Use extended element in Javascript

        toggleButton.addEventListener("click", function(){

Brick website

Prototyping with JSFiddle

  1. Write your code as you might normally when making a JSFiddle
  2. Append /webapp.manifest to your Fiddle URL and paste this link into the Firefox OS simulator to install the app
  3. Alternatively, append /fxos.html to your Fiddle URL to get an install page like a typical Firefox OS hosted application

Using JSFiddle to prototype Firefox OS Apps

Mozilla Marketplace

Mozilla Marketplace

Firefox Marketplace

Submitting an app

  • Navigate to Marketplace for developers
  • Click on Submit an app
  • Provide hosted app URL or upload a zip
  • Fill in the details
  • Wait for approval, you can also change data and upload new versions.

Install apps from the web (hosted)

        var installApp = navigator.mozApps.install(manifestURL);
        installApp.onsuccess = function(data) {
          // App is installed
        installApp.onerror = function() {
         // App wasn't installed, info is in 

In-app payments

  • app calls navigator.mozPay() using signed JWT
  • Buyer logs-in, enters her PIN
  • app receives a callback
  • app server receives a signed POST request
  • You receive money directly deposited to your bank account

In-app payments API


Classic Diving
  • Piotr Zalewa
  • Senior Web Developer
  • Twitter: @zalun
  • Slides: