mozilla
Vos résultats de recherche

    Applications installables

    Cette traduction est incomplète. Aidez à traduire cet article depuis l'anglais.

    Afin de promouvoir les applications web par rapport aux applications natives, il faut qu'elles aient suffisamment de fonctionnalités pour être installées sur les appareils. Parmi ces fonctionnalités, on retrouve le fait d'y accéder hors-ligne, d'avoir accès au contrôle du matériel via des API, ainsi qu'une meilleure intégration avec le système sous-jacent. La plupart de ces fonctionnalités ne sont pas encore standardisées mais plusieurs entités participent à ces efforts comme Google, Mozilla, Tizen, et d'autres.

    Cette section de MDN est une référence détaillée sur les sujets liés au développement d'applications web installables sur Firefox OS (ainsi que sur les autres plates-formes disposant de Firefox comme Android). Cela inclut : les manifestes d'applications, les fonctionnalités d'installation, les permissions à utiliser pour les API matérielles et plus encore.

    Note : Si vous découvrez la plateforme de Mozilla pour les applications web (open web apps en anglais), vous pouvez commencer avec le Guide de démarrage : il illustre les concepts de base sur les applications web/Firefox OS. Des vidéos sont également disponibles : Notions de base sur les applications pour Firefox OS.

    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ème 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 application web Mozilla peuvent être installées sur Firefox OS ainsi que sur les autres plates-formes 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 plates-formes.

    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édia 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": "http://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 plate-forme 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 :

    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 celle 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"
      }
    }

    Note : Vous pouvez déterminer exactement les permissions nécessaires pour chaque API grâce à la page référence sur les permissions d'applications. Cette référence liste également les versions de Firefox OS qui supportent chaque API. Pour savoir quelles sont les nouvelles fonctionnalités liées aux API pour chaque version de Firefox OS, voir la page Notes de versions Firefox OS pour les développeurs.

    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.

    Note : Les applications auto-publiées sont limitées à une seule application par origine et ne peuvent pas, pour des raisons de sécurité, accéder aux API privilégiées.

    Note : Un des problèmes fréquemment rencontrés concerne les chemins d'installation dans les fichiers de manifestes et les codes d'installation. Ces chemins devraient être relatifs à l'origine qu'est l'emplacement du serveur. Par exemple, si votre site se situe à https://www.mon-site.com/mon_appli/ et que votre manifeste se situe à https://www.mon-site.com/mon_appli/manifest.webapp, le chemin d'installation sera /mon-appli/manifest.webapp, et pas /manifest.webapp.

    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.

    Note : Pour tester l'installation d'une application, vous devrez placer les fichiers à un endroit du serveur qui ne possède pas d'autre application pour la même origine, sinon une erreur MULTIPLE_APPS_PER_ORIGIN_FORBIDDEN sera provoquée. Cela est dû à la mesure de sécurité qui consiste à n'avoir qu'une seule application par origine.

    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.

    Note : Le nouvel outil, WebIDE, n'est actuellement disponible que pour Firefox Nightly. Il sera rapidement propagé aux autres versions. Il couvre l'ensemble des fonctionnalités d'App Manager et offre de nouvelles améliorations comme l'édition de code au sein de l'application, la création de nouvelles application ainsi que des outils comme le Monitor, qui permet de mesurer les performances d'une application au cours de son cycle de vie.

    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.

    The current baseline platform we recommended developing for is Firefox OS 1.1.

    Note: MDN's web platform reference pages include browser/platform support information, plus you can find support information for more App-specific technologies on our Apps API Reference.

    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 divers 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.

    Étiquettes et contributeurs liés au document

    Contributors to this page: goofy_bz, Mini_Toad, SphinxKnight, Munto
    Dernière mise à jour par : Mini_Toad,