Web Applications and FirefoxOS Marketplace
Jorge Ferreiro - 28/11/2014
What is a WebApp?
Optimised version for mobile devices of a web page
What is a WebApp? @jgferreiro
• No updates: the user always accessthe latest production versionavailable on your server.
• Multiplatform: one design, multipledevices.
• Iterate fast: test your new featuresdirectly with the customer the sameday you released them.
Why webapps? @jgferreiro
• Performance: native applicationshave better performance (normallythey are compiled).
• Could exists some API’s limitations(depends on the platform).
• You may need to use frameworks(eg, phonegap, ionic) to publish yourApps on Android, IOs…
Drawbacks @jgferreiro
Some cool Webapps out there!
Candy rain 2 CameranOpenwapp
Examples @jgferreiro
How to develop a Webapp?
+ +HTML5 JS CSS3
Technology Mix!
How to develop? @jgferreiro
Useful Tool: Firefox OS Simulator
Tools kit @jgferreiro
Web webapp
So the idea is turning a website into a webapp... But, how can we do that?
App manifest
Required fields
JSON configuration file of your project.
App manifest: options @jgferreiro
App manifest: options @jgferreiro
Locales: Which languages you support?
App manifest: options @jgferreiro
Permissions: Indicates the API’s your Application is using
My webapp:
Music4deejays
A few months ago I had an idea...
Passion for electronic music
Nowadays is very difficult for artists and producers to be discovered.I like to solve problems creating online services / products
What motivates me?
What is Music4deejays?
ListenShare
Download
The best electronic music from emerging artists
Home page
Music4deejays screenshots @jgferreiro
Responsive Designto any Device
Music4deejays screenshots @jgferreiro
How to publish on
FirefoxOS Marketplace?
https://marketplace.firefox.com/developers/submit/
Firefox Marketplace
Publishing @jgferreiro
Type + Manifest Route
Publishing @jgferreiro
Error ☹ Configure .htacces file
AddType application/x-web-app-manifest+json .webapp
Add to .htaccess:
Publishing @jgferreiro
App Requirements
AddType application/x-web-app-manifest+json .webapp
Añadir al .htaccess:
Publishing @jgferreiro
Basic Information
AddType application/x-web-app-manifest+json .webapp
Añadir al .htaccess:
Publishing @jgferreiro
Just a few more steps and…
Ready! You only need Firefox approves the application
Publishing @jgferreiro
More information:
@Music4deejays
music4deejays.com
• https://marketplace.firefox.com/developers
/docs/deploy
• Curso HTML5 para Firefox OS.
• Pautas para el desarrollo de aplicaciones
• Distribuir tu aplicación
@jgferreiroInteresting links
Questions?