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

Me



@colinfrei

Topics

  1. Web APIs
  2. Web Activities
  3. App Manifest
  4. Marketplace

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
  • Browser API
  • Time/Clock API
  • Push Notifications API
  • Permissions API
  • WebFM API
  • FileHandle API
  • Network Stats API
  • WebPayment
  • Ambient light sensor
  • Proximity sensor

Ambient Light


window.ondevicelight = function (event) {

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

};
                    
W3C Specification

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
    }
);
                    
W3C Specification

Vibration API



navigator.vibrate(1000);


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

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);
                    
SimplePush on MDN

(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

Overview of WebAPIs
Boilerplate App (Example Code)
Web API Blog Post

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
costcontrol/*
Cost control functionality
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
save-bookmark
Save a bookmark to the home screen

Firefox OS Activities (2)

share
Share via bluetooth/email, also used to set picture as wallpaper
view
Open sthg: browser, email, pdf, video
update
Update a contact

More Links

Wiki Documentation
Example Code in Boilerplate App
Web Activities Intro Blogpost

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"
    }
}
					
Firefox OS App Icon Guidelines

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": [
        { "telephony-new-call": "/dialer/index.html#keyboard-view" },
        { "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

Web Privileged Certified
Hosted
Packaged

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 OS App Icon Guidelines
Blog Post about Manifests evolving
Manifest specification
App Permissions

Firefox Marketplace

Submitting your app

Review criteria

You can review apps too!


Reviewer Application

More Links

Marketplace Review Criteria
Blog Post "Become a Marketplace Reviewer"

Thanks!