OUTLINE

• Architecture
• Web applications
  
• Web APIs
  
• Debugging and Validation
• Testing
  
• Publishing

INTO THE ARCHITECTURE

.. AS EASY AS

1. Create the app manifest
2. Serve the manifest with .webapp
3. Appify the code.
4. Validate the markup
   
5. 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, offline manifest,
  IndexedDB and access Web APIs for more options.

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

START WITH THE MANIFEST

<ONCE THE CODE IS READY>

MANIFEST REFERENCE

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

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

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

var constraints = { video: { facingMode: (front? 'user' : 'environment') } }

.. permissions

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

ALARM API

if(navigator.mozAlarms) {
  var myAlarmDate  = new Date(month.value + ' ' + day.value + ', ' + year.value + ' ' + hours.value + ':' + minutes.value + ':00')
  var data = {
    task: title.value
  }  var request = navigator.mozAlarms.add(myAlarmDate, 'ignoreTimezone', data)
  request.onsuccess = function () {
    console.log('Alarm sucessfully scheduled')
    var alarmRequest = navigator.mozAlarms.getAll()
    alarmRequest.onsuccess = function() {
      newAlarmId = this.result[(this.result.length)-1].id
    }
   }
}

.. respond to alarm

if(navigator.mozSetMessageHandler) {
  navigator.mozSetMessageHandler('alarm', function (alarm) {

    if(alarm.data.task) {
      // Create a notification when the alarm is due
      new Notification(alarm.data.task)
      updateNotified(alarm.data.task)
    }
  })
}

TEST IT OUT!

REFERENCES

Essential Components

http://buildingfirefoxos.com

Marketplace/developers

https://marketplace.firefox.com/developers/

FIREFOX.COM/OS

QUESTIONS?