SlideShare a Scribd company logo
Markus Greve
November 2013

Kochan & Partner
Brand
Design
Development

A Firefox OS app in five minutes
Short introduction
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
A. Introduction

3

Kochan & Partner Brand Design Development
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
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
Firefox OS Simulator – Firefox 26 beta

Firefox OS 1.2
No more direct buttons for orientation and location?!
6

Kochan & Partner Brand Design Development
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
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
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
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
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
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
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
B. Sample app

14

Kochan & Partner Brand Design Development
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
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
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
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
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
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

More Related Content

What's hot

Selenium_WebDriver_Java_TestNG
Selenium_WebDriver_Java_TestNGSelenium_WebDriver_Java_TestNG
Selenium_WebDriver_Java_TestNG
Basul Asahab
 
Tools that help and speed up RWD dev
Tools that help  and speed up RWD devTools that help  and speed up RWD dev
Tools that help and speed up RWD dev
Matjaž Korošec
 
Guide To Effective Cross Browser Testing
Guide To Effective Cross Browser TestingGuide To Effective Cross Browser Testing
Guide To Effective Cross Browser Testing
Daniel Herken
 
Production Readiness Testing Using Spark
Production Readiness Testing Using SparkProduction Readiness Testing Using Spark
Production Readiness Testing Using Spark
Salesforce Engineering
 
Using galen framework for automated cross browser layout testing
Using galen framework for automated cross browser layout testingUsing galen framework for automated cross browser layout testing
Using galen framework for automated cross browser layout testing
Sarah Elson
 
DotNet Cologne 2015 - Windows 10 AppDev, Teil2: Coole APIs - (Daniel Meixner)
DotNet Cologne 2015 - Windows 10 AppDev, Teil2: Coole APIs - (Daniel Meixner)DotNet Cologne 2015 - Windows 10 AppDev, Teil2: Coole APIs - (Daniel Meixner)
DotNet Cologne 2015 - Windows 10 AppDev, Teil2: Coole APIs - (Daniel Meixner)
Daniel Meixner
 
Selenium and Open Source Advanced Testing
Selenium and Open Source Advanced TestingSelenium and Open Source Advanced Testing
Selenium and Open Source Advanced Testing
Austin Marie Gay
 
Automation testing on ios platform using appium
Automation testing on ios platform using appiumAutomation testing on ios platform using appium
Automation testing on ios platform using appium
Ambreen Khan
 
Live Source - an Agile Toolkit
Live Source - an Agile ToolkitLive Source - an Agile Toolkit
Live Source - an Agile Toolkit
Alline Oliveira
 
Appium overview
Appium overviewAppium overview
Appium overview
Abhishek Yadav
 
Dont fear software patching for operational technology
Dont fear software patching for operational technologyDont fear software patching for operational technology
Dont fear software patching for operational technology
Jo Ee Liew
 
Appium solution
Appium solutionAppium solution
Appium solution
Nael Abd Eljawad
 
Cross browser Testing on Mobile Devices
Cross browser Testing on Mobile DevicesCross browser Testing on Mobile Devices
Cross browser Testing on Mobile Devices
BabuDevanandam
 
Installing the java sdk
Installing the java sdkInstalling the java sdk
Installing the java sdk
Kennedy Kiprono
 
Mobile Automation with Appium
Mobile Automation with AppiumMobile Automation with Appium
Mobile Automation with Appium
Manoj Kumar Kumar
 
Single Sourcing RAP and RCP - Desktop and web clients from a single code base
Single Sourcing RAP and RCP - Desktop and web clients from a single code baseSingle Sourcing RAP and RCP - Desktop and web clients from a single code base
Single Sourcing RAP and RCP - Desktop and web clients from a single code base
Ralf Sternberg
 
Selenium Automation
Selenium AutomationSelenium Automation
Selenium Automation
Anuradha Malalasena
 
Play勉強会 playをGAEで動かそう!
Play勉強会 playをGAEで動かそう!Play勉強会 playをGAEで動かそう!
Play勉強会 playをGAEで動かそう!
Daisuke Kasuya
 
Appium workshop technopark trivandrum
Appium workshop technopark trivandrumAppium workshop technopark trivandrum
Appium workshop technopark trivandrum
Syam Sasi
 
Sauce Labs+Applitools - Automated Visual Testing in the Cloud
Sauce Labs+Applitools - Automated Visual Testing in the CloudSauce Labs+Applitools - Automated Visual Testing in the Cloud
Sauce Labs+Applitools - Automated Visual Testing in the Cloud
Sauce Labs
 

What's hot (20)

Selenium_WebDriver_Java_TestNG
Selenium_WebDriver_Java_TestNGSelenium_WebDriver_Java_TestNG
Selenium_WebDriver_Java_TestNG
 
Tools that help and speed up RWD dev
Tools that help  and speed up RWD devTools that help  and speed up RWD dev
Tools that help and speed up RWD dev
 
Guide To Effective Cross Browser Testing
Guide To Effective Cross Browser TestingGuide To Effective Cross Browser Testing
Guide To Effective Cross Browser Testing
 
Production Readiness Testing Using Spark
Production Readiness Testing Using SparkProduction Readiness Testing Using Spark
Production Readiness Testing Using Spark
 
Using galen framework for automated cross browser layout testing
Using galen framework for automated cross browser layout testingUsing galen framework for automated cross browser layout testing
Using galen framework for automated cross browser layout testing
 
DotNet Cologne 2015 - Windows 10 AppDev, Teil2: Coole APIs - (Daniel Meixner)
DotNet Cologne 2015 - Windows 10 AppDev, Teil2: Coole APIs - (Daniel Meixner)DotNet Cologne 2015 - Windows 10 AppDev, Teil2: Coole APIs - (Daniel Meixner)
DotNet Cologne 2015 - Windows 10 AppDev, Teil2: Coole APIs - (Daniel Meixner)
 
Selenium and Open Source Advanced Testing
Selenium and Open Source Advanced TestingSelenium and Open Source Advanced Testing
Selenium and Open Source Advanced Testing
 
Automation testing on ios platform using appium
Automation testing on ios platform using appiumAutomation testing on ios platform using appium
Automation testing on ios platform using appium
 
Live Source - an Agile Toolkit
Live Source - an Agile ToolkitLive Source - an Agile Toolkit
Live Source - an Agile Toolkit
 
Appium overview
Appium overviewAppium overview
Appium overview
 
Dont fear software patching for operational technology
Dont fear software patching for operational technologyDont fear software patching for operational technology
Dont fear software patching for operational technology
 
Appium solution
Appium solutionAppium solution
Appium solution
 
Cross browser Testing on Mobile Devices
Cross browser Testing on Mobile DevicesCross browser Testing on Mobile Devices
Cross browser Testing on Mobile Devices
 
Installing the java sdk
Installing the java sdkInstalling the java sdk
Installing the java sdk
 
Mobile Automation with Appium
Mobile Automation with AppiumMobile Automation with Appium
Mobile Automation with Appium
 
Single Sourcing RAP and RCP - Desktop and web clients from a single code base
Single Sourcing RAP and RCP - Desktop and web clients from a single code baseSingle Sourcing RAP and RCP - Desktop and web clients from a single code base
Single Sourcing RAP and RCP - Desktop and web clients from a single code base
 
Selenium Automation
Selenium AutomationSelenium Automation
Selenium Automation
 
Play勉強会 playをGAEで動かそう!
Play勉強会 playをGAEで動かそう!Play勉強会 playをGAEで動かそう!
Play勉強会 playをGAEで動かそう!
 
Appium workshop technopark trivandrum
Appium workshop technopark trivandrumAppium workshop technopark trivandrum
Appium workshop technopark trivandrum
 
Sauce Labs+Applitools - Automated Visual Testing in the Cloud
Sauce Labs+Applitools - Automated Visual Testing in the CloudSauce Labs+Applitools - Automated Visual Testing in the Cloud
Sauce Labs+Applitools - Automated Visual Testing in the Cloud
 

Viewers also liked

Muhammad Khubaib Ahmad
Muhammad Khubaib AhmadMuhammad Khubaib Ahmad
Muhammad Khubaib Ahmad
Muhammad Khubaib
 
Ilusionar para crecer
Ilusionar para crecerIlusionar para crecer
Start Tabletcafé Openbare Bibliotheek Utrecht
Start Tabletcafé Openbare Bibliotheek UtrechtStart Tabletcafé Openbare Bibliotheek Utrecht
Start Tabletcafé Openbare Bibliotheek Utrecht
Jan de Waal
 
Edraak-Certificate (1)
Edraak-Certificate (1)Edraak-Certificate (1)
Edraak-Certificate (1)Wael Halim?
 
Google for work 2016
Google for work 2016Google for work 2016
Google for work 2016
Jan de Waal
 
Digitaal jong en alert blijven najaar 2016
Digitaal jong en alert blijven najaar 2016Digitaal jong en alert blijven najaar 2016
Digitaal jong en alert blijven najaar 2016
Jan de Waal
 

Viewers also liked (6)

Muhammad Khubaib Ahmad
Muhammad Khubaib AhmadMuhammad Khubaib Ahmad
Muhammad Khubaib Ahmad
 
Ilusionar para crecer
Ilusionar para crecerIlusionar para crecer
Ilusionar para crecer
 
Start Tabletcafé Openbare Bibliotheek Utrecht
Start Tabletcafé Openbare Bibliotheek UtrechtStart Tabletcafé Openbare Bibliotheek Utrecht
Start Tabletcafé Openbare Bibliotheek Utrecht
 
Edraak-Certificate (1)
Edraak-Certificate (1)Edraak-Certificate (1)
Edraak-Certificate (1)
 
Google for work 2016
Google for work 2016Google for work 2016
Google for work 2016
 
Digitaal jong en alert blijven najaar 2016
Digitaal jong en alert blijven najaar 2016Digitaal jong en alert blijven najaar 2016
Digitaal jong en alert blijven najaar 2016
 

Similar to A Firefox OS app in five minutes

Fixing the mobile web - Internet World Romania
Fixing the mobile web - Internet World RomaniaFixing the mobile web - Internet World Romania
Fixing the mobile web - Internet World Romania
Christian Heilmann
 
M365 global developer bootcamp 2019
M365 global developer bootcamp 2019M365 global developer bootcamp 2019
M365 global developer bootcamp 2019
Thomas Daly
 
M365 global developer bootcamp 2019 PA
M365 global developer bootcamp 2019  PAM365 global developer bootcamp 2019  PA
M365 global developer bootcamp 2019 PA
Thomas Daly
 
Sencha touchonbb10 bootcamp
Sencha touchonbb10 bootcampSencha touchonbb10 bootcamp
Sencha touchonbb10 bootcamp
n_adam_stanley
 
Firebase Basics - Dialog Demo for Group Tech Staff
Firebase Basics - Dialog Demo for Group Tech StaffFirebase Basics - Dialog Demo for Group Tech Staff
Firebase Basics - Dialog Demo for Group Tech Staff
Tharaka Devinda
 
Cordova Mobile Application Developer Certification
Cordova Mobile Application Developer CertificationCordova Mobile Application Developer Certification
Cordova Mobile Application Developer Certification
Vskills
 
PWA Cheat Sheet 2023
PWA Cheat Sheet 2023PWA Cheat Sheet 2023
PWA Cheat Sheet 2023
Maximiliano Firtman
 
M365 global developer bootcamp 2019 Intro to SPFx Version
M365 global developer bootcamp 2019 Intro to SPFx VersionM365 global developer bootcamp 2019 Intro to SPFx Version
M365 global developer bootcamp 2019 Intro to SPFx Version
Thomas Daly
 
20210411 全端網頁開發起手式:建構並佈署Angular網頁應用程式至GCP
20210411 全端網頁開發起手式:建構並佈署Angular網頁應用程式至GCP20210411 全端網頁開發起手式:建構並佈署Angular網頁應用程式至GCP
20210411 全端網頁開發起手式:建構並佈署Angular網頁應用程式至GCP
Kun-Neng Hung
 
Cordova Tutorial
Cordova TutorialCordova Tutorial
Cordova Tutorial
Jacky Chen
 
Getting Acquainted with PhoneGap
Getting Acquainted with PhoneGapGetting Acquainted with PhoneGap
Getting Acquainted with PhoneGap
Joseph Labrecque
 
20141216 멜팅팟 부산 세션 ii - cross platform 개발
20141216 멜팅팟 부산   세션 ii - cross platform 개발20141216 멜팅팟 부산   세션 ii - cross platform 개발
20141216 멜팅팟 부산 세션 ii - cross platform 개발
영욱 김
 
(Christian heilman) firefox
(Christian heilman) firefox(Christian heilman) firefox
(Christian heilman) firefox
NAVER D2
 
Adobe AIR 2.5 Beta for Android
Adobe AIR 2.5 Beta for AndroidAdobe AIR 2.5 Beta for Android
Adobe AIR 2.5 Beta for Android
Mark Doherty
 
PHP on Google App Engine
PHP on Google App EnginePHP on Google App Engine
PHP on Google App Engine
tim4h0blyn
 
Introduction to Progressive web app (PWA)
Introduction to Progressive web app (PWA)Introduction to Progressive web app (PWA)
Introduction to Progressive web app (PWA)
Zhentian Wan
 
Building with Firebase
Building with FirebaseBuilding with Firebase
Building with Firebase
Mike Fowler
 
Progressive Web Apps - deep dive
Progressive Web Apps - deep diveProgressive Web Apps - deep dive
Progressive Web Apps - deep dive
Kenneth Rohde Christiansen
 
Digpen 7: Building mobile apps with PhoneGap
Digpen 7: Building mobile apps with PhoneGapDigpen 7: Building mobile apps with PhoneGap
Digpen 7: Building mobile apps with PhoneGap
Christian Cook
 
EMERCE - 2024 - AMSTERDAM - CROSS-PLATFORM TRACKING WITH GOOGLE ANALYTICS.pptx
EMERCE - 2024 - AMSTERDAM - CROSS-PLATFORM  TRACKING WITH GOOGLE ANALYTICS.pptxEMERCE - 2024 - AMSTERDAM - CROSS-PLATFORM  TRACKING WITH GOOGLE ANALYTICS.pptx
EMERCE - 2024 - AMSTERDAM - CROSS-PLATFORM TRACKING WITH GOOGLE ANALYTICS.pptx
thyngster
 

Similar to A Firefox OS app in five minutes (20)

Fixing the mobile web - Internet World Romania
Fixing the mobile web - Internet World RomaniaFixing the mobile web - Internet World Romania
Fixing the mobile web - Internet World Romania
 
M365 global developer bootcamp 2019
M365 global developer bootcamp 2019M365 global developer bootcamp 2019
M365 global developer bootcamp 2019
 
M365 global developer bootcamp 2019 PA
M365 global developer bootcamp 2019  PAM365 global developer bootcamp 2019  PA
M365 global developer bootcamp 2019 PA
 
Sencha touchonbb10 bootcamp
Sencha touchonbb10 bootcampSencha touchonbb10 bootcamp
Sencha touchonbb10 bootcamp
 
Firebase Basics - Dialog Demo for Group Tech Staff
Firebase Basics - Dialog Demo for Group Tech StaffFirebase Basics - Dialog Demo for Group Tech Staff
Firebase Basics - Dialog Demo for Group Tech Staff
 
Cordova Mobile Application Developer Certification
Cordova Mobile Application Developer CertificationCordova Mobile Application Developer Certification
Cordova Mobile Application Developer Certification
 
PWA Cheat Sheet 2023
PWA Cheat Sheet 2023PWA Cheat Sheet 2023
PWA Cheat Sheet 2023
 
M365 global developer bootcamp 2019 Intro to SPFx Version
M365 global developer bootcamp 2019 Intro to SPFx VersionM365 global developer bootcamp 2019 Intro to SPFx Version
M365 global developer bootcamp 2019 Intro to SPFx Version
 
20210411 全端網頁開發起手式:建構並佈署Angular網頁應用程式至GCP
20210411 全端網頁開發起手式:建構並佈署Angular網頁應用程式至GCP20210411 全端網頁開發起手式:建構並佈署Angular網頁應用程式至GCP
20210411 全端網頁開發起手式:建構並佈署Angular網頁應用程式至GCP
 
Cordova Tutorial
Cordova TutorialCordova Tutorial
Cordova Tutorial
 
Getting Acquainted with PhoneGap
Getting Acquainted with PhoneGapGetting Acquainted with PhoneGap
Getting Acquainted with PhoneGap
 
20141216 멜팅팟 부산 세션 ii - cross platform 개발
20141216 멜팅팟 부산   세션 ii - cross platform 개발20141216 멜팅팟 부산   세션 ii - cross platform 개발
20141216 멜팅팟 부산 세션 ii - cross platform 개발
 
(Christian heilman) firefox
(Christian heilman) firefox(Christian heilman) firefox
(Christian heilman) firefox
 
Adobe AIR 2.5 Beta for Android
Adobe AIR 2.5 Beta for AndroidAdobe AIR 2.5 Beta for Android
Adobe AIR 2.5 Beta for Android
 
PHP on Google App Engine
PHP on Google App EnginePHP on Google App Engine
PHP on Google App Engine
 
Introduction to Progressive web app (PWA)
Introduction to Progressive web app (PWA)Introduction to Progressive web app (PWA)
Introduction to Progressive web app (PWA)
 
Building with Firebase
Building with FirebaseBuilding with Firebase
Building with Firebase
 
Progressive Web Apps - deep dive
Progressive Web Apps - deep diveProgressive Web Apps - deep dive
Progressive Web Apps - deep dive
 
Digpen 7: Building mobile apps with PhoneGap
Digpen 7: Building mobile apps with PhoneGapDigpen 7: Building mobile apps with PhoneGap
Digpen 7: Building mobile apps with PhoneGap
 
EMERCE - 2024 - AMSTERDAM - CROSS-PLATFORM TRACKING WITH GOOGLE ANALYTICS.pptx
EMERCE - 2024 - AMSTERDAM - CROSS-PLATFORM  TRACKING WITH GOOGLE ANALYTICS.pptxEMERCE - 2024 - AMSTERDAM - CROSS-PLATFORM  TRACKING WITH GOOGLE ANALYTICS.pptx
EMERCE - 2024 - AMSTERDAM - CROSS-PLATFORM TRACKING WITH GOOGLE ANALYTICS.pptx
 

More from Markus Greve

Mobility – Do's und Don't im mobilen Web
Mobility – Do's und Don't im mobilen WebMobility – Do's und Don't im mobilen Web
Mobility – Do's und Don't im mobilen Web
Markus Greve
 
Mobile Patterns - Wie Apps und Co. digitale Interfaces revolutionieren
Mobile Patterns - Wie Apps und Co. digitale Interfaces revolutionierenMobile Patterns - Wie Apps und Co. digitale Interfaces revolutionieren
Mobile Patterns - Wie Apps und Co. digitale Interfaces revolutionieren
Markus Greve
 
HTML5 für Entwickler: Part 2, 2014
HTML5 für Entwickler: Part 2, 2014HTML5 für Entwickler: Part 2, 2014
HTML5 für Entwickler: Part 2, 2014
Markus Greve
 
HTML5 für Entwickler: Part 1, 2014
HTML5 für Entwickler: Part 1, 2014HTML5 für Entwickler: Part 1, 2014
HTML5 für Entwickler: Part 1, 2014
Markus Greve
 
Icons im Web: Roundtrip for a better web experience
Icons im Web: Roundtrip for a better web experienceIcons im Web: Roundtrip for a better web experience
Icons im Web: Roundtrip for a better web experience
Markus Greve
 
HTML5 für Entwickler: Part 1, 2 und 3, 2013
HTML5 für Entwickler: Part 1, 2 und 3, 2013HTML5 für Entwickler: Part 1, 2 und 3, 2013
HTML5 für Entwickler: Part 1, 2 und 3, 2013
Markus Greve
 
HTML5 für Entwickler: Part 1 und 2, 2013
HTML5 für Entwickler: Part 1 und 2, 2013HTML5 für Entwickler: Part 1 und 2, 2013
HTML5 für Entwickler: Part 1 und 2, 2013
Markus Greve
 
Wbfntdy 2012
Wbfntdy 2012Wbfntdy 2012
Wbfntdy 2012
Markus Greve
 

More from Markus Greve (8)

Mobility – Do's und Don't im mobilen Web
Mobility – Do's und Don't im mobilen WebMobility – Do's und Don't im mobilen Web
Mobility – Do's und Don't im mobilen Web
 
Mobile Patterns - Wie Apps und Co. digitale Interfaces revolutionieren
Mobile Patterns - Wie Apps und Co. digitale Interfaces revolutionierenMobile Patterns - Wie Apps und Co. digitale Interfaces revolutionieren
Mobile Patterns - Wie Apps und Co. digitale Interfaces revolutionieren
 
HTML5 für Entwickler: Part 2, 2014
HTML5 für Entwickler: Part 2, 2014HTML5 für Entwickler: Part 2, 2014
HTML5 für Entwickler: Part 2, 2014
 
HTML5 für Entwickler: Part 1, 2014
HTML5 für Entwickler: Part 1, 2014HTML5 für Entwickler: Part 1, 2014
HTML5 für Entwickler: Part 1, 2014
 
Icons im Web: Roundtrip for a better web experience
Icons im Web: Roundtrip for a better web experienceIcons im Web: Roundtrip for a better web experience
Icons im Web: Roundtrip for a better web experience
 
HTML5 für Entwickler: Part 1, 2 und 3, 2013
HTML5 für Entwickler: Part 1, 2 und 3, 2013HTML5 für Entwickler: Part 1, 2 und 3, 2013
HTML5 für Entwickler: Part 1, 2 und 3, 2013
 
HTML5 für Entwickler: Part 1 und 2, 2013
HTML5 für Entwickler: Part 1 und 2, 2013HTML5 für Entwickler: Part 1 und 2, 2013
HTML5 für Entwickler: Part 1 und 2, 2013
 
Wbfntdy 2012
Wbfntdy 2012Wbfntdy 2012
Wbfntdy 2012
 

Recently uploaded

ScyllaDB Tablets: Rethinking Replication
ScyllaDB Tablets: Rethinking ReplicationScyllaDB Tablets: Rethinking Replication
ScyllaDB Tablets: Rethinking Replication
ScyllaDB
 
Must Know Postgres Extension for DBA and Developer during Migration
Must Know Postgres Extension for DBA and Developer during MigrationMust Know Postgres Extension for DBA and Developer during Migration
Must Know Postgres Extension for DBA and Developer during Migration
Mydbops
 
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
"Scaling RAG Applications to serve millions of users",  Kevin Goedecke"Scaling RAG Applications to serve millions of users",  Kevin Goedecke
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
Fwdays
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
Antonios Katsarakis
 
Northern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving | Modern Metal Trim, Nameplates and Appliance PanelsNorthern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving
 
"NATO Hackathon Winner: AI-Powered Drug Search", Taras Kloba
"NATO Hackathon Winner: AI-Powered Drug Search",  Taras Kloba"NATO Hackathon Winner: AI-Powered Drug Search",  Taras Kloba
"NATO Hackathon Winner: AI-Powered Drug Search", Taras Kloba
Fwdays
 
GlobalLogic Java Community Webinar #18 “How to Improve Web Application Perfor...
GlobalLogic Java Community Webinar #18 “How to Improve Web Application Perfor...GlobalLogic Java Community Webinar #18 “How to Improve Web Application Perfor...
GlobalLogic Java Community Webinar #18 “How to Improve Web Application Perfor...
GlobalLogic Ukraine
 
Call Girls Chandigarh🔥7023059433🔥Agency Profile Escorts in Chandigarh Availab...
Call Girls Chandigarh🔥7023059433🔥Agency Profile Escorts in Chandigarh Availab...Call Girls Chandigarh🔥7023059433🔥Agency Profile Escorts in Chandigarh Availab...
Call Girls Chandigarh🔥7023059433🔥Agency Profile Escorts in Chandigarh Availab...
manji sharman06
 
inQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
inQuba Webinar Mastering Customer Journey Management with Dr Graham HillinQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
inQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
LizaNolte
 
GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)
Javier Junquera
 
Harnessing the Power of NLP and Knowledge Graphs for Opioid Research
Harnessing the Power of NLP and Knowledge Graphs for Opioid ResearchHarnessing the Power of NLP and Knowledge Graphs for Opioid Research
Harnessing the Power of NLP and Knowledge Graphs for Opioid Research
Neo4j
 
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectorsConnector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
DianaGray10
 
What is an RPA CoE? Session 2 – CoE Roles
What is an RPA CoE?  Session 2 – CoE RolesWhat is an RPA CoE?  Session 2 – CoE Roles
What is an RPA CoE? Session 2 – CoE Roles
DianaGray10
 
"Frontline Battles with DDoS: Best practices and Lessons Learned", Igor Ivaniuk
"Frontline Battles with DDoS: Best practices and Lessons Learned",  Igor Ivaniuk"Frontline Battles with DDoS: Best practices and Lessons Learned",  Igor Ivaniuk
"Frontline Battles with DDoS: Best practices and Lessons Learned", Igor Ivaniuk
Fwdays
 
Essentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation ParametersEssentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation Parameters
Safe Software
 
Containers & AI - Beauty and the Beast!?!
Containers & AI - Beauty and the Beast!?!Containers & AI - Beauty and the Beast!?!
Containers & AI - Beauty and the Beast!?!
Tobias Schneck
 
Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving
 
Y-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PPY-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PP
c5vrf27qcz
 
Getting the Most Out of ScyllaDB Monitoring: ShareChat's Tips
Getting the Most Out of ScyllaDB Monitoring: ShareChat's TipsGetting the Most Out of ScyllaDB Monitoring: ShareChat's Tips
Getting the Most Out of ScyllaDB Monitoring: ShareChat's Tips
ScyllaDB
 
Day 2 - Intro to UiPath Studio Fundamentals
Day 2 - Intro to UiPath Studio FundamentalsDay 2 - Intro to UiPath Studio Fundamentals
Day 2 - Intro to UiPath Studio Fundamentals
UiPathCommunity
 

Recently uploaded (20)

ScyllaDB Tablets: Rethinking Replication
ScyllaDB Tablets: Rethinking ReplicationScyllaDB Tablets: Rethinking Replication
ScyllaDB Tablets: Rethinking Replication
 
Must Know Postgres Extension for DBA and Developer during Migration
Must Know Postgres Extension for DBA and Developer during MigrationMust Know Postgres Extension for DBA and Developer during Migration
Must Know Postgres Extension for DBA and Developer during Migration
 
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
"Scaling RAG Applications to serve millions of users",  Kevin Goedecke"Scaling RAG Applications to serve millions of users",  Kevin Goedecke
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
 
Northern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving | Modern Metal Trim, Nameplates and Appliance PanelsNorthern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
 
"NATO Hackathon Winner: AI-Powered Drug Search", Taras Kloba
"NATO Hackathon Winner: AI-Powered Drug Search",  Taras Kloba"NATO Hackathon Winner: AI-Powered Drug Search",  Taras Kloba
"NATO Hackathon Winner: AI-Powered Drug Search", Taras Kloba
 
GlobalLogic Java Community Webinar #18 “How to Improve Web Application Perfor...
GlobalLogic Java Community Webinar #18 “How to Improve Web Application Perfor...GlobalLogic Java Community Webinar #18 “How to Improve Web Application Perfor...
GlobalLogic Java Community Webinar #18 “How to Improve Web Application Perfor...
 
Call Girls Chandigarh🔥7023059433🔥Agency Profile Escorts in Chandigarh Availab...
Call Girls Chandigarh🔥7023059433🔥Agency Profile Escorts in Chandigarh Availab...Call Girls Chandigarh🔥7023059433🔥Agency Profile Escorts in Chandigarh Availab...
Call Girls Chandigarh🔥7023059433🔥Agency Profile Escorts in Chandigarh Availab...
 
inQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
inQuba Webinar Mastering Customer Journey Management with Dr Graham HillinQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
inQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
 
GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)
 
Harnessing the Power of NLP and Knowledge Graphs for Opioid Research
Harnessing the Power of NLP and Knowledge Graphs for Opioid ResearchHarnessing the Power of NLP and Knowledge Graphs for Opioid Research
Harnessing the Power of NLP and Knowledge Graphs for Opioid Research
 
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectorsConnector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
 
What is an RPA CoE? Session 2 – CoE Roles
What is an RPA CoE?  Session 2 – CoE RolesWhat is an RPA CoE?  Session 2 – CoE Roles
What is an RPA CoE? Session 2 – CoE Roles
 
"Frontline Battles with DDoS: Best practices and Lessons Learned", Igor Ivaniuk
"Frontline Battles with DDoS: Best practices and Lessons Learned",  Igor Ivaniuk"Frontline Battles with DDoS: Best practices and Lessons Learned",  Igor Ivaniuk
"Frontline Battles with DDoS: Best practices and Lessons Learned", Igor Ivaniuk
 
Essentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation ParametersEssentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation Parameters
 
Containers & AI - Beauty and the Beast!?!
Containers & AI - Beauty and the Beast!?!Containers & AI - Beauty and the Beast!?!
Containers & AI - Beauty and the Beast!?!
 
Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024
 
Y-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PPY-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PP
 
Getting the Most Out of ScyllaDB Monitoring: ShareChat's Tips
Getting the Most Out of ScyllaDB Monitoring: ShareChat's TipsGetting the Most Out of ScyllaDB Monitoring: ShareChat's Tips
Getting the Most Out of ScyllaDB Monitoring: ShareChat's Tips
 
Day 2 - Intro to UiPath Studio Fundamentals
Day 2 - Intro to UiPath Studio FundamentalsDay 2 - Intro to UiPath Studio Fundamentals
Day 2 - Intro to UiPath Studio Fundamentals
 

A Firefox OS app in five minutes

  • 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