Making HTML5 work with Firefox OS

Making HTML5 work with Firefox OS

firefox phone

Mobile World Congress 2013

Mobile World Congress

Mobile World Congress 2013

Mobile World Congress

The star of the show

Firefox phone

Explaining Firefox OS

Explaining Firefox OS

The VW Beetle of Smartphones

VW Beetle

The VW Beetle of Smartphones?

  • Affordable by everyone
  • Built on sturdy technology
  • Lots of interchangeable parts - adding and upgrading is easy
  • Built on a trusted engine that doesn't boil over
  • Making mobility and independence affordable

Replacing feature phones

Nokia couldn't take photos

HTML5 through and through…

Beetle Parts Photo by Alden Jewell

But HTML5 can't do…

Pouting dog

False measures

HTML5 is more than the iphone

Give me that hardware!

Hardware blowup

Open Web Apps?

Pimped Beetle

Marketplace ✔

Firefox marketplace

Firefox Marketplace

Find app by content ✔

The search interface of Firefox OS

Defined by manifest

          "name": "My App",
          "description": "My elevator pitch goes here",
          "launch_path": "/",
          "icons": { "128": "/img/icon-128.png" },
          "developer": {
            "name": "Your name or organization",
            "url": ""

App manifest

Three levels of access…

  • Hosted apps - stored on your server, easy to upgrade, limited access.
  • Privileged apps - reviewed by the App store, uses a Content Security Policy, hosted on trusted server
  • Certified apps - part of the OS, only by Mozilla and partners

App permissions

Web APIs (hosted apps)

  • Vibration API
  • Screen Orientation
  • Geolocation API
  • Mouse Lock API
  • Open WebApps
  • Network Information API
  • Battery Status API
  • Alarm API
  • Push Notifications API
  • WebFM API / FMRadio
  • WebPayment
  • IndexedDB
  • Ambient light sensor
  • Proximity sensor
  • Notification

Using WebAPIs to make the web layer more capable

Install apps from the web

        var installapp = navigator.mozApps.install(manifestURL);
        installapp.onsuccess = function(data) {
          // App is installed
        installapp.onerror = function() {
         // App wasn't installed, info is in 

Battery API

          var b = navigator.battery;
          if (b) {
            var level=Math.round(battery.level * 100) + "%",
                charging=(battery.charging) ? "" : "not ",
                chargeTime=parseInt(battery.chargingTime / 60, 10),
            b.addEventListener("levelchange", show);
            b.addEventListener("chargingchange", show);
            b.addEventListener("chargingtimechange", show);
            b.addEventListener("dischargingtimechange", show);

Web APIs (privileged apps)

  • Device Storage API
  • Browser API
  • TCP Socket API
  • Contacts API
  • systemXHR

Using WebAPIs to make the web layer more capable

Contacts API

          var contact = new mozContact();
          contact.init({name: "Christian"});
          var request =;
          request.onsuccess = function() {
            // contact generated
          request.onerror = function() {
            // contact generation failed

Web APIs (certified apps)

  • WebTelephony
  • WebSMS
  • Idle API
  • Settings API
  • Power Management API
  • Mobile Connection API
  • WiFi Information API
  • WebBluetooth
  • Permissions API
  • Network Stats API
  • Camera API
  • Time/Clock API
  • Attention screen
  • Voicemail

Using WebAPIs to make the web layer more capable

Why not all for hosted apps?

Pouting dog

Web Activities

  • configure
  • costcontrol
  • dial
  • open
  • pick
  • record
  • save-bookmark
  • share
  • view
  • new, f.e type: “websms/sms” or “webcontacts/contact”

Giving control to the user

Pick activity

Sending a number to the phone

        var call = new MozActivity({
          name: "dial",
          data: {
            number: "+1804100100"

Get an image from the phone (1/2)

        var getphoto = new MozActivity({
          name: "pick",
          data: {
            type: ["image/png", "image/jpg", "image/jpeg"]

Get an image from the phone (2/2)

        getphoto.onsuccess = function () {
          var img = document.createElement("img");
          if (this.result.blob.type.indexOf("image") != -1) {
            img.src = window.URL.createObjectURL(this.result.blob);
        getphoto.onerror = function () { // error

You want some of that?

Pawing Puppy

Developer Hub

Developer Hub

Firefox OS Developer Hub

Developer tools

Firefox devtools

Simulator in the browser


Firefox OS Simulator 1.0 is here!

Firefox OS Boilerplate

Boilerplate App

Boilerplate App on GitHub

Phones for developers


Activities/Hosted Apps on Android

Foxkeh loves android

The web ride is far from over!

There is no earthly way of knowing which direction we are going

Thanks, join us!

that's all firefox