A Firefox OS app in five minutes

2.916 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie, News & Politik
0 Kommentare
1 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
2.916
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
6
Aktionen
Geteilt
0
Downloads
62
Kommentare
0
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

A Firefox OS app in five minutes

  1. 1. Markus Greve November 2013 Kochan & Partner Brand Design Development A Firefox OS app in five minutes Short introduction
  2. 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. 3. A. Introduction 3 Kochan & Partner Brand Design Development
  4. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 14. B. Sample app 14 Kochan & Partner Brand Design Development
  15. 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. 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. 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. 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. 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. 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

×