Introduction to Mozilla and Firefox OS











Michael Kohler

Mozilla Rep, Mozilla Switzerland
2015-11-10

About me - Michael Kohler

  • Volunteering for Mozilla since 2008
  • Mozilla Rep
  • Leader Mozilla Switzerland
  • Leader Mozilla German-speaking community
  • Web Developer @ netcase.ch
  • mkohler.dev

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: https://www.mozilla.org/en-US/about/manifesto/

Firefox

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

mozilla.ch

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

TVs

Internet of Things

TVs

TVs

b2gdroid

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

                
navigator.vibrate(1000);
                
              

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) {
  call.number;
});

tel.onincoming = function (e) {
  var incomingCall = e.call;
  console.log(incomingCall.id);
  incomingCall.answer();
};
                
              

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 = navigator.mozContacts.save(person);

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

saving.onerror = function(err) {
  console.error(err);
};
                
              

Permissions

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 (option.name === "pick") {
    // Do something to handle the activity...

    // Send back the result
    if (picture) {
      activityRequest.postResult({
        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() {
  console.log(this.error);
};
                
              

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": "http://mozilla.ch"
    }
}
                
              

marketplace.firefox.com

Installing an App

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

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

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

Apps Demo …

Addons

Addons

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://system.gaiamobile.org/index.html",
    "css": [],
    "js": ["index.js"]
  }],
  "icons": {
    "128": "128.png"
  }
}
                
              

Addon Demo …

How can I contribute?

Contribute generally

Promote Mozilla's mission

Ideas

File bugs at bugzilla.mozilla.org if you encounter anything that might be a bug or for features

Code

Testing (QA)

Design / UX

Localization

Marketing

...

Contributing to Firefox OS

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

Test b2gdroid

Fix bugs (bugzilla.mozilla.org, 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 lists.mozilla.org)

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)

Questions?

Thank you!

mkohler@picobudget.com

Twitter @KohlerSolutions
Reps reps.mozilla.org/u/michaelkohler/
MozillaCH mozilla.ch
MozillaCH twitter.com/MozillaCH
MozillaCH meetup.com/Mozilla-Meetup-Switzerland/