Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

Cet article propose une introduction aux Applications Web Ouvertes (Open Web Apps) installables sur Firefox OS et autres plateformes compatibles. Il inclut la façon dont elles sont créées et en quoi elles diffèrent des standards du web. Ceci est à destination des développeurs web tout comme des développeurs mobile natifs.

Un message disant que j'aime le web, ainsi que les appareils de tailles d'écran différents pour représenter la nature réactive du web moderne.

Les Applications Web Ouvertes ne sont pas très différentes des sites web. Elles sont construites en utilisant les mêmes technologies (HTML, CSS, JavaScript, etc.) et sont accessibles en utilisant un navigateur web. Les différences tiennent dans leur capacité à être installées, à fonctionner hors-ligne, à interagir avec l'appareil (caméra, gyroscope, carnet d'adresses, etc.) et dans l'accès au Marketplace.

Ces applications sont facilement accessibles, en particulier pour les développeurs web et les développeurs mobile. Elles sont bien plus portables d'une plateforme à l'autre que leurs équivalentes natives ou enfermées dans un système propriétaire.

Note: Les Applications Web Ouvertes sont installables sur Firefox OS, et seront installables sur de multiples plateformes grâce à la technologie Web Run Time de Mozilla (déjà disponible pour Android). Dans le futur, les technologies devraient être standardisées et adoptées par un plus grand nombre de plateformes.

Firefox OS

Firefox OS (aussi connu sous le nom de code Boot to Gecko ou B2G) est le système d'exploitation mobile open source de Mozilla. Il est basé sur un noyau Linux et le moteur d'exécution Gecko qui permet aux utilisateurs d'installer et d'exécuter des applications. Gecko est le moteur de rendu utilisé par le navigateur Firefox pour afficher du contenu Web.

Firefox OS est accompagné d'une suite d'applications pré-installées appelées Gaia, qui prennent en charge les fonctions fondamentales du téléphone comme les réglages, les appels, les SMS, la prise et le stockage de photos, etc.

Support des différentes versions de Firefox OS

Lorsque vous développez une application pour Firefox OS, gardez à l'esprit que les appareils ne sont pas tous sur la même version. Nous recommandons de développer et tester avec Firefox 1.1. Vous trouverez les différences entre versions dans la documentation de référence du MDN et la documentation de l'API. Par exemple la caméra n'a pas besoin des mêmes autorisations sur la 1.4 et sur la 2.0.

Compétences requises

Comme mentionné plus haut, les applications sont basées sur les technologies du Web : HTML, CSS et Javascript. Si vous avez déjà écrit une page web, vous connaissez déjà les bases. Ce guide est compréhensible sans, mais nous vous conseillons de suivre le Guide du débutant pour en apprendre d'avantage sur le développement d'application web.

Outils nécessaires

Vous pouvez développer des applications avec des outils simples, libres et gratuits, que vous utilisez peut-être déjà pour le développement web. Nous suggérons :

Une fois cela fait, vous pourrez exécuter votre application sur mobile ; soit sur un téléphone déjà sous Firefox OS, soit en l'installant sur un mobile compatible, comme les Google Nexus.

Votre première application

Ce chapitre a pour objectif de vous lancer dans la création et l'exécution d'une application installable, pour vous montrer à quel point cela est rapide et facile. Vous trouverez la structure de base sur Github (Télécharger le zip). À partir de là, nous écrirons le code ensemble.

Structure de base

Notre application a pour objectif d'utiliser l'API de la batterie pour en obtenir le niveau de charge et de vérifier si elle est en cours de chargement ou non. Des alertes préviendront l'utilisateur via les vibrations (voir l'API Vibration) et le système de notification (voir l'API Notifications).

Pour démarrer, nous allons utiliser la structure de fichier suivante :

  • battery-quickstart-starter-template/
    • index.html
    • images/
      • battery.svg
      • icon-128.png
    • scripts/
      • battery.js
      • install.js
    • style/
      • style.css
    • .htaccess
    • README.md
  • index.html : document principal de notre application avec lequel tous les autres vont interagir.
  • images : contient une icone utilisée par l'interface de l'application, ainsi que l'icone de l'application elle-même.
  • scripts : contient le code JavaScript qui implémente les fonctionnalités de l'application. Il contient deux fichiers pour le moment vierges : battery.js and install.js.
  • style : contient la feuille de style style.css.
  • .htaccess : fichier de configuration Apache pour utiliser le type mime application/x-web-app-manifest+json pour le fichier manifest.webapp que nous allons créer dans la chapitre suivant. Vous pouvez faire cela avec n'importe quel serveur HTTP si vous n'utilisez pas Apache, référez-vous à leur documentation pour ajouter ce type mime le cas échéant.
  • README.md : fichier « Lisez-moi » en syntaxe markdown pour expliquer ce à quoi sert notre code.

Créer le manifest

Chaque application a besoin d'un fichier manifest.webapp à sa racine. Cela fournit des informations importantes telles que numéro de version, nom, description, traductions, URI de son icone, permissions, etc.

Ajoutez le contenu suivant dans un fichier manifest.webapp que vous créerez à la racine du projet.

{
  "name": "Battery",
  "description": "Battery provides a good template for an in-app battery/charge indicator with different visualization choices, plus ideas of what could be changed once battery level gets low.",
  "launch_path": "/index.html",
  "icons": {
    "128": "/images/icon-128.png"
  },
  "developer": {
    "name": "Chris Mills",
    "url": "http://www.conquestofsteel.co.uk"
  },
  "permissions": {
    "desktop-notification": {
      "description": "Needed for creating system notifications."
    }
  }
}

Note : pour plus d'informations sur ce qu'il se passe ici, consultez la documentation des manifests.

Note : les URI du manifest doivent être relatifs à la racine du serveur. Par exemple, si l'application se situe sur http://www.mysite.com/myapp/, que mon icône est sur http://www.mysite.com/myapp/myicon/icon.png, alors l'URI sera /myapp/myicon/icon.png et non /myicon/icon.png.

Permissions d'API

Il y a beaucoup d'APIs Web disponibles qui nécessitent une autorisation afin d'activer telle ou telle fonctionnalité spécifique. Les applications installées doivent enregistrer les demandes d'autorisations dans le fichier manifest.webapp, comme dans le champ "permissions" ci-dessus, qui demande l'autorisation d'utiliser les notifications systèmes contrôlées par l'API Notification.

Différentes APIs nécessitent différents niveaux d'autorisation pour y accéder. Il y a trois niveaux de permissions :

  1. Normal — Pour les APIs qui n'ont besoin d'aucune autorisation spéciale.
  2. Privileged — APIs accessibles aux développeurs pour être utilisées dans leurs applications, tant qu'ils déclarent les permissions dans les fichiers manifest et qu'ils distribuent leurs applications via des sources de confiance.
  3. Certified — APIs qui contrôlent des fonctions critiques du périphérique, comme les appels ou les services de messagerie. Celles-ci ne sont généralement pas disponibles aux développeurs tiers.

Note: Pour plus d'informations sur les permissions requises par les APIs, lisez Autorisations d'Applications.

Web API

Les APIs JavaScript sont créées et améliorées aussi rapidement que les périphériques le sont. L'effort de l'équipe WebAPI de Mozilla apporte des douzaines de fonctionnalités standard à l'API JavaScript.

Détection du support de fonctionnalités

Une technique employée couramment en développement web est la détection de fonctionnalités via JavaScript — on exécute du code pour s'assurer que la fonctionnalité est supportée par le navigateur avant même d'essayer de l'utiliser. Si elle n'est pas supportée, vous pouvez fournir une expérience alternative à l'utilisateur. Le snippet suivant fournit un exemple rapide :

// On vérifie que le navigateur supporte les notifications
if (!("Notification" in window)) {
  console.log("Ce navigateur ne supporte pas les notifications.");
}

Exemple de code

Dans le fichier scripts/battery.js, ajoutez les blocs de code suivants l'un après l'autre, en prenant soin de lire les commentaires au fur et à mesure. D'abord, on met en place les variables dont on a besoin :

// récupérer l'objet navigator.battery en fonction du préfixe utilisé par le navigateur
var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery;
// récupérer les éléments dont on a besoin et les mettre dans des variables
var indicator1 = document.getElementById('indicator1');
var indicator2 = document.getElementById('indicator2');
var batteryCharge = document.getElementById('battery-charge');
var batteryTop = document.getElementById('battery-top');
var chargeIcon = document.getElementById('battery-charging');

// Drapeaux pour vérifier si la notification batterie charged/not charged a 
// déjà été notifiée une fois
// 0 pour la première notification,
// 1 signifie que "charged" a déjà été notifié,
// 2 signifie que "not charged" a déjà été notifié
// On assigne la valeur opposée à chaque notification de façon à ne pas recevoir
// des notifications répétées concernant le même état de charge
var chargingState = 0;

Ensuite, on va ajouter la méthode updateBatteryStatus(), qui met à jour les informations affichées concernant l'état de la batterie dès qu'un évènement relatif à celle-ci est déclenché :

function updateBatteryStatus() {
  // battery.level peut être utilisé pour donner un pourcentage 
  // de l'état de charge de la batterie à l'utilisateur
  var percentage = Math.round(battery.level * 100);
  indicator1.innerHTML = "Battery charge at " + percentage + "%";
  batteryCharge.style.width = percentage + '%';

  if(percentage >= 99) {
    // notifier que la batterie est chargée, plus ou moins ;-)
    batteryTop.style.backgroundColor = 'limegreen';
    batteryCharge.style.backgroundColor = 'limegreen';
    createNotification("La batterie est chargée");
  }

  if(battery.charging) {
  // Si la batterie est en charge :
    if(chargingState == 1 || chargingState == 0) {
    // et que notre drapeau chargingState vaut 0 ou 1
      // on change les styles pour montrer que la batterie charge
      batteryTop.style.backgroundColor = 'gold';
      batteryCharge.style.backgroundColor = 'gold';
      indicator2.innerHTML = "Battery is charging";
      chargeIcon.style.visibility = 'visible';
      // on prévient l'utilisateur
      createNotification("La batterie est maintenant en charge");

      // on change le valeur de chargingState à 2
      chargingState = 2;
    }
  } else if(!battery.charging) {
  // Si la batterie ne charge pas
    if(chargingState == 2 || chargingState == 0) {
    // et que notre drapeau chargingState vaut 0 ou 2
      // on change les styles pour montrer que la batterie ne charge PAS
      batteryTop.style.backgroundColor = 'yellow';
      batteryCharge.style.backgroundColor = 'yellow';
      indicator2.innerHTML = "Battery not charging";
      chargeIcon.style.visibility = 'hidden';
      // on prévient l'utilisateur
      createNotification("La batterie ne charge pas.");

      // on change le valeur de chargingState à 1
      chargingState = 1;
    }
  }
}

Maintenant nous allons ajouter la méthode createNotification() référencée ci-dessus. Quand elle est appelée, une notification système contenant le message passé en argument est déclenchée. Ce code peut sembler un peu long mais il couvre la détection du support des notifications et la gestion du support pour Firefox et les navigateurs basés sur Chromium/Blink.

function createNotification(message) {
  // On vérifie que le navigateur supporte les notifications
  if (!("Notification" in window)) {
    console.log("Ce navigateur ne supporte pas les notifications.");
  }
  // On vérifie que l'utilisateur accepte de recevoir des notifications
  else if (Notification.permission === "granted") {
    // S'il est d'accord, on créer une notification

    // afficher la notification
    var notification = new Notification('Battery status', { body: message });
    // et faire vibrer le périphérique s'il supporte l'API Vibration
    window.navigator.vibrate(500);
  }
  // Sinon, nous devons demander la permission à l'utilisateur
  // Note : Chrome n'implémente pas la propriété statique 'permission'
  // Nous devons donc vérifier NOT 'denied' plutôt que 'default'
  else if (Notification.permission !== 'denied') {
    Notification.requestPermission(function (permission) {
      // Quelque soit la réponse de l'utilisateur, on s'assure que Chrome
      // stocke l'information
      if(!('permission' in Notification)) {
        Notification.permission = permission;
      }
      // Si l'utilisateur est d'accord, on créer une notification
      if (permission === "granted") {

        // afficher la notification
        var notification = new Notification('Battery status', { body: message });
        // et faire vibrer le périphérique s'il supporte l'API Vibration
        window.navigator.vibrate(500);
      }
    });
  }
}

Enfin, nous ajoutons la gestion des évènements sur l'objet battery pour nous permettre de répondre aux changements d'états et de niveau de charge de la batterie (en exécutant la méthode updateBatteryStatus()). Puis on lance updateBatteryStatus() une fois, au lancement de l'application :

// Event handler : vérifier si la batterie a commencé à charger ou a arrêté de charger
battery.addEventListener("chargingchange", updateBatteryStatus, false);
// Event handler : vérifier si le niveau de charge de la batterie a changé
battery.addEventListener("levelchange", updateBatteryStatus, false);

// lancer la méthode principale une fois au premier chargement de l'application 
updateBatteryStatus();

Les commentaires devraient assez bien expliquer ce que fait le code. Le message à retenir est qu'il est facile d'utiliser les données et les fonctionnalités du matériel via ces APIs, grâce à des objets comme chargingchange, battery et Notification().

Le JavaScript attend qu'un changement de niveau de batterie intervienne, ou que la batterie commence ou arrête de se charger (les écouteurs d'évènements chargingchange et levelchange). Lorsqu'un de ces évènements se produit, la fonction updateBatteryStatus() est lancée et décide quelle notification envoyer à l'utilisateur, met à jour l'affichage et lance createNotification().

Cette dernière déclenche une notification système et fait vibrer le téléphone pour donner à l'utilisateur quelques informations complémentaires sur l'ensemble du système, comme l'état de la batterie.

Note: Vérifiez régulièrement la page WebAPI pour garder ces informations à jour.

API d'installation

Dans notre template d'applications, nous avons implémenté un bouton d'installation sur lequel vous pouvez cliquer lorsque vous visualisez l'appli comme une page web standard, pour installer ce site sur Firefox OS en tant qu'application. Le balisage du bouton n'a rien de particulier :

Install app on device

La fonctionnalité de ce bouton sera implémentée en utilisant l'API Install. Ajoutez le code suivant dans votre fichier d'exemple scripts/install.js :

// get a reference to the install button
var button = document.getElementById('install');

// if browser has support for installable apps, run the install code; it not, hide the install button
if('mozApps' in navigator) {

    // define the manifest URL
    var manifest_url = location.href + 'manifest.webapp';

    function install(ev) {
      ev.preventDefault();
      // install the app
      var installLocFind = navigator.mozApps.install(manifest_url);
      installLocFind.onsuccess = function(data) {
        // App is installed, do something if you like
      };
      installLocFind.onerror = function() {
        // App wasn't installed, info is in
        // installapp.error.name
        alert(installLocFind.error.name);
      };
    };

    // if app is already installed, hide button. If not, add event listener to call install() on click
    var installCheck = navigator.mozApps.checkInstalled(manifest_url);
    installCheck.onsuccess = function() {

      if(installCheck.result) {
        button.style.display = "none";
      } else {
        button.addEventListener('click', install, false);
      };
    };
} else {
  button.style.display = "none";
}

Les commentaires expliquent assez bien ce qu'il se passe mais, en bref, nous vérifions d'abord si l'objet mozApps existe dans le navigateur (if('mozApps' in navigator)) — c'est-à-dire si le navigateur supporte les applications installables ou non. Si non, nous cachons simplement le bouton d'installation.

Ensuite, navigator.mozApps.checkInstalled vérifie si l'application définie par le manifest dans manifest_url est déjà installée sur le périphérique. Si le test renvoie un succès, son évènement success est déclenché et la fonction installCheck.onsuccess = function() { ... } est lancée.

Nous testons ensuite l'existence de installCheck.result; si il existe, c'est-à-dire que l'application est installée, nous cachons le bouton d'installation. Si l'application n'est pas installée, nous ajoutons un écouteur d'évènement sur le click du bouton, de façon à ce que la fonction install() soit lancée lorsque le bouton est cliqué.

Quand le bouton est cliqué et que install()est lancée, on installe l'application en utilisant  navigator.mozApps.install(manifest_url), en conservant la référence vers cette installation dans la variable installLocFind. Vous remarquerez que cette installation déclenche aussi les évènements success et error, vous pouvez donc exécuter des actions différentes en fonction du succès de l'installation ou de son échec.

Note: Les applications open web installables ont une politique de sécurité "single app per origin"; vous ne pouvez pas héberger plus d'une application installable par origine. Cette politique rend les tests un peu plus délicats mais il existe des moyens de contourner cela, par exemple en créant différents sous-domaines pour vos applications.

Faire fonctionner l'application hors-ligne

Par défaut, les applications web (incluant les applications hébergées par Firefox OS) ne fonctionnent pas hors-ligne : les ressources sont mises en cache comme pour les sites web mais vous ne pouvez pas garantir que l'application sera disponible hors-ligne. Il y a beaucoup de technologies et de techniques qui peuvent être utilisées pour faire fonctionner les applications hors-ligne et celles-ci sont expliquées plus en détails sur la page Travaux hors-ligne. Nous n'irons pas plus loin sur le hors-ligne dans cet article afin de rester dans le cadre des caractéristiques des applications web/Firefox OS installables.

Tester votre application

À ce niveau, votre application devrait être terminée et vous pouvez la tester dans les navigateurs. Si l'application ne semble pas fonctionner, vous trouverez le code source finalisé pour vérifier votre code, ou vous pouvez regarder l'exemple en live. Par exemple, l'appli ressemble à cela sur un ordinateur :

An image of the quickstart app in a desktop browser. it shows a title saying Battery indicator, and icons to indicate that the battery is not charging.

Tester sur Firefox desktop

La façon la plus rapide de tester les fonctionnalités de base de votre application est de la charger dans Firefox pour bureau (ouvrez le fichier index.html dans votre navigateur) - qui supporte la plupart des fonctionnalités dont nous avons parlé ici. Les notifications ressemblent à cela sous OS X :

A system notification from Mac OS X saying that the device battery is not charging.

Dans Firefox Aurora/Nightly et Firefox pour Android, vous pouvez tester la fonctionnalité d'installation - ces navigateurs incluent le moteur d'exécution Firefox qui permet aux applications web d'être installées sur bureau.

Note: Gardez en tête que pour pouvoir tester la fonctionnalité d'installation, vous devrez mettre les fichiers à un emplacement de votre serveur web qui ne contient pas d'autres appli web installable sur la même origine (des sous-domaines différents fonctionnent). Cela est dû à la politique de sécurité "single app per origin" que nous avons mentionné plus tôt. Par exemple, si vous essayez d'installer la démo que nous avons sur Github, vous obtiendrez une erreur MULTIPLE_APPS_PER_ORIGIN_FORBIDDEN.

Tester dans le simulateur Firefox OS

Vous pouvez également tester l'application dans le simulateur Firefox OS via le gestionnaire d'applications. Cela vous donnera une idée plus précise du rendu sur un véritable périphérique. Pour faire court, il faut :

  1. Installer Firefox OS simulator
  2. Ouvrir le gestionnaire d'applications (Outils > Développement Web > WebIDE)
  3. Cliquer sur Start Simulator puis choisir le simulateur installé plus tôt
  4. Cliquer sur Add packaged app puis allez dans le répertoire local de votre application
  5. Cliquer sur le bouton "Mettre à jour" de l'application pour l'installer sur le simulateur Firefox OS

Tester sur un appareil Firefox OS

Cependant, l'API de vibration ne fonctionnera pas avec ces options. Pour tester complètement vous devrez mettre la main sur un appareil Firefox OS. Si vous en avez un, vous pouvez le connecter à votre ordinateur et installer les applications contenues sur votre disque local via le Gestionnaire d'applications. Voici une capture d'écran d'un Firefox OS montrant une application en cours avec un système de notifications

A Firefox OS screenshot showing the app, with a notification to say that the battery is charging.

Pour installer l'application sur votre appareil Firefox OS via le gestionnaire d'applications

  1. Installez le simulateur Firefox OS avec l'ADB helper
  2. Ouvrez le gestionnaire d'applications (Outils > Développement Web > Gestionnaire d'applications)
  3. Sur votre appareil Firefox OS, sélectionnez l'option ADB and Devtools dans les paramètres de développeur débogage distant
  4. Connectez votre téléphone à votre ordinateur de bureau via le port USB
  5. Cliquez sur l'option qui représente votre appareil dans la barre de « Non connecté » au bas du gestionnaire d'applications. Par exemple, un Geeksphone Keon apparaît généralement commefull_keon
  6. Cliquez sur Ajouter une application empaquetée puis accédez au répertoire local de votre application
  7. Cliquez sur le bouton de mise à jour de l'application pour l'installer sur l'appareil Firefox OS

Distribution et présentation de l'application

Une fois votre application terminée, vous pouvez l'héberger vous-même comme une application ou un site web standard (lire les options de publication d'application pour plus d'informations), auto-publier une application empaquetée, la présenter au Firefox Marketplace. Ce que vous faites ici dépend de votre situation.

  1. Lorsque vous publiez une application Firefox OS, c'est généralement une bonne idée de la rendre disponible en tant qu'application empaquetée. Des applications empaquetées ont les avantages d'avoir accès aux API privilégiés (voir Autorisations des applications), et d'être installé sur l'appareil afin de pouvoir tourner hors connexion. Une application empaquetée obtiendrait efficacement les fonctionnalités AppCache susmentionnées gratuitement, et vous pourriez aussi supprimer la fonctionnalité d'installation expliquée ci-dessus (voir Auto-publication d'applications empaquetées pour plus d'informations sur ce que vous feriez à la place.)
  2. Si vous souhaitez que votre application soit disponible comme une application web en général et pas seulement une application Firefox OS, comme indiqué dans cet article, il faudrait que ce soit une application hébergée.

Quand vous soumettez une application au Marketplace, le manifeste de votre application devra être validé et vous devrez choisir quel type d'appareils votre application supporte (par exemple Firefox OS, Desktop Firefox, Firefox Mobile, Firefox Tablet). Une fois validée, vous pouvez ajouter des détails supplémentaires sur votre application (imprimés écran, descriptions, prix, etc.) et officiellement soumettre l'application à l'inscription sur le Marketplace. Une fois approuvée, votre application est disponible dans le monde pour l'achat et l'installation.

En savoir plus

C'est tout pour l'instant. Cet arcticle est évidemment une simplification brute de toutes les choses impliquées en créant une application intéressante, mais nous avons délibérément gardé cette façon de faire pour effectivement mettre en évidence toutes les nouvelles choses que vous devez savoir. Pour plus d'informations sur les différents aspects du développement, du design d'application et de Firefox OS, consultez les ressources ci-dessous.

Firefox OS

Notre Zone Firefox OS se concentre étroitement sur la plate-forme de Firefox OS, vous donnant tous ce dont vous avez besoin de savoir sur la construction de la plate-forme, contribuer à la réalisation de Gaia, des caractéristiques des téléphones, des techniques de débogage et de tests spécifiques à Firefox OS.

Conception d'applications

Il n'y a aucune "bonne manière" de concevoir une interface utilisateur, mais il y a beaucoup de façons de rendre votre application moins amusante et moins facile à utiliser. Notre Section de conception d'applications vous aidera à éviter de faire des erreurs courantes d'interface utilisateur et à fournir des connaissances sur la conception "responsive" et d'autres thèmes essentiels pour concevoir une application agréable à utiliser, peu importe la plate-forme d'exécution.

Créer des applications

Notre Section de création d'application fournit des recommandations claires et des conseils sur les flux de travail pour aider les développeurs à trouver rapidement des solutions aux problèmes de développement communs, ainsi que des didacticiels et un API de référence pour ceux qui veulent aller plus loin.

Publier des applications

Vous voulez publier votre application et former une base d'utilisateurs ? Notre zone Marketplace contient toutes les informations dont vous avez besoin, y compris les options de publication, présentation sur le marché de Firefox, remise des paiements et bien plus encore.

FAQ

Questions fréquentes sur les bases du développement d'application.

Pourrais-je utiliser un framework ?

Si vous avez tendance à utiliser un framework ou une librairie précise, rien ne vous empêche de créer une application open web installable avec.
 

Y-a-t'il des exemples d'applications pour se lancer ?

Oui, il y en a plusieurs sur le MDN App Center.

Étiquettes et contributeurs liés au document

 Dernière mise à jour par : Hell_Carlito,