Sandesh Gade
Abhiram Ravikumar

OUTLINE

Architecture
Web apps Development
App Validation
Simulator Testing
Publishing Apps
Game Dev Intro
Find your field

THE ARCHITECTURE

Mozilla Developer Network

Web apps are apps built using standard Web technologies.

They work in any modern Web browser, and can be developed
using your favorite tools.

The Open Web apps project proposes some small additions to existing sites to turn them into apps that run in a rich, fun, and
powerful computing environment.

These apps run on desktop browsers and mobile devices, and are easier for a user to discover and launch than Web sites.

for Web developers

Create the app manifest.
Serve the manifest with .webapp
Appify the code.
Validate the markup.
Simulate the tarball.
You're DONE!

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

deep dive

into

"" API ""

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

// Place a call

var cal = tel.dial(“123456789”);

// SMS object

var sms = navigator.mozSMS;

// Send a message
sms.send("123456789", "Hello");

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

// Read message
console.log(event.message);
};

// Vibrate for one second
navigator.vibrate(1000);

// Vibration pattern [vibrationTime, pause,…]
navigator.vibrate([200, 100, 200, 100]);

// Vibrate for 5 seconds
navigator.vibrate(5000);

// Turn oﬀ vibration
navigator.vibrate(0);

var contact = new contact();
contact.init({name: "Tom"});
var request = navigator.contacts.save(contact);

request.onsuccess = function() {
console.log("Success");

request.onerror = function() {
console.log("Error")

// Portrait mode:
screen.mozLockOrientation("portrait");

/*
    Possible values:
        "landscape"
        "portrait"
        "landscape-primary"
       "landscape-secondary"
           "portrait-primary"
        "portrait-secondary"
*/