Applications installables

Firefox OS

Firefox OS (aussi appelé par son nom de code Boot to Gecko ou B2G) est un système d'exploitation open source pour systèmes mobiles construit par Mozilla. Il se base sur un noyau Linux qui démarre un environnement d'exécution basé sur Gecko qui permet aux utilisateurs d'installer et de lancer des applications web. Gecko est le moteur de rendu utilisé par le navigateur Firefox afin d'afficher et de gérer le contenu d'une page web.

Firefox OS est accompagné de Gaia, qui constitue l'interface utilisateur de Firefox OS ainsi que d'un ensemble d'applications de base nécessaires pour gérer les fonctionnalités fondamentales du téléphone : les réglages, les appels, les SMS, l'appareil photo et la gestion des images, etc.

Les applications web Mozilla peuvent être installées sur Firefox OS ainsi que sur les autres plateformes disposant de Firefox grâce aux technologies Mozilla sur l'environnement Web. Pour plus d'informations sur ce sujet, voir les applications web pour Android, et les applications web pour Firefox pour le bureau. À l'avenir, ces technologies devraient être standardisées et adoptées sur plus de plateformes.

Workflow pour une application installable

Une application web installable ressemble fortement à une application web classique ou à un site web : elle est construite à partir des technologies web comme HTML, CSS et JavaScript. La différence réside parmi les fonctionnalités supplémentaires offertes par Firefox OS. Le schéma suivant illustre comment ces fonctionnalités interagissent.

1. On commence par une application web classique, construite avec les outils de votre choix.
2. On identifie cette application comme pouvant être installée grâce au fichier manifest.webapp, situé dans le répertoire racine de l'application. Cela permet de définir un certain nombre d'éléments concernant l'application comme son nom, ses icônes, les informations de localisation mais aussi et surtout les permissions nécessaires à l'application pour accéder aux API de l'appareil comme Camera, Device Storage, Bluetooth et SMS.
3. On ajoute les fonctionnalités qui reposent sur les API de l'appareil.
4. On ajoute les fichiers/médias nécessaires à l'application comme les icônes.
5. On crée un paquet et on distribue l'application. Il y a plusieurs façons pour le faire : une application hébergée auto-publiée (auquel cas il faut que vous écriviez votre procédure/outil d'installation) ou une application empaquetée distribuée via le Marketplace Firefox (qui gèrera l'installation pour vous).

Recommandations

Cette section fournit quelques recommandations et bonnes pratiques pour créer des applications web à installer.

Fichier de manifeste pour une application web

Le fichier manifest.webapp de votre application doit être placé à la racine du répertoire de votre application. Il contient une structure JSON qui est détaillée plus avant dans la référence du manifeste d'application. Voici un exemple simple d'un manifeste pour une application :

{
  "name": "Mon application",
  "description": "Description de l'application ici",
  "launch_path": "/index.html",
  "icons": {
    "512": "/img/icon-512.png",
    "128": "/img/icon-128.png"
  },
  "developer": {
    "name": "Votre nom ou organisation",
    "url": "https://votre-page-d-accueil.org"
  },
  "default_locale": "fr"
}

Pour des applications simples, c'est tout ce dont vous avez besoin. Vous pouvez cependant avoir besoin de champs supplémentaires, décrits par la suite.

Fonctionnalités, API matérielles et permissions

L'un des atouts de la plateforme Firefox OS est l'ajout de nouvelles API web pour accéder aux fonctionnalités clés de l'appareil comme les contacts ou les aspects matériels avec le NFC, le Bluetooth et les SMS. Il existe plusieurs exemples concernant ces nouvelles API qui sont présentées par la suite. Cette section vous aidera à trouver les API à utiliser pour certaines tâches. Parmi celles-ci, on peut trouver :

• La collecte et la modification de données : Accéder aux données de fichiers, aux données du matériel ( p. ex. la batterie, le capteur de proximité, le capteur de luminosité, le GPS) ainsi qu'aux données des services clés du téléphone ( p. ex. l'appareil photo, les contacts).
• L'envoi des notifications à l'utilisateur : En utilisant les API de notifications système, d'alarmes, et de vibration.
• Le bon fonctionnement de l'application hors ligne: En utilisant des API telles que IndexedDB, localStorage, ainsi que l'API propre à Firefox OS : Data Store.
• Les mécanismes de contrôle : Clavier, souris, pointeur, interface tactile, glisser-déposer, etc.
• Les notifications « push » : invoquées grâce à l'API web SimplePush, qui permettent d'activer une application lorsque l'appareil reçoit un message donné.
• Les Web Activities : Un moyen de communication entre applications, par exemple pour la prise de photos ou l'enregistrement vidéo. Cela permet généralement de mieux partager les fonctionnalités de plusieurs applications.
• Le contrôle de l'appareil pour la communication : SMS, Bluetooth, appels et NFC.

Les différentes API ont différents niveaux de sécurité, l'accès à certaines API étant limité. Cela fait sens car n'importe quelle application ne peut pas accéder aux SMS ou aux appels de l'appareil. Les différents niveaux de privilèges sont :

• Communes : Les API communes comme Notification, getUserMedia, IndexedDB, et Geolocation ne requièrent aucun privilège pour être utilisées. Certaines de ces API possèdent une couche supplémentaire de sécurité et, par exemple, un appel à getUserMedia ou Geolocation entraînera l'apparition d'un message demandant l'autorisation finale à l'utilisateur pour savoir s'il souhaite partager sa position GPS ou sa webcam.
• Privilégiées : Les API privilégiées ont un niveau de sécurité plus élevé que celui des API communes. Pour cette raison, les API privilégiées ne peuvent être utilisées qu'au sein d'applications empaquetées ayant été vérifiées sur le Marketplace Firefox (voir ci-après). Parmi ces API, on trouve Camera, Browser, Contacts et TCP Socket.
• Certifiées : Les API certifiées sont généralement critiques en termes de sécurité. Seules certaines applications installées par Mozilla ou le fabricant de l'appareil possèdent ce niveau de privilège. Parmi ces API, on trouve SMS, Bluetooth, ou celles des appels.

Pour demander la permission d'utiliser une API restreinte, il est nécessaire d'ajouter le champ permissions au fichier du manifeste et de modifier le champ type à privileged (dans le cas des API privilégiées). On aura alors un fichier qui ressemble à celui-ci :

"type" : "privileged",
"permissions": {
  "contacts": {
    "description": "Requise pour l'autocomplétion du partage d'écran",
    "access": "readcreate"
    },
  "alarms": {
    "description": "Requise pour planifier les notification"
  }
}

Utiliser les Web activities requiert également d'indiquer le type et les données requises dans le champ activities :

"activities": {
  "share": {
    "filters": {
      "type": [ "image/png", "image/gif" ]
    },
    "href": "toto.html",
    "disposition": "window",
    "returnValue": true
  }
}

Enfin, certaines API, comme les API Notification et Alarm, requièrent un champ messages, qui détaille le type de message système à capturer par l'application, ainsi que les pages de l'application qui gèrent ces messages :

"messages": [
    { "alarm": "/index.html" },
    { "notification": "/index.html" }
  ]

Icônes et bonnes pratiques de conception

Les bonnes pratiques pour concevoir une application Firefox OS sont très proches de celles utilisées pour concevoir n'importe quelle application web, que ce soit en termes de code ou en termes de design.

Utilisez des techniques de vue adaptative (responsive design) comme les media queries et le viewport afin d'être sûr que votre application fonctionne pour plusieurs tailles d'écrans. Étant donné que beaucoup d'appareils possèdent de hautes résolutions, utilisez l'argument resolution pour les media queries afin de les optimiser pour les différentes résolutions.

Vous pouvez tirer parti de blocs élémentaires et des patrons de conception disponibles dans la section Design.

Assurez-vous d'optimiser votre code du mieux possible pour qu'il puisse fonctionner sur des appareils à faible mémoire, qui représentent la plupart des appareils Firefox OS (voir le sujet sur les performances).

En ce qui concerne le style visuel de votre application, vous pouvez choisir ce que voulez. Malgré tout, plusieurs pistes, potentiellement utiles, sont présentées dans le Guide de style pour Firefox OS.

Pour les icônes de l'application, assurez-vous de fournir au moins une icône 512x512 ainsi qu'une icône 128x128. Voir la page sur l'implémentation des icônes pour les applications pour plus d'informations.

Empaquetage, installation et distribution des applications

Quand une application est prête à être distribuée, plusieurs choix s'offrent à vous pour la publier :

• Vous pouvez auto-publier une application hébergée. Pour cela, il suffit d'uploader votre application sur un serveur web, comme pour un site web classique, et d'inclure les fichiers nécessaires à l'application comme le manifeste, les icônes, etc... En plus de ces éléments, il faudra inclure du code permettant d'installer l'application sur l'appareil Firefox OS ou sur l'appareil qui utilise Firefox. Généralement, ce sera fait grâce à un <button> qui déclenche la méthode Apps.install lorsqu'il est utilisé. Cette méthode utilisera l'URL du fichier de manifeste. Attention, les applications hébergées n'offrent pas de fonctionnalités suffisantes pour fonctionner hors ligne à moins d'utiliser des technologies comme AppCache (ou, bientôt, les Service Workers.)
• Vous pouvez auto-publier une application empaquetée. Cela nécessite de compresser l'application et d'uploader le fichier compressé sur un serveur web. Cette archive devra contenir les éléments nécessaires à l'application comme le manifeste, les icônes, etc... En plus de cela, il faudra inclure un mini-manifeste dans le même répertoire contenant l'archive ainsi que du code pour installer l'application sur l'appareil Firefox OS ou sur l'appareil qui utilise Firefox. Généralement, ce sera fait grâce à un <button> qui déclenche la méthode Apps.install lorsqu'il est utilisé. Cette méthode utilisera le mini-manifeste.
• Vous pouvez publier une application empaquetée sur le Marketplace Firefox. Pour savoir comment faire, vous pouvez consulter la documentation Marketplace qui contient toutes les informations nécessaires.

Applications localisées

La localisation des applications se fait simplement. Pour rendre une application localisable, il faut :

1. Ajouter l'attribut spécial data-l10n-id à chaque élément HTML qui doit être localisé, la valeur de cet attribut étant un identifiant pour la chaîne. Par exemple : <h1 data-l10n-id="app-title">Mon application</h1>.
2. Inclure la bibliothèque l10n.js dans votre page en utilisant l'élément <script>.
3. Créer un dossier locales dans le répertoire de votre application. Ce dossier devra contenir un dossier pour chaque locale distincte, chacun de ces dossiers contenant un fichier app.properties comprenant les traductions sur chaque ligne. Par exemple : app-title = My App pour la locale anglaise.
4. Créer un fichier locales.ini dans le répertoire locales, qui définit la locale par défaut ainsi que le chemin pour chaque fichier app.properties. Cela devrait ressembler à :

   @import url(en/app.properties)
   
   [fr]
   @import url(fr/app.properties)

5. Référencer le fichier locales.ini dans le fichier HTML en utilisant un élément <link> comme ceci :

   <link rel="resource" type="application/l10n" href="locales/locales.ini" />

6. Mettre à jour le fichier de manifeste pour renseigner la locale par défaut ainsi que des champs pour les locales supportées :

   "default_locale": "en",
   "locales": {
     "fr": {
       "name" : "Mon application",
       "description" : "Description de l'applicaton"
     }
   }

Pour en savoir plus sur la localisation, lire Débuter la localisation d'une appplication et les autres articles sur la localisation d'applications.

Déboguer les applications

Plusieurs outils sont fournis par Mozilla pour vous aider à tester les applications web pour Firefox OS.

Tester sur Firefox (pour Bureau)

La façon la plus simple et la plus rapide pour tester les fonctionnalités de base de votre application est de l'utiliser avec le navigateur Firefox (ouvrir le fichier index.html avec le navigateur) qui supporte la plupart des fonctionnalités utilisées pour développer votre application (exception faite de certaines API matérielles). Depuis Firefox (pour bureau), vous pourrez lancer les outils de développement pour déboguer votre code, ainsi que la vue adaptative qui permet de tester les différentes tailles d'écrans pour les appareils mobiles.

Tester sur le simulateur Firefox OS

Vous pouvez tester votre application sur le simulateur Firefox OS en utilisant l'App Manager (et bientôt le nouveau WebIDE). Cela pourra vous donner un aperçu plus réaliste du comportement de l'application sur un appareil réel.

Tester sur un appareil Firefox OS

Certaines API liées à l'appareil (comme celle qui permet de gérer les vibrations) ne peuvent pas être testées sur un simulateur. Afin de tester complètement ces fonctionnalités, vous aurez besoin d'un appareil Firefox OS. Si vous en avez un, vous pouvez le connecter à votre ordinateur et installer les applications que vous avez localement via App Manager/WebIDE.

Utiliser Logcat

L'outil Android adb logcat peut s'avérer très utile pour déboguer les informations en sortie d'un appareil Firefox OS. Si vous êtes à l'aise avec les outils en ligne de commande, vous pourrez par exemple avoir des informations sur les applications en train de fermer grâce à la commande suivante :

adb logcat GeckoConsole:* *:F | grep -vE "parsing value|Unknown property|declaration|invalid source| but found |pseudo-"

Fonctionnalités supportées par les différentes versions de Firefox OS

Note that when developing apps for Firefox OS, you need to bear in mind what platform versions will be available on the devices your customers will have (see our available phones table for a list.) Remember that it is not as simple to update phone platform software as it is desktop software — users tend to be at the mercy of the network providers. You therefore need to develop apps to support these versions. As an example, multiline Flexbox doesn't work on Firefox OS versions below 1.3, so you may need to use a simpler layout method or provide a fallback for older versions.

This issue should go away soon, as more consumer Firefox OS devices appear, equipped with newer versions of Firefox OS out of the box.

Exemples

Vous pourrez trouver plusieurs exemples dans la section Build ; d'autres exemples sont également disponibles dans la section concernant les applications de référence.

Tutoriels

Les bases des applications installables

Applications empaquetées

Une application empaquetée est une application web dont toutes les ressources sont contenues dans un fichier zip au lieu de se trouver sur un serveur Web. Ici, vous apprendrez tout ce dont vous avez besoin de savoir sur les applications empaquetées.

Applications hébergées

Une application hébergée est une application web dont toutes les ressources (HTML, CSS, Javascript, manifeste d'application, etc.) sont présentes sur un serveur Web. Cet article vous expliquera tout ce que vous devez savoir à propos des applications hébergées.

Empaquetée ou hébergée ?

Devez-vous faire une application empaquetée ou hébergée ? Cet article vous aidera à vous décider.

Applications auto-publiées

Ce guide explique comment écrire le code qui contrôle la publication des applications, si vous préférez l'écrire vous-même plutôt que d'utiliser le Marketplace de Firefox.

Sujets avancés

Implémentation d'icônes pour les applications

Des astuces utiles sur l'implémentation d'icônes pour les applications, comprenant différentes tailles nécessaires pour les différentes plateformes (telles que Firefox OS) ainsi que des implémentations particulières.

Mise à jour des applications

Comment les mises à jour d'application sont prises en charge.

Référence

Manifeste d'application

Un guide détaillé sur les manifestes d'application Open Web et sur les différentes options qu'ils peuvent contenir.

Permissions des applications

Accéder aux API des appareils est la clé pour créer des applications utiles. Ici, vous verrez ce qui est disponible et comment y accéder.

Note: Vous pouvez utiliser le  générateur d'applications Firefox OS pour générer des applications Firefox OS automatiquement et les installer avec des permissions particulières.

Tableau de support pour les API de Firefox OS

Une liste des différentes API disponibles dans Firefox OS ainsi que leur support.

API d'installation et de gestion des applications

Une référence pour l'installation et la gestion des API qui contrôlent l'installation et d'autres fonctions des applications Open Web installables.

Détails spécifiques aux plateformes sur l'installation d'une application

Il y a quelques différences sur la façon d'installer des applications à travers les diverses plateformes qui supportent les applications Open Web. Cet article vous aidera à les comprendre.

FAQ

FAQ sur les manifestes d'application

Les questions fréquemment posées à propos des manifestes.