Introduction to Mozilla and Firefox OS

Michael Kohler

Mozilla Rep, Mozilla Switzerland

About me - Michael Kohler

  • Volunteering for Mozilla since 2008
  • Mozilla Rep
  • Leader Mozilla Switzerland
  • Leader Mozilla German-speaking community
  • Web Developer @

What is Mozilla?

To ensure the Internet is a global public resource open and accessible to all. An Internet that truly puts people first. An Internet where individuals can shape their own experience. An Internet where people are empowered, safe and independent.

Mozilla's Manifesto

The Internet is a an integral part of modern life

The Internet is a public resource that must remain open and accessible

Individuals’ security and privacy on the Internet are fundamental and must not be treated as optional.

Individuals must have the ability to shape the Internet and their own experiences on it.

Transparent community-based processes promote participation, accountability and trust.

For more points please see:


Firefox is a
trusted brand …

Firefox is the
independent choice!

Tracking Protection

Tracking Protection

It's Open …

Open Source and open for contributions

Mozilla and its products is not only the "Mozilla Corporation"

Thousands of volunteers!

You'll find Mozilla volunteers in every country

Mozilla Switzerland

Firefox OS

Why Firefox OS?

Built on Web technologies (HTML, CSS, JS)

Open platform

The Web is the platform!

Initial focus

Target feature phone users

affordable phones

got more or less crushed by low-end Android smartphones

New focus

More focus on high-end devices


Internet of Things




Sony Devices

Gonk (HAL, Kernel, ..)

Gecko (Rendering Engine)

Gaia (Graphical User Interface)

WebAPIs …

A few examples of WebAPIs

Geolocation API

Vibration API

Ambient Light API

Battery Status API

Push Notification API

Contacts API

Power Management API

.. and many more!

Vibration API


Battery Status API

navigator.getBattery().then(function(battery) {
  battery.addEventListener('chargingchange', function() {
    console.log("Battery charging? " + (battery.charging ? "Yes" : "No"));

  battery.addEventListener('levelchange', function() {
    console.log("Battery level: " + battery.level * 100 + "%");

  battery.addEventListener('chargingtimechange', function() {
    console.log("Battery charging time: " + battery.chargingTime + " seconds");

  battery.addEventListener('dischargingtimechange', function() {
    console.log("Battery discharging time: " + battery.dischargingTime + " seconds");

WebTelephony API

var tel = navigator.mozTelephony;

tel.dial("123456789").then(function(call) {

tel.onincoming = function (e) {
  var incomingCall =;

Notification API

if (!("Notification" in window)) {
  alert("Not supported!");
else if (Notification.permission === "granted") {
  var notification = new Notification("Hi there!");
else if (Notification.permission !== 'denied') {
  Notification.requestPermission(function (permission) {
    if (permission === "granted") {
      var notification = new Notification("Hi there!");

Contacts API

var contactData = {
  givenName: ["John"],
  familyName: ["Doe"],
  nickname: ["No kidding"]

var person = new mozContact(contactData);

var saving =;

saving.onsuccess = function() {
  console.log('new contact saved');

saving.onerror = function(err) {


Certified (only pre-installed apps)

Priviledged (from Marketplace)

Hosted (from anywhere)

Activities …

Register an activity

"activities": {
  "pick": {
    "href": "./pick.html",
    "disposition": "inline",
    "filters": {
      "type": ["image/*","image/jpeg","image/png"]
    "returnValue": true

Handle the activity

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

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

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

Starting an activity

var activity = new MozActivity({
  name: "pick",
  data: {
    type: "image/jpeg"

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

activity.onerror = function() {

Apps …

What are WebApps?

"Normal" websites with WebAPIs

+ manifest

Either "hosted" or packaged

Also available on Desktop and Android

Homescreen, Dialer, .. everything is a WebApp

The Manifest

    "name": "Cool App",
    "description": "This is an app!",
    "icons": {
        "60": "/img/icon-60.png",
        "128": "/img/icon-128.png"
    "fullscreen": true,
    "orientations": ["portrait","landscape-secondary"],
    "developer": {
        "name": "Michael Kohler",
        "url": ""

Installing an App

var appInstall = navigator.mozApps.install(manifestUrl);

appInstall.onsuccess = function(data) {
    // App installed!

appInstall.onerror = function() {
    console.log("Install failed: " +;

Apps Demo …



Based on WebExtensions API

Injects JS/CSS

Can modify all apps/websites

New in version 2.5

The Manifest - manifest.json

  "manifest_version": 2,
  "version": "1.1",
  "name": "Status Bar Battery Percentage",
  "description": "Adds the battery status percentage",
  "author": "Michael Kohler & André Fiedler",
  "content_scripts": [{
    "matches": "app://",
    "css": [],
    "js": ["index.js"]
  "icons": {
    "128": "128.png"

Addon Demo …

How can I contribute?

Contribute generally

Promote Mozilla's mission


File bugs at if you encounter anything that might be a bug or for features


Testing (QA)

Design / UX




Contributing to Firefox OS

Test it out on your device (if you have one that is supported)

Test b2gdroid

Fix bugs (, Firefox OS product)

Write add-ons and make it as customizable as Firefox Desktop is

Spread the word

Staying up to date

Follow MozillaCH on Twitter

Join our mailing list (community-switzerland on

Follow the dev-fxos mailing list

Come to our meetups

Write add-ons and make it as customizable as Firefox Desktop is

Spread the word

Learn about it on MDN

(all links are linked from the last few tweets on MozillaCH)


Thank you!

Twitter @KohlerSolutions