Firefox OS

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

Example: Battery API

var battery = navigator.battery ||
              navigator.mozBattery ||
              navigator.webkitBattery,
    info = {
        charging: battery.charging,
        chargingTime: parseInt(battery.chargingTime / 60, 10),
        dischargingTime: parseInt(battery.dischargingTime / 60, 10),
        level: Math.round(battery.level * 100)
    };
                    

Example: Battery API - cont.

APIs are event driven!

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

Example: Geolocation API*

navigator.geolocation.getCurrentPosition(handleLocation);

function handleLocation(position) {
    var latitude = position.coords.latitude;
    var longitude = position.coords.longitude;
}

// Or watch the current position...
var watchID = navigator.geolocation.watchPosition(function(position) {
    handlePostion(position.coords.latitude, position.coords.longitude);
});
                    

Example: Vibration API

var pattern = [200, 100, 200, 200, 100],
    goodVibration = navigator.vibrate(pattern);

                    

Example: Notification API

Needs permissions granted by users! (e.g. webapp.manifest)

"permissions": {
  "desktop-notification": {
    "description": "Allows to display notifications on the user's desktop."
  }
}
                    

// At first, let's check if we have permission for notification
// If not, let's ask for it
if (Notification && Notification.permission !== "granted") {
    Notification.requestPermission(function (status) {
          if (Notification.permission !== status) {
                Notification.permission = status;
          }
});
}

if (Notification && Notification.permission === "granted") {
    var n = new Notification("Hi!");
}
                    

Example: Connection API

Get information about current connection

var connection = navigator.connection ||
                 navigator.webkitConnection ||
                 navigator.mozConnection;

function updateConnectionStatus() {
    console.log("Connection changed");
    console.log("Bandwidth: " + connection.bandwidth);
    console.log("Metered: " + connection.metered);
}

connection.onchange = updateConnectionStatus;
                    

Example: Ambientlight

Get current Lux of ambient light

window.ondevicelight = function (event) {
    // Read out the lux value
    var lux = event.value;
};
                    

Example: Contacts API

Read/Write/Delete Contacts - Permission required!

"permissions": {
    "contacts":{
        "description": "Contacts permissions is required to write contact from Google to your Firefox OS phone",
        "access": "readwrite" }
  }
}
                    

var contactData = {
    givenName: ["John"],
    familyName: ["Doe"]
};

var person = new mozContact(contactData);
// save the new contact
var saving = navigator.mozContacts.save(person);

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

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

Example: Device Storage API

Save/Read from sdcard, photo, music, video ...

"permissions": {
    "device-storage:pictures":{ "access": "readwrite" },
    "device-storage:sdcard":{ "access": "readwrite" }
}
                    

var sdcard = navigator.getDeviceStorage("sdcard"),
    file = new Blob(["This is a text file."], {type: "text/plain"}),
    request = sdcard.addNamed(file, "my-file.txt");

request.onsuccess = function () {...}
request.onerror = function () {...}

var pics = navigator.getDeviceStorage('pictures');
// browse all the images available
var cursor = pics.enumerate();
cursor.onsuccess = function () {
      var file = this.result;
      console.log("File found: " + file.name);

      // check if there is other results
      if (!this.done) {
            // Then we move to the next result, which call the cursor
            // success with the next file as result.
            this.continue();
      }
}
                    

And there are many more!

APIs at MDN

Web activities

• configure
• costcontrol
• dial
• open
• pick
• record
• save-bookmark
• share
• view
• update

new: f.e type: “websms/sms” or “webcontacts/contact”

Example: Dial a number

var call = new MozActivity({
    name: "dial",
    data: {
        number: "+49123456789"
    }
});
                    

Invokes "native" Dialer app

Example: Open an URL

var openURL = new MozActivity({
    name: "view",
    data: {
        type: "url", // Possibly text/html in future versions
        url: "http://www.developer-week.de/"
    }
});
                    

Invokes "native" browser

Example: Send a SMS

var sms = new MozActivity({
    name: "new",
    data: {
        type: "websms/sms",
        number: "+49987654321"
    }
});
                    

Invokes "native" messaging app

Example: Pick an image

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

Result

Example: Pick an image - cont.

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

Register an app as activity handler

{
    // Other App Manifest related stuff

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

Handle an 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(picture);
        } else {
            activityRequest.postError("Unable to provide a picture");
        }
    }
});