Kochan & PartnerBrandDesignDevelopment

A Firefox OS app in five minutesShort introduction

Markus Greve

November 2013

Kochan & Partner Brand Design Development

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 Development3

A. Introduction

Kochan & Partner Brand Design Development

Home button Simulate location

Rotate phone

portrait / landscape

4

Firefox OS Simulator

Geeksphone Keon

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

Simulator 4.0

Firefox OS 1.1

320 x 480

Kochan & Partner Brand Design Development5

Firefox OS Simulator

AddOn for Firefox 24/25https://addons.mozilla.org/de/firefox/addon/firefox-os-simulator

Simulator 4.0 on Firefox 24/25 crashes on OS X 10.9 Mavericks.

Use Firefox 26b and »App Manager« to install simulator.

Hint

Kochan & Partner Brand Design Development6

Firefox OS Simulator – Firefox 26 beta

Firefox OS 1.2

No more direct buttons for orientation and location?!

Kochan & Partner Brand Design Development

App access is sandboxed

Installation of apps is limited to same origin as manifest

– domain

– protocol

– port

You need one subdomain per app!

7

Same Origin Policy

Hint

Kochan & Partner Brand Design Development

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

Stick to the data types of the documentation, e.g.

"fullscreen": "true" // not boolean true"version": "0.1" // not floating point 0.1

Validationhttps://marketplace.firefox.com/developers/validator

8

WebApp Manifest

Hint

Kochan & Partner Brand Design Development

{ "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": "/assets/icon-120.png", "90": "/assets/icon-90.png", //... },

//...

9

WebApp Manifest: Sample (1)

Kochan & Partner Brand Design Development

//...

"orientation": ["portrait"],

"fullscreen": "true",

"default_locale": "en",

"installs_allowed_from": [ "https://marketplace.firefox.com", "https://app-specific-subdomain.kochan.de" ] }

10

WebApp Manifest: Sample (2)

Kochan & Partner Brand Design Development

activities

appcache_path

chrome

csp

default_locale

description*

developer { name, url }

fullscreen

icons { 256, 128, 32 }

installs_allowed_from

launch_path

locales

manifest values

messages

name*

orientation

origin

permissions

redirects

type

version

11

WebApp Manifest: Overview

* required

Kochan & Partner Brand Design Development

Mozilla-specific API navigator.mozApp

Check if already installed

navigator.mozApp.checkInstalled(url)

Perform installation

navigator.mozApp.install(url, [receipts])

12

Installation

Kochan & Partner Brand Design Development

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

Installation: Sample

Kochan & Partner Brand Design Development14

B. Sample app

Kochan & Partner Brand Design Development

Download Packagehttp://lab.kochan.de/mg/fox/package.zip

15

Overview source files

index.html

icon-32.png icon-256.pngicon-128.png

1

manifest.webapp2

some assets3

Kochan & Partner Brand Design Development

Styleguide for user interfacehttps://www.mozilla.org/en-US/styleguide/products/firefox-os

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

Assets and styleguide

Hint

Kochan & Partner Brand Design Development17

Deployment to Simulator

URL of the webapps manifest file

Parsed manifest meta data

App name, description, icon

Developer

Live-Debugging

– console

– inspector

– ...

Kochan & Partner Brand Design Development

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

Deployment to »Firefox Marketplace«

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

Kochan & Partner Brand Design Development

Install Firefox 26 beta

Install App-Manager and simulator: about:app-manager

Grab a (sub-)domain

Download simple starter packagehttp://lab.kochan.de/mg/fox/package.zip

Adjust path settings in index.html and manifest.webapp

Deploy your app to the simulator and see it work together

19

Getting started: 6 steps

1

2

3

4

5

6

Kochan & PartnerBrandDesignDevelopment

Thanx.

© 2013 – All rights reserved

Kochan & Partner GmbHHirschgartenallee 25

D–80639 MunichPhone +49 89 178 49 78

Fax +49 89 178 1235

kontakt@kochan.dewww.kochan.de