So you want to build a "web app"
...

Origial slides by @ColinFrei

Structure of Firefox OS

Gonk:

Kernel, used to actually start everything

Gecko:

Rendering engine, to render the GUI

Gaia:

GUI - all HTML, CSS, JavaScript

Web APIs
the fun part

APIs

• WebTelephony
• Vibration API
• WebSMS
• Idle API
• Screen Orientation
• Power Management API
• Mobile Connection API
• TCP Socket API
• Geolocation API
• WiFi Information API
• Device Storage API
• Contacts API
• Mouse Lock API
• Open WebApps
• WebBluetooth
• Network Information API
• Battery Status API
• Alarm API
• Proximity sensor
• Time/Clock API
• Push Notifications API
• Permissions API
• WebFM API
• FileHandle API
• Network Stats API
• WebPayment
• Ambient light sensor
• and more (like WebNFC!)

Ambient Light

window.ondevicelight = function (event) {

    console.log("Ambient light: " + event.value + " lux");

};
                    

Battery Status

var battery = navigator.battery;
/*
    battery.level: Battery level between 0 and 1
    battery.charging: true/false
    battery.chargingTime: Time left to fully charge, in seconds
    battery.dischargingTime: Time until fully discharged, in seconds
*/

console.log("Battery level: " + battery.level * 100 + "%");

navigator.battery.addEventListener(
    "levelchange",
    function() {
        // Update display with current battery level
    }
);
                    

Vibration API


navigator.vibrate(1000);


navigator.vibrate([200, 100, 200]);
                    

Push Notifications

// Setup Push Notifications
var reg = navigator.push.register();
reg.onsuccess = function(e) {
    var endpointUrl = e.target.result;
    // save endpointUrl to app server
}

navigator.mozSetMessageHandler('push', function(m) {
    var version = m.version;
    // do something based on version
});

//Unregister
navigator.push.unregister(endpointUrl);
                    

(Local) Notifications

var notification = navigator.mozNotification;

notification.createNotification(
    "Title",
    "Notification Text",
    iconUrl
);
                    

Open WebApps

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

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

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

WebPayment

var payment = navigator.mozPay(JsonWebToken);

payment.onsuccess = function() {
    // ...
    // Profit!
}
                    

More Links

Web
Activities

Two sides

• Use another app's functionality
• Offer functionality

Sharing an Image

var share = new MozActivity({
    name: "share",
    data: {
        type: "image/*",
        number: 1,
        blobs: [new Blob($('#imgToShare')[0], {type: "text/png"})]
    }
});

share.onsuccess = function() {
    // Do stuff
};
share.onerror = function () {
    // handle error
};
                    

Offering an Activity

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

Handling the Activity

navigator.mozSetMessageHandler('activity', function(request) {
    var options = request.source;
    if ("pick" === options.name) {
        // Do something with the image
    }
});
                    

Firefox OS Activities

browse

Browse a gallery to select a Photo

configure

Change phone settings

dial

Call someone

new

'add something': contact, email, sms

open

'open sthg': contact, gallery, music, video

pick

Retrieve data: contact, image, email

record

Take a picture or record video

and more..

More Links

Open Web App
manifest

Basic Manifest

{
    "name": "Cool App",
    "description": "This app lets you do really awesome stuff"
}
					

A bit more data

{
    "name": "Cool App",
    "description": "This app lets you do really awesome stuff",
    "icons": {
        "60": "/img/icon-60.png",
        "128": "/img/icon-128.png"
    },
    "fullscreen": true,
    "orientations": ["portrait","landscape-secondary"],
    "chrome": { "navigation": true},
    "developer": {
        "name": "Colin Frei",
        "url": "http://colinfrei.com"
    }
}
					

Adding Chrome

    "chrome": { "navigation": true}
                

Locales

{
    "name": "Cool App",
    "description": "This app lets you do really awesome stuff",
    "default_locale": "en",
    "locales": {
        "de": {
            "description": "Beschreibung der App"
        }
    }
}
                    

Web Activities

{
    "name": "Cool App",
    "description": "This app lets you do really awesome stuff",
    "activities": {
        "pick": {
            "href": "./pick.html",
            "disposition": "inline",
            "filters": {
                "type": ["image/*","image/jpeg","image/png"]
            },
            "returnValue": true
        }
    }
}
                    

Messages

{
    "name": "Cool App",
    "description": "This app lets you do really awesome stuff",
    "messages": [
        { "notification": "/dialer/index.html#keyboard-view" },
        { "alarm": "/facebook/fb_sync.html" }
    ]
}
                    

Market Restrictions

{
    "name": "Cool App",
    "description": "This app lets you do really awesome stuff",
    "installs_allowed_from": [
        "https://marketplace.firefox.com",
        "http://colinfrei.com"
    ]
}
                    

Permissions

{
    "name": "App Name",
    "description": "A description of your app",
    "type": "privileged",
    "permissions": {
        "desktop-notification": {
            "description": "Required to notify about stuff"
        }
    }
}
                    

Types

Permissions

• alarms
• audio-channel-*
• contacts
• desktop-notification
• geolocation
• storage
• systemXHR

Full List

Permissions

{
    "name": "App Name",
    "description": "A description of your app",
    "type": "privileged",
    "permissions": {
        "contacts": {
            "description": "Required to match users",
            "access": "readonly"
        }
    }
}
                    

Versions & Updating

{
    "name": "App Name",
    "description": "A description of your app",
    "version": "2.0"
}
                    

Bits & Pieces

Content Type:
application/x-web-app-manifest+json

Same Origin

Absolute Paths

More Links

Firefox Marketplace

Submitting your app

Review criteria

You can review apps too!

More Links

Thanks!

@MozillaCH on twitter!