OUTLINE

What is Firefox OS?
Why Firefox OS?
Architecture
Web applications
Web APIs
Debugging and Validation
Testing
Publishing

What is Firefox OS?

Firefox OS is an open platform for mobile devices built entirely using HTML5 and other Open web standards which is free from the rules and restrictions of existing proprietary platforms.

Why firefox os?

•Uses Simple Technology used by Lot of Web Developers.

•Open Independent and Standardized.

•Developer Friendly.

•Portable across Devices.

INTO THE ARCHITECTURE

.. AS EASY AS

Create the app manifest
Serve the manifest with .webapp
Appify the code.
Validate the markup
Publish the app

YES! YOU CAN !

Reuse any existing web site/app or develop from scratch with
open web standards.

Utilize HTML5 features such as localStorage, oﬄine manifest,
IndexedDB and access Web APIs for more options.

Responsive web design for adapting to varying resolutions and screen orientation.

START WITH THE 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"
},
"default_locale": "en"
}

MANIFEST REFERENCE

https://developer.mozilla.org/en-US/docs/Web/Apps/Manifest

hosted apps and packaged apps

dive

into

API

Web Telephony

// Telephony object
var tel = navigator.mozTelephony


// Place a call
var cal = tel.dial('123456789')

WEB SMS

// SMS object
var sms = navigator.mozSMS

// Send a message
sms.send('123456789', 'Hello world!')

// Recieve a message
sms.onreceived = function (event) {
  console.log(event.message)
}

AUDIO && VIDEO

var p = navigator.mediaDevices.getUserMedia({ audio: true, video: true })

p.then(function(mediastream) {
   var video = document.querySelector('video')
   video.src = window.URL.createObjectURL(mediaStream)
   video.onloadedmetadata = function(e) {
      // Do something with the video here.
   }
}

p.catch(function(e) {
  console.log(e.name)
})

.. front camera?

var front = false
document.getElementById('flip-button').onclick = function() {
  front = !front
}

.. permissions

"permissions": {
  "audio-capture": {
    "description": "Required to capture audio using getUserMedia()"
  },
  "video-capture": {
    "description": "Required to capture video using getUserMedia()"
  }
}