Publier son application Firefox os sur le marketPlace Mozilla

Vous possédez une application html5 / JavaScript et vous souhaiter la portée sur Firefox OS ? Nous allons dans ce billet vous donner des Tips pour réussir à porter votre application.

Avant de commencer les portage nous allons parler de l’architecture d’un projet html5 / JavaScript.

[NB : pour cette explication nous partirons sur une architecture ci-dessus]

Le répertoire bootstrap :

Ici dans ce projet j’utilise un Framework de css web-responsive pour unifier le style de mon application est être sure du comportement de mon visuel. Pour ceux qui ne connaissent pas bootstrap, c’est un Framework css créé par l’équipe de développement de Twitter. Il sous licence libre vous pouvez donc l’utilisé dans vos projets sans aucun soucis. Voici le lien vers le projet ici.

[NB : pour avoir une architecture vraiment optimum nous vous conseillons d’avoir /css [pour le css] /img [pour les images] et /js [pour vous script JavaScript]]

Le répertoire icons :

Dans ce répertoire je vais y mettre toutes les icônes de mon application. L’icône de votre application comment elle apparait sur les mobile et sur le store doit être dimensionné sous différent format :

• Very-small : 16 px * 16 px.
• Small : 48 px * 48 px.
• Large : 66 px * 66 px.
• Extra-large : 128 px * 128 px.

Toutes les images doivent être en png.

[NB : il est très important que vos icones respectent bien ces dimensions sinon vous aurez des erreurs sur le store]

Le répertoire js :

Sur Firefox os il est impératif de séparer vos scripts JavaScript de vos pages HTML. Sinon vous aurez une erreur de ce style-là : Csp violation. Les applications sous Firefox os doivent séparer le code js du code HTML. Le store

[NB : bien séparé votre html et vos scripts JavaScripts]

Le manifest.webapp :

Comme dans toutes les applications mobile sur d’autre Platform (IOS, Windows phones ou Android) vous avez un fichier qui sert de carte d’identité et de configurateur pour votre application. Firefox os ne fait pas d’exception ! Ici il s’appelle manifest.webapp. Il est impératif que vous en ayez un est qu’il comprenne les informations ci-dessus au minimum. Pour ceux qui reconnaissent c’est du JSON. Ce fichier permet au mobile de savoir l’icône, les permissions le point d’entrée de votre application. Nous allons énumérer certains attributs de ce fichier :

• Version : c’est la version de votre application.
• Name : ceci et le nom de votre application
• Description : vous pouvez noter un petit texte pour dire e qu’elle fait.
• Launch_path : ici vous précisé le point d’entrée de votre application. En clair la page html lancer au démarrage de votre application.
• Icons : cet attribut contient les différents chemins vers vos icônes. Cet attribut et lui-même un objet JSON composé de dimension : chemin.
• Developper : cet attribut vos permet de dire qui est l’auteur de l’application et l’url de son site par exemple (Ici c’est moi et l’url de mon blog 😉 ).
• Default_local : permet de dire pour quelle est la langue de base de votre application.

Pour plus d’information sur le manifest nous vous invitons sur cette page.

[NB : votre application doit impérativement posséder un webapp]

[NB : Pour soumettre votre application sur le markeplace il faudra générer un zip qui contient votre projet ou de faire une application hosté ici]

En conclusion :

Votre application Html 5 / JavaScript va avoir quelque modification du style bien séparer vos script JavaScripts et vos pages HTML. Elle doit possédez un jeu d’image ou icônes définis à ces formats [« 16*16 », « 48 * 48 », « 66 * 66 », « 128 * 128 »]. Vous devez compléter votre manifest.webapp et le mettre à la racine de votre projet et bien le remplir. Pour les teste vous devez utiliser cette page.

Bon développement sur firefox os !