Firefox OS

What do I do?

What is Mozilla?

What is Mozilla?

“As a result of the intense competition among browser makers — a fight incited by Mozilla, then joined by Apple, Google and, lately, by Microsoft, whose share of the browser market has plummeted in the last decade — desktop web browsers have improved vastly over the past few years. They’re now ferociously fast, they can load and keep open hundreds of tabs, they’re extremely stable and they’re capable of handling highly complex websites.”

— Farhad Manjoo
(The New York Times, 2 May 2014)

What is Mozilla?

“The success of our mission depends on participation from people like you.”

What is Mozilla?

What is Firefox OS?

“Mozilla’s strategy has been to build Firefox OS primarily for emerging markets, where there are still billions of people who have yet to experience their first smartphone.”

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!

No!

What are Apps?

Applications

“...an "app" is really much more than just a shortened slang term. It's not just the term that's shortened, and it's not just the term that's slanged. It's also the application itself that's shortened and slanged...”
— Ian Bogost (21 Jan 2011)

What are Apps?

Single task

Limited attention

Focused UX

Touch UI

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

What isn't the Open Web?

What isn't the Open Web?

What is the Open Web?

The Web Wasn't Ready

“Telling developers that web apps are iPhone apps just doesn’t fly. Think about it this way: If web apps —

which are only accessible over a network;

which don’t get app icons in the iPhone home screen;

which don’t have any local data storage

— are such a great way to write software for iPhone,
then why isn’t Apple using this technique for any of their own iPhone apps?”

— John Gruber
(Daring Fireball, 11 Jun 2007)

HTML5 APIs

localStorage		Offline
IndexedDB		AppCache
History		Video
Geolocation		Audio
Touch Events		Canvas
Drag and Drop		WebGL
Web Workers		Media Capture
Web Sockets		WebRTC

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

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

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

Privileged Apps

“A privileged app is one that makes use of privileged APIs ... When submitted to the Firefox Marketplace, privileged apps are approved using a special process. This process gives users of the app a level of assurance that the app has been carefully reviewed for potential security, privacy and capability issues.”

Permissions

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

Certified Apps

“A certified app is one that makes used of certified APIs, APIs that offer access to critical system function such as the default dialer or the system settings app on a device. ... A certified app must be approved for a device by the OEM or carrier.”

Developer tools

Developer tools

Developer tools

Developer tools

Developer tools

Developer tools

Developer tools

Developer tools