View
1.887
Download
3
Category
Preview:
DESCRIPTION
A short introduction to developing apps for Firefox OS. This first roundup covers two parts: 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
Citation preview
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
Recommended