Firefox OS

Webapps for Your Mobile Phone

http://anders.janmyr.com

@andersjanmyr

anders.janmyr@jayway.com

The First

Home Screen

Phone App

Contacts

Music Player

Notifications

Games

Architecture

Responsive Design

App Manifest

{
  "name": "FxOS Weather Local",
  "description": "A Firefox OS Weather App",
  "launch_path": "/",
  "icons": {
    "128": "/icons/128x128.png"
  },
  "default_locale": "en",
  "permissions": {
    "geolocation": {
      "description": "Access to geolocation"
    }
  }
}

# App Manifest activities, appcache_path, chrome, csp, default_locale, *description*, developer, fullscreen, *icons*, installs_allowed_from, launch_path, locales, messages, *name*, orientation, origin, permissions, redirects, type, version

Installation API


  navigator.mozApps.install()
  navigator.mozApps.installPackage()
  navigator.mozApps.getSelf()
  navigator.mozApps.getInstalled()
  navigator.mozApps.checkInstalled()

Installation API


var request = window.navigator.mozApps.install(manifestUrl);
request.onsuccess = function () {
  // Save the App object that is returned
  var appRecord = this.result;
  alert('Installation successful!');
};
request.onerror = function () {
  // Display the error information from the DOMError object
  alert('Install failed, error: ' + this.error.name);
};

App Cache

CACHE MANIFEST
# DATE 20130929_174017
CACHE:
index.html
css/main.css
css/images/icons-36-white.png
lib/word-maestro.js
...
NETWORK:
*
FALLBACK:
/upload  upload-offline.html

App Cache


      <html manifest="wordmaestro.appcache">

Geolocation

// Getting the current location
navigator.geolocation.getCurrentPosition(function(position) {
  do_something(position.coords.latitude, position.coords.longitude);
});

// Watching the location
var watchID = navigator.geolocation.watchPosition(function(position) {
  do_something(position.coords.latitude, position.coords.longitude);
});

Device Storage

var pics = navigator.getDeviceStorage('pictures');

// Let's browse all the images available
var cursor = pics.enumerate();
cursor.onsuccess = function () {
  var file = this.result;
  // Once we found a file we check if there is other results
  if (!this.done) {
    this.continue(); // Next result
  }
}
cursor.onerror = function () { // Handle error
}

WebSMS

// Simple SMS send
var request = navigator.mozMobileMessage.send(number, message);

// Getting a single message
 MozMobileMessageManager.getMessage()

WebMMS

var message = {
  receivers: numbers,
  subject: "Pic from my wedding"
  smil: '<smil><body><par><img src="wedding.jpg" />' +
        '<text src="txt" />/<par></body></smil>',
  attachments: [ { location: 'txt',
      content : new Blob(['Me and my wife'], {type: 'text/plain'})
    }, {
      location: 'wedding.jpg', content : file
    } ] }

// Send the message
navigator.mozMobileMessage.sendMMS(message);

Web Telephony

// Telephony object
var tel = navigator.mozTelephony;

// Check if the phone is muted (read/write property)
console.log(tel.muted);

// Check if the speaker is enabled (read/write property)
console.log(tel.speakerEnabled);

Web Telephony

// Place a call
var call = tel.dial("123456789");

// Above options as direct events
call.onconnected = function () {
    // Call was connected
};

call.ondisconnected = function () {
    // Call was disconnected
};
// Hang up call
call.hangUp();

Permissions

CSP

Content Security Policy (CSP)


"default-src *; script-src 'self';
object-src 'none'; style-src 'self'"

Questions

http://anders.janmyr.com

@andersjanmyr

anders.janmyr@jayway.com

## Resources * http://andersjanmyr.github.io/firefoxos-webapps-for-your-mobile-phone * http://goo.gl/omVvJj