This document provides instructions for creating a simple Firefox OS application in six steps. It begins with an overview of the Firefox OS simulator and same origin policy restrictions. It then describes the webapp manifest file format and how to define icons, orientation, and installation permissions. The document demonstrates deploying an app to the simulator for live debugging and to the Firefox Marketplace. Source files for a sample app are outlined, including assets, styles, and deployment steps.

1. Markus Greve
November 2013
Kochan & Partner
Brand
Design
Development
A Firefox OS app in five minutes
Short introduction

2. A. Introduction
Firefox OS Simulator
Same Origin Policy
WebApp Manifest
Installation
B. Sample app
Overview source files
Assets and styleguide
Deployment to simulator
Deployment to »Firefox Marketplace«
Getting started: 6 steps
2
Kochan & Partner Brand Design Development

3. A. Introduction
3
Kochan & Partner Brand Design Development

4. Firefox OS Simulator
Simulator 4.0
Geeksphone Keon
Firefox OS 1.1
320 x 480
Firefox OS 1.1 or 1.2
320 x 480, 3.5 inch, 165 ppi
Single core, 800 MHz
RAM 512 MB
Internal HD 4 GB
Camera 3.1 MP
Home button
Simulate location
Rotate phone
portrait / landscape
4
Kochan & Partner Brand Design Development

5. Firefox OS Simulator
AddOn for Firefox 24/25
https://addons.mozilla.org/de/firefox/addon/firefox-os-simulator
Hint
5
Simulator 4.0 on Firefox 24/25 crashes on OS X 10.9 Mavericks.
Use Firefox 26b and »App Manager« to install simulator.
Kochan & Partner Brand Design Development

6. Firefox OS Simulator – Firefox 26 beta
Firefox OS 1.2
No more direct buttons for orientation and location?!
6
Kochan & Partner Brand Design Development

7. Same Origin Policy
App access is sandboxed
Installation of apps is limited to same origin as manifest
– domain
– protocol
– port
Hint
7
You need one subdomain per app!
Kochan & Partner Brand Design Development

8. WebApp Manifest
Named usually manifest.webapp
JSON file (~ info.plist for iOS apps)
https://developer.mozilla.org/en-US/Apps/Developing/Manifest
Mime-Type
AddType application/x-web-app-manifest+json .webapp
Hint
Stick to the data types of the documentation, e.g.
"fullscreen": "true" // not boolean true
"version": "0.1" // not floating point 0.1
Validation
https://marketplace.firefox.com/developers/validator
8
Kochan & Partner Brand Design Development

9. WebApp Manifest: Sample (1)
{
"name":
"Test App",
"version":
"0.1",
"description": "Short description of the app.",
"developer": {
"name":
"Markus Greve",
"url":
"http://www.kochan.de"
},
"launch_path": "/index.html",
"icons": {
"120":
"90":
//...
},
"/assets/icon-120.png",
"/assets/icon-90.png",
//...
9
Kochan & Partner Brand Design Development

10. WebApp Manifest: Sample (2)
//...
"orientation":
["portrait"],
"fullscreen":
"true",
"default_locale": "en",
"installs_allowed_from": [
"https://marketplace.firefox.com",
"https://app-specific-subdomain.kochan.de"
]
}
10
Kochan & Partner Brand Design Development

11. WebApp Manifest: Overview
activities
locales
appcache_path
manifest values
chrome
messages
csp
name*
default_locale
orientation
description*
origin
developer { name, url }
permissions
fullscreen
redirects
icons { 256, 128, 32 }
type
installs_allowed_from
version
launch_path
* required
11
Kochan & Partner Brand Design Development

12. Installation
Mozilla-specific API navigator.mozApp
Check if already installed
navigator.mozApp.checkInstalled(url)
Perform installation
navigator.mozApp.install(url, [receipts])
12
Kochan & Partner Brand Design Development

13. Installation: Sample
window.onload = function()
{
var check = navigator.mozApps.checkInstalled('http://...manifest.webapp');
check.onsuccess = function() {
if (check.result) {
// installed - nothing to do here, proceed
} else {
// not installed
var install = navigator.mozApps.install('http://...manifest.webapp');
install.onsuccess = function() {
alert('Installation successful!');
};
install.onerror = function() {
alert('Install failed, error: ' + this.error.name);
};
}
};
check.onerror = function() {
alert('Error checking installation status: ' + this.error.message);
};
}
13
Kochan & Partner Brand Design Development

14. B. Sample app
14
Kochan & Partner Brand Design Development

15. Overview source files
2
manifest.webapp
3
1
index.html
Download Package
http://lab.kochan.de/mg/fox/package.zip
15
some assets
icon-32.png
icon-128.png
icon-256.png
Kochan & Partner Brand Design Development

16. Assets and styleguide
Styleguide for user interface
https://www.mozilla.org/en-US/styleguide/products/firefox-os
Hint
Powerpoint template
– Draw icon shapes
– Re-arrange object order to keep overlay on top
– Export slide as image (about 3000 x 3000 px)
– cutout transparent image areas
– Re-size images to your needs
16
Kochan & Partner Brand Design Development

17. Deployment to Simulator
Parsed manifest meta data
App name, description, icon
Developer
Live-Debugging
– console
– inspector
– ...
URL of the webapps manifest file
17
Kochan & Partner Brand Design Development

18. Deployment to »Firefox Marketplace«
https://marketplace.firefox.com/developers/
Device: Phone, Browser, Firefox Mobile/Tablet on Android
Pricing: billing just in a couple of countries – not in Germany
Human based-approval
Position in queue and estimated time of approval is displayed after upload.
E.g. #37 of 37. About 6 days remaining.
18
Kochan & Partner Brand Design Development

19. Getting started: 6 steps
1
Install Firefox 26 beta
2
Install App-Manager and simulator: about:app-manager
3
Grab a (sub-)domain
4
Download simple starter package
http://lab.kochan.de/mg/fox/package.zip
5
6
19
Adjust path settings in index.html and manifest.webapp
Deploy your app to the simulator and see it work together
Kochan & Partner Brand Design Development

20. Thanx.
Kochan & Partner
Brand
Design
Development
© 2013 – All rights reserved
Kochan & Partner GmbH
Hirschgartenallee 25
D–80639 Munich
Phone +49 89 178 49 78
Fax +49 89 178 1235
kontakt@kochan.de
www.kochan.de