Why go mobile?

Mozilla's mission is to promote openness, innovation and opportunity on the web.

What this means for the mobile web

Firefox 4.0 for Android

Time to take a different approach

Native Android UI

Building a native browser UI

Message passing

Java to JS

Create a GeckoEvent in Java:

GeckoEvent e = GeckoEvent.createBroadcastEvent("my-event", "data");

Add an observer in JS:

Services.obs.addObserver(observer, "my-event", false);
function observer(aSubject, aTopic, aData) {
  // Do some stuff

JS to Java

Create a JSON message in JS:

let message = {
  gecko: {
    type: "another-event", ...

Register a listener in Java:

GeckoAppShell.registerGeckoEventListener("another-event", listener);
GeckoEventListener listener = new GeckoEventListener() {
  public void handleMessage(String event, JSONObject message) {
    // Do some stuff

Let's see how this works in practice

The back button

In Java, use an Android API to listen for a back button press:

public void onBackPressed() {
  GeckoEvent e = GeckoEvent.createBroadcastEvent("Session:Back", "");

In JS, use a Gecko API to navigate back in session history:

Services.obs.addObserver(handleBackPressed, "Session:Back", false);
function handleBackPressed(aSubject, aTopic, aData) {

Updating a tab's title

Listen for DOMTitleChanged events in JS, and pass them along to Java:

Tab.prototype = {
  create: function(...) {
    this.browser.addEventListener("DOMTitleChanged", this, true);
  handleEvent: function(aEvent) {
    let message = {
      gecko: {
        type: "DOMTitleChanged",
        tabID: this.id,
        title: aEvent.target.title }

Update the tab's title in the native Java UI:

GeckoAppShell.registerGeckoEventListener("DOMTitleChanged", listener);

GeckoEventListener listener = new GeckoEventListener() {
  public void handleMessage(String event, JSONObject message) {
    int tabId = message.getInt("tabID");
    Tab tab = Tabs.getInstance().getTab(tabId);

    String title = message.getString("title");

Open Web Apps

Open Web App manifest

An Open Web App manifest contains information that lets the browser interact with the app

  "name": "My App",
  "description": "My elevator pitch goes here",
  "launch_path": "/",
  "icons": {
    "128": "/img/icon-128.png"
  "developer": {
    "name": "Your name or organization",
    "url": "http://your-homepage-here.org"
  "default_locale": "en"

Installing an Open Web App

To self-publish an app from a page that you control, you can trigger installation of the app

// Request to install an Open Web App
var request = window.navigator.mozApps.install(manifestUrl);
request.onsuccess = function() {
  // Save the App object that is returned
  var appRecord = this.result;
  alert('Installation successful!');
request.onerror = function() {
  // Display the error information from the DOMError object
  alert('Install failed, error: ' + this.error.name);

Firefox Marketplace

You can also install apps from the Firefox Marketplace

Firefox OS (aka B2G)

Firefox OS architecture

New WebAPIs

Telephony API

var telephony = navigator.mozTelephony;

// Make an outgoing call
var outgoing = telephony.dial(phoneNumber);

// Receive an incoming call
telephony.incoming = function onincoming(event) {
  var incoming = event.call;

  // Answer the call

Wifi API

var wifiManager = navigator.mozWifiManager;

// Current network

// List available networks

Web Activities API

// Launch an activity
var activity = new MozActivity({
  name: 'share',
  data: { type: 'image/png', url: ... }
activity.onerror = function() { alert(activity.error.name); };
// Handle an activity request
navigator.mozSetMessageHandler('activity', function(request) {
  if (request.source.name === 'share') {
    var data = request.source.data;

Open Web Apps (revisited)

It's just like Firefox for Android!

Firefox Marketplace on Firefox OS

(This should look familiar)

Tools for developing Open Web Apps

Responsive Design View and Page Inspector

Remote Debugger

Remote Web Console

Built-In Profiler

Sneak Preview: Developer Toolbox

Ways to learn more