Who am I?

{computer,web,mad} scientist

{tech,scifi} writer

home{brew,roast}er

Mozillian

What do I do?

What is Mozilla?

What is Mozilla?

What is Mozilla?

What is Mozilla?

What is Mozilla?

What is Firefox OS?

What is Firefox OS?

What is Firefox OS?

~7 mobile operator partners, ~3 hardware partners

What is Firefox OS?

Gonk

Linux & Hardware Abstraction

Gecko

Firefox Core Engine

Gaia

Homescreen & Core Apps

What are Apps?

Appetizers!

What are Apps?

Appetizers!

No!

What are Apps?

Applications

What are Apps?

Single task

Limited attention

Focused UX

Touch UI

Cost $1 to $5 ($50 is really pushing it)

What's the Open Web?

What isn't the Open Web?

What isn't the Open Web?

What is the Open Web?

Apps on the Web

The Web Wasn't Ready

HTML5 APIs

"Add to home screen"

Adaptive App Search

Build Your Own Marketplace

Build Your Own Marketplace

Build Your Own Marketplace

Build Your Own Marketplace

Run Everywhere a Bunch of Places

The Open Web App Manifest

https://my-app.example.com/manifest.webapp

Content-Type: application/x-web-app-manifest+json

{
  "name": "My App",
  "description": "My elevator pitch goes here",
  "launch_path": "/index.html",
  "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

var manifestUrl = 'https://my-app.example.com/manifest.webapp';

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);
};

Web APIs

Web APIs

Web APIs

Vibration API

window.navigator.vibrate(200);
window.navigator.vibrate([200, 100, 200]);

Web APIs

Battery Status API

var battery = navigator.battery ||
              navigator.mozBattery || navigator.webkitBattery;

function updateBatteryStatus() {
  console.log("Battery status: " + battery.level * 100 + " %");

  if (battery.charging) {
    console.log("Battery is charging"); 
  }
}

battery.addEventListener("chargingchange", updateBatteryStatus);
battery.addEventListener("levelchange", updateBatteryStatus);
updateBatteryStatus();

Web APIs

Screen Orientation API

/* For portrait, we want the tool bar on top */
@media screen and (orientation: portrait) {
  #toolbar { width: 100%; }
}

/* For landscape, we want the tool bar stick on the left */
@media screen and (orientation: landscape) {
  #toolbar { position: fixed; width: 2.65em; height: 100%; }
}

var screen = window.screen;

screen.addEventListener("orientationchange", function () {
  console.log("The orientation of the screen is: " +
              screen.orientation);
});

screen.lockOrientation('landscape');

Web APIs

Device Orientation API

function handleOrientation(event) {
  var absolute = event.absolute;
  var z_rot    = event.alpha;
  var x_rot    = event.beta;
  var y_rot    = event.gamma;

  // Do stuff with the new orientation data
}

window.addEventListener("deviceorientation", handleOrientation,
                        true);

Web Activities

Web Activities

{
  // Other App Manifest related stuff

  // Activity registration
  "activities": {

    // The name of the activity to handle (here "pick")
    "pick": {
      "href": "./pick.html",
      "disposition": "inline",
      "filters": {
        "type": ["image/*","image/jpeg","image/png"]
      },
      "returnValue": true
    }
  }
}

Web Activities

navigator.mozSetMessageHandler('activity', function(activityRequest) {
  var option = activityRequest.source;

  if (option.name === "pick") {
    // Do something to handle the activity
    ...

    // Send back the result
    if (picture) {
      activityRequest.postResult(picture);
    } else {
      activityRequest.postError("Unable to provide a picture");
    }
  }
});

Web Activities

var activity = new MozActivity({
  // Ask for the "pick" activity
  name: "pick",

  // Provide the data required by 
  // the filters of the activity
  data: { type: "image/jpeg" }
});

activity.onsuccess = function() {
  var picture = this.result;
  console.log("A picture has been retrieved");
};

activity.onerror = function() {
  console.log(this.error);
};

Packaged Apps

Privileged Apps

Permissions

"permissions": {
  "contacts": {
    "description": "Required for autocompletion",
    "access": "readcreate"
  },
  "alarms": {
    "description": "Required to schedule notifications"
  }
}

Certified Apps

Developer tools

{ live demo goes here }

Developer tools

Developer tools

Developer tools

Developer tools

Developer tools

Developer tools

Developer tools

Developer tools