Cordova and Firefox OS - HTML5 for the Mobile Web

Cordova and Firefox OS - HTML5 for the Mobile Web

High-five at the Mozilla Festival!
Keep calm and trust HTML5

Upgrading the mobile world

Phone Selection
  • 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

Open Web Apps

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": "http://your-homepage-here.org"
          }
        }
      

App manifest

Three levels of access…

  • 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

Firefox OS Marketplace

Firefox OS Marketplace

https://marketplace.firefox.com/

Core Apps

  • coming from email
  • redirected to landing
  • redirected to landing
  • pointless menu
  • pointless menu
  • pointless menu
  • pointless menu
  • pointless menu

Social Apps

  • coming from email
  • redirected to landing
  • redirected to landing
  • pointless menu
  • pointless menu
  • pointless menu

Games

  • coming from email
  • redirected to landing
  • redirected to landing

Games

  • redirected to landing
  • redirected to landing
  • pointless menu
  • pointless menu

WebAPIs

Web APIs

WebAPI wiki

WebAPI Wiki

Web APIs (hosted apps)

  • 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

Battery API

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

Geolocation API

share geolocation
        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"
                }
            }
        

Web Workers with 1.3>

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

Promises with 1.4>

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

Web APIs (privileged apps)

  • 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
Need type set in manifest.webapp
         "type": "privileged"
      

Contacts API

          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" },
        

Web APIs (certified apps)

  • 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

Web Activities

pointless menu

Web activities

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

WebActivies Wiki -- WebActivities Description

Web Activity Receiver Manifest


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

Web Activity Receiver Handler


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

Web Activity Sender 1(2)

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

Web Activity Sender 2(2)

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

Sending a number to the phone

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

Activities/Hosted Apps on Android

Foxkeh loves android

APK Factory

APK Factory

APK Factory Access

  • Automatic - Done when installing Firefox OS App from Marketplace with Fennec installed
  • Sideload - Manifest link available in the Marketplace
  •  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  
          

    Framework Generators

    Cordova Plugin Support

    cordova dev site

    Full or Partial Support for 15 Plugins

    Battery Status Full Support (next version) Camera Partial Support
    Console Full Support Contacts Partial Support
    Device Partial Support Device Motion Full Support
    Device Orientation Partial Support Dialogs Full Support
    File Partial Support File Transfer Partial Support
    Geolocation Full Support Globalization Partial Support
    In App Browser Partial Support Media Not Supported
    Media Capture Not Supported Network Information Full Support
    Splashscreen Not Applicable Statusbar Not Applicable
    Vibration Full Support

    http://mozilla-cordova.github.io/

    Phonegap Developer App

    • Cordova Firefox OS Example

    https://hacks.mozilla.org/2014/09/phonegap-developer-app-preview-for-firefox-os/

    Cordova Sample App

    • Cordova Firefox OS Example

    https://github.com/mozilla-cordova/cordovasample

    Camera Plugin

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

    Device-Motion Plugin

    Device Motion Plugin
            	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); ....

    Device-Orientation Plugin

    Device Orientation Plugin
            	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); ....

    Geolocation Plugin

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

    InAppBrowser Plugin

    Browser Plugin
            	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);

    Firefox OS App With Cordova

        $ 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

    Tools

    Firefox Web IDE

    App Manager

    Web IDE allows live editing/debugging of App!

    Firefox Web IDE - Monitor

    App Manager

    Firefox Devtools Performance Monitor

    Dev Tools Performance

    Firefox Devtools Web Audio Editor

    Dev Tools Web Audio Editor

    Firefox Devtools Canvas Debugger

    Firefox OS Canvas Debugger

    Firefox Devtools Shader Editor

    Firefox OS Shader Editor

    Firefox Devtools Network Monitor

    Firefox OS Network

    Firefox Devtools Network Monitor

    Firefox OS Network

    Firefox Devtools Inspector

    transform example

    Firefox Devtools Storage Inspector

    transform example

    Firefox Tools Adapter - Valence

    App Manager

    Debug Other Browsers

    Firefox Tools Adapter Contd...

    • Currently only available in Firefox Nightly and Firefox Developer Edition
    • Chrome On Android - Chrome 37 or higher
    • Safari on iOS 7 and up - Mac and Linux
    • Chrome on Desktop
    App Manager

    iOS Safari Setup

    iOS Proxy
    • 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

    Chrome on Android Setup

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

    Chrome on port 9222

    iOS Proxy iOS Proxy
    • 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

    More Information

    Hacks Blog

    Hacks Blog

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

    Thanks