Cordova and Firefox OS - HTML5 for the Mobile Web

• Targeted at new, emerging markets
• Very affordable hardware
• No credit card needed - client billing
• Web technologies through and through
• Released in 24 countries including Brazil, Germany, Poland, Hungary, Venezuela, Serbia, Columbia
• 13 Operators including Telefonica, Deutsche Telekom, Telenor
• 12 Smart Phones

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

App manifest

• Hosted apps- stored on your server, easy to upgrade, limited access.
• Privileged apps- reviewed by the App store, packaged and signed
• Certified apps- part of the OS, only by Mozilla and partners

App permissions

https://marketplace.firefox.com/

• WebRTC - MediaStream, RTCPeerConnection, RTCDataChannel (2.0)
• Vibration API
• Screen Orientation
• Geolocation API
• Open WebApps
• Network Information API
• Battery Status API
• Alarm API
• Push API
• Notifications API
• WebFM API / FMRadio
• WebPayment
• IndexedDB
• Ambient light sensor
• Proximity sensor
• Pointer Lock API
• File Handle API
• Web Activities

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

        navigator.geolocation.getCurrentPosition(function (position) {
           geo.innerHTML = "Lat:" + 
           position.coords.latitude + 
        ", Long:" + position.coords.longitude;
            },
            function () {
                geo.innerHTML = "Failed...";
            });
        Need permissions in webapp.manifest.
        "permissions": {
                "geolocation": {
                    "description" : "location"
                }
            }
        

var myWorker = new Worker("js/worker.js");
myWorker.onmessage = function (oEvent) {
  alert("Worker said : " + oEvent.data);
};
myWorker.postMessage("John");
//worker.js
onmessage = function (oEvent) {
  self.setTimeout(
    function() {
    	  postMessage("Hi " + oEvent.data);
    }, Math.random() * 2000 + 1000);
};
        

var p1 = new Promise(
  function(resolve, reject) {
    window.setTimeout(
      function() {
        var secs = Math.random() * 2000 + 1000;
        resolve(secs / 1000);
     }, secs);
    });
p1.then(
  function(val) {
    alert("promise done in " + val + " secs");
   });
        

• Device Storage API
• Browser API
• TCP Socket API
• Contacts API
• systemXHR
• Keyboard
• Camera API - as of 2.0
• Mobile Identity API - as of 2.0

         "type": "privileged"
      

          var contact = new mozContact();
          contact.init({name: "William"});
          var request = navigator.mozContacts.save(contact);
          request.onsuccess = function() {
            // contact generated
          };
          request.onerror = function() {
            // contact generation failed
          };
          Permission must be set in manifest.webapp
          "contacts":{ "access": "readwrite" },
        

• Telephony
• WebSMS
• Idle API
• Settings API
• Power Management API
• Mobile Connection API
• WiFi Information API
• Bluetooth
• Permissions API
• Network Stats API
• Time/Clock API
• Attention screen
• Voicemail
• Wappush
• Background Services
• WebNFC
• DataStore

• browse
• configure
• costcontrol
• dial
• open
• pick
• record
• save-bookmark
• share
• view
• update
• new: type:"mail", “websms/sms” or “webcontacts/contact”

WebActivies Wiki -- WebActivities Description

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

        navigator.mozSetMessageHandler('activity',function(activityRequest) { 
          var option = activityRequest.source;
          if (activityRequest.source.name === "pick") {
            // Do something to handle the activity
            if (picture) {
              activityRequest.postResult(picture);
            } else {
              activityRequest.postError("Unable to provide a picture");
            }
          }
        });
      

        
        var activity = new MozActivity({
          name: "pick",
          // Provide the data required by the
          //filter of the activity
          data: {
            type: "image/jpeg"
          }
        });
      

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

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

 Install App - Mac Example
 curl "https://controller.apk.firefox.com/application.apk? manifestUrl=
 https://marketplace.firefox.com/app/
 c599acd5-2ced-42b7-a5a9-0096a8da6176/manifest.webapp"
  -o "bumpertest.apk" && adb install bumpertest.apk  
      

        	Implements navigator.camera.getPicture();
			caveat: Implemented with MozActivity
navigator.camera.getPicture(function (src) {
    var img = document.createElement('img');
    img.src = src;
    }, function () {}, 
    {destinationType: 1}
);       	    
      

        	Implements the following methods:
    
navigator.accelerometer.getCurrentAcceleration
    
navigator.accelerometer.watchAcceleration
    
navigator.accelerometer.clearWatch
var options = {
    frequency: 50
};
watchIDAccel = navigator.accelerometer.
watchAcceleration(onSuccess, onError, options);
function onSuccess(acceleration) {
    var acX = acceleration.x.toFixed(1) * -1;
    var acY = acceleration.y.toFixed(1);
    var acZ = acceleration.z.toFixed(1);
....    	    
      

        	Implements the following methods:
    
navigator.compass.getCurrentHeading
    
navigator.compass.watchHeading
    
navigator.compass.clearWatch
var options = {
    frequency: 300
};
watchID = navigator.compass.
watchHeading(onSuccess, onError, options);
function onSuccess(heading) {
    myHeading = 
    (heading.magneticHeading).toFixed(2);
....    	    
      

        	This plugin provides location information
navigator.geolocation.
getCurrentPosition(onSuccess, onError);
var onSuccess = function (position) {
	var geodata = [position.coords.latitude, 
		position.coords.longitude, 2, 2];
		...
}
 
      

        	This plugin provides browser within the app

        	
Does not allow access to Cordova APIs
        	
Need to add CSS for targe _blank
browserRef = window.open(
'https://developer.mozilla.org',
 '_blank', 'location=yes');
var el = document.
querySelector(".inAppBrowserWrap");
setOutput(el);	
 
      

    $ sudo npm install -g cordova
    $ cordova create hello com.example.hello HelloWorld
    $ cd hello
    $ cordova platform add firefoxos 
    $ cordova prepare firefoxos
    //add device specific plugins
    $ cordova plugin add org.apache.cordova.geolocation 
      

Building Cordova apps for Firefox OS

• Enable Web Inspector in Safari Advanced Settings
• Download iOS Webkit Debug Proxy
• run ios_webkit_debug_proxy from Terminal
• Select iOS Proxy from WebIDE Connect Menu

• Enable developer mode and USB Debugging
• Select Google Chrome from WebIDE Connect Menu

• Run Chrome with Remote Debugging Enabled
• open -a Google\ Chrome\ Canary --args --remote-debugging-port=9222 --disable-web-security
• Select Debug Port 9222 from Firefox Toolbar

https://hacks.mozilla.org/category/firefox-os/

• Jason Weathersby
• Technical Evangelist
• Twitter @JasonWeathersby
• https://github.com/JasonWeathersby