Pour commencer à créer des applications

  • Raccourci de la révision : Applications/Pour_commencer
  • Titre de la révision : Pour commencer à créer des applications
  • ID de la révision : 345303
  • Créé :
  • Créateur : tregagnon
  • Version actuelle ? Non
  • Commentaire

Contenu de la révision

Les applications web sont créées en utilisant des technologies web standard. Elles fonctionnent avec tous les navigateurs modernes, et vous pouvez les développer en utilisant vos outils préférés.  Voici certaines caractéristiques qui distinguent les applications web des sites web :

  • Les applications sont installées par l'utilisateur.
  • Elles sont autonomes et n'ont pas besoin en permanence du chrome de la fenêtre du navigateur.
  • Elles peuvent être conçues pour fonctionner hors-connexion. Gmail, Twitter, et Etherpad sont des applications web.

Le projet Open Web apps propose quelques petits suppléments aux sites existants pour les transformer en applications qui leur donnent un environnement informatique excitant et riche en possibilités. Ces applications tournent sur les ordinateurs classiques comme sur les appareils mobiles, et pour l'utilisateur, elles sont plus faciles à découvrir et à lancer que des sites web. Elles ont accès à un nombre croissant de fonctionnalités novatrices, telles que la synchronisation entre tous les appareils de l'utilisateur.

Publication de l'application

La seule chose que vous devez faire pour publier une application web à partir d'un site web c'est ajouter un manifeste d'application (en anglais, app manifest). Il s'agit d'un fichier JSON qui décrit votre application, précise son nom, les icônes qu'elle utilise et la décrit de façon compréhensible par un humain.

Le manifeste doit être hébergé dans le même domaine que votre site web, et doit être fourni avec l'en-tête HTTP Content-Type: mis à la valeur application/x-web-app-manifest+json. Tous les détails sur le manifeste sont à votre disposition dans la documentation, et pour vous aider à démarrer vous pouvez essayer le testeur de manifeste en ligne.

Politique de même origine

Il est important de savoir que chaque application doit être hébergé sur son propre domaine. Différentes applications ne doivent pas partager le même domaine. Une solution acceptable est d'héberger chaque application sur un sous-domaine différent. Voir Réponses aux questions fréquentes sur les manifestes d'application pour plus d'information.

Vérifier que l'application est installée

Quand un navigateur web charge la page de l'application, celle-ci doit prendre en compte le cas où l'utilisateur n'a pas encore installé l'application. Vous pouvez vérifier si l'application est installée ou non en appelant getSelf(), comme suit :

var request = navigator.mozApps.getSelf();
request.onsuccess = function() {
  if (request.result) {
    // Application bien installée
  } else {
    // Application non installée
  }
};
request.onerror = function() {
  alert("Erreur lors de la vérification de l'installation: " + this.error.message);
};

Installation de l'application

Vous pouvez distribuer votre application directement sur votre site. Il est préférable de tester l'installation depuis votre site, pour vérifier que le manifeste est valide, avant de le soumettre au Firefox Marketplace.

Il vous suffit de créer un bouton ou un lien qui lance ce code JavaScript  :

var request = navigator.mozApps.install("http://chemin.vers/mon/exemple.webapp");
request.onsuccess = function() {
  // Tout va bien - Affichez un message, ou redirigez vers une page
};
request.onerror = function() {
  // Problème - this.error.name contient le détail
};

Appeler navigator.mozApps.install() provoque le chargement du manifeste par le navigateur et demande à l'utilisateur s'il désire installer l'application. Si la réponse est positive, l'application est installée dans le navigateur. Sur Mac OS X, l'application sera installée dans le dossier "Applications".

Le second paramètre est un argument install_data de  navigator.mozApps.install(), pour conserver des informations dans le catalogue des applications installées par l'utilisateur. Ces informations peuvent être synchronisées avec ses autres appareils, et récupérées par votre application en utilisant l'appel à getSelf()  (voir Vérifier que l'application est installée). Par exemple :

navigator.mozApps.install(
    "http://chemin.vers/mon/exemple.webapp",
    {
        user_id: "un_utilisateur"
    }
);

Promotion de l'application

Mozilla crée un magasin d'applications qui s'occupe de leur exposition, de leur révision, de leur évaluation et de leur paiement, en utilisant une infrastructure ouverte qui peut être employée par d'autres tierces parties pour créer leurs propres magasins. Mais vous n'avez aucune obligation de répertorier votre application dans un magasin.

Voici un premier aperçu pour les développeurs du Open Web apps project qui est une toute première version de la boutique d'applications de Mozilla. Vous pouvez également souscrire à la lettre d'information des développeurs web pour être tenu au courant des nouveautés et des progrès de la boutique d'applications de Mozilla, ainsi que des astuces et conseils pour la création d'applications.

Lancement hors-connexion et utilisation des API avancées des appareils

Les navigateurs web modernes ont ajouté un grand nombre de fonctionnalités fantastiques pour vous permettre de faire tourner votre application hors-connexion et accéder aux possibilités de l'appareil. Voici quelques liens utiles :

Stockage de données localement

L'API localStorage fournit un réservoir précieux de données persistantes que vous pouvez utiliser pour garder trace des données de l'utilisateur entre deux visites avec votre application. Si l'utilisateur a un navigateur moderne, tel que Firefox (versions 4 et ultérieures), ou Chrome, vous pouvez également utiliser IndexedDB, un réservoir de données structuré et hautement performant côté client.

Si vous avez des données qui doivent être partagées entre plusieurs instances de votre application parmi tous les appareils de l'utilisateur, vous devriez utiliser l'option install_data pour la fonction install(), comme décrit ci-dessus.

Exemples

Quelques exemples d'applications web :

Source de la révision

<p>Les applications web sont créées en utilisant des technologies web standard. Elles fonctionnent avec tous les navigateurs modernes, et vous pouvez les développer en utilisant vos outils préférés.&nbsp; Voici certaines caractéristiques qui distinguent les <em>applications </em>web des <em>sites</em> web :</p>
<ul>
  <li>Les applications sont installées par l'utilisateur.</li>
  <li>Elles sont autonomes et n'ont pas besoin en permanence du chrome de la fenêtre du navigateur.</li>
  <li>Elles peuvent être conçues pour fonctionner hors-connexion. Gmail, Twitter, et Etherpad sont des applications web.</li>
</ul>
<p>Le projet <em>Open Web apps </em>propose quelques petits suppléments aux sites existants pour les transformer en applications qui leur donnent un environnement informatique excitant et riche en possibilités. Ces applications tournent sur les ordinateurs classiques comme sur les appareils mobiles, et pour l'utilisateur, elles sont plus faciles à découvrir et à lancer que des sites web. Elles ont accès à un nombre croissant de fonctionnalités novatrices, telles que la synchronisation entre tous les appareils de l'utilisateur.</p>
<h2 id="Publication_de_l'application">Publication de l'application</h2>
<p>La seule chose que vous devez faire pour publier une application web à partir d'un site web c'est ajouter un <em>manifeste d'application </em>(en anglais, <em>app manifest)</em>. Il s'agit d'un fichier <a class="external" href="http://json.org">JSON</a> qui décrit votre application, précise son nom, les icônes qu'elle utilise et la décrit de façon compréhensible par un humain.</p>
<p>Le manifeste doit être hébergé dans le même domaine que votre site web, et doit être fourni avec l'en-tête HTTP <code>Content-Type:</code> mis à la valeur <code>application/x-web-app-manifest+json</code>. Tous les détails sur le manifeste sont à votre disposition dans la <a href="/fr/docs/Applications/Manifeste" title="https://developer.mozilla.org/en/OpenWebApps/The_application_manifest">documentation</a>, et pour vous aider à démarrer vous pouvez essayer le <a class="external" href="http://appmanifest.org">testeur de manifeste en ligne.</a></p>
<h3 id="Politique_de_m.C3.AAme_origine">Politique de même origine</h3>
<p>Il est important de savoir que chaque application doit être hébergé sur son propre domaine. Différentes applications ne doivent pas partager le même domaine. Une solution acceptable est d'héberger chaque application sur un sous-domaine différent. Voir <a href="https://developer.mozilla.org/en-US/docs/Apps/FAQs/About_app_manifests" title="https://developer.mozilla.org/en-US/docs/Apps/FAQs/About_app_manifests">Réponses aux questions fréquentes sur les manifestes d'application</a> pour plus d'information.</p>
<h2 id="V.C3.A9rifier_que_l'application_est_install.C3.A9e">Vérifier que l'application est installée</h2>
<p>Quand un navigateur web charge la page de l'application, celle-ci doit prendre en compte le cas où l'utilisateur n'a pas encore installé l'application. Vous pouvez vérifier si l'application est installée ou non en appelant<code> <a href="https://developer.mozilla.org/en-US/docs/DOM/Apps.getSelf">getSelf()</a></code>, comme suit :</p>
<pre class="brush: js">
var request = navigator.mozApps.getSelf();
request.onsuccess = function() {
  if (request.result) {
    // Application bien installée
  } else {
    // Application non installée
  }
};
request.onerror = function() {
  alert("Erreur lors de la vérification de l'installation: " + this.error.message);
};
</pre>
<h2 id="Installation_de_l'application">Installation de l'application</h2>
<p>Vous pouvez distribuer votre application directement sur votre site. Il est préférable de tester l'installation depuis votre site, pour vérifier que le manifeste est valide, avant de le soumettre au Firefox Marketplace.</p>
<p>Il vous suffit de créer un bouton ou un lien qui lance ce code JavaScript  :</p>
<pre class="brush: js">
var request = navigator.mozApps.install("http://chemin.vers/mon/exemple.webapp");
request.onsuccess = function() {
  // Tout va bien - Affichez un message, ou redirigez vers une page
};
request.onerror = function() {
  // Problème - this.error.name contient le détail
};
</pre>
<p>Appeler <a href="/en/Apps/Apps_JavaScript_API/navigator.mozApps.install" title="/en/Apps/Apps_JavaScript_API/navigator.mozApps.install"><code>navigator.mozApps.install()</code></a> provoque le chargement du manifeste par le navigateur et demande à l'utilisateur s'il désire installer l'application. Si la réponse est positive, l'application est installée dans le navigateur. Sur Mac OS X, l'application sera installée dans le dossier "Applications".</p>
<p>Le second paramètre est un argument <code>install_data</code> de&nbsp; <code>navigator.mozApps.install()</code>, pour conserver des informations dans le catalogue des applications installées par l'utilisateur. Ces informations peuvent être synchronisées avec ses autres appareils, et récupérées par votre application en utilisant l'appel à <code>getSelf()</code>&nbsp; (voir <a href="#V.C3.A9rifier_que_l%27application_est_install.C3.A9e" title="Vérifier que l'application est installée">Vérifier que l'application est installée</a>). Par exemple :</p>
<pre class="brush: js">
navigator.mozApps.install(
    "http://chemin.vers/mon/exemple.webapp",
    {
        user_id: "un_utilisateur"
    }
);
</pre>
<h2 id="Promotion_de_l'application">Promotion de l'application</h2>
<p>Mozilla crée un magasin d'applications qui s'occupe de leur exposition, de leur révision, de leur évaluation et de leur paiement, en utilisant une infrastructure ouverte qui peut être employée par d'autres tierces parties pour créer leurs propres magasins. Mais vous n'avez aucune obligation de répertorier votre application dans un magasin.</p>
<p>Voici un premier aperçu pour les développeurs du <a class="external" href="http://apps-preview.mozilla.org" title="http://apps-preview.mozilla.org">Open Web apps project</a> qui est une toute première version de la boutique d'applications de Mozilla. Vous pouvez également souscrire à la <a href="/apps" title="https://developer.mozilla.org/apps">lettre d'information des développeurs web</a> pour être tenu au courant des nouveautés et des progrès de la boutique d'applications de Mozilla, ainsi que des astuces et conseils pour la création d'applications.</p>
<h2 id="Lancement_hors-connexion_et_utilisation_des_API_avanc.C3.A9es_des_appareils">Lancement hors-connexion et utilisation des API avancées des appareils</h2>
<p>Les navigateurs web modernes ont ajouté un grand nombre de fonctionnalités fantastiques pour vous permettre de faire tourner votre application hors-connexion et accéder aux possibilités de l'appareil. Voici quelques liens utiles :</p>
<ul>
  <li><a href="/fr/Utiliser_Application_Cache" title="Ressources hors-ligne dans Firefox">Lancement hors-connexion </a>: des précisions et des démos qui expliquent comment utiliser HTML5 AppCache.</li>
  <li><a href="/en/Online_and_offline_events" title="https://developer.mozilla.org/en/Online_and_offline_events">Événements hors-ligne et en ligne </a>: détection de l'état de l'appareil, connecté ou hors connexion.</li>
  <li><a href="/en/Using_HTML5_audio_and_video" title="En/Using_audio_and_video_in_Firefox">Utiliser l'audio et la vidéo</a> dans votre application.</li>
  <li><a href="/fr/Dessiner_avec_canvas" title="Dessiner avec canvas">Dessiner avec Canvas.</a></li>
  <li><a href="/en/WebGL" title="en/WebGL">Créer des graphismes en 3D avec WebGL.</a></li>
  <li><a href="/en/HTML/Content_Editable" title="en/HTML/Content_Editable">Utiliser Content-Editable</a> pour créer des éditeurs de texte riches et complets dans votre application.</li>
  <li><a href="/en/Using_files_from_web_applications" title="en/Using_files_from_web_applications">Utiliser des fichiers d'applications web</a> avec l'API <em>File </em>du HTML5.</li>
  <li><a href="/En/DragDrop/Drag_and_Drop" title="En/DragDrop/Drag_and_Drop">Utiliser le glisser-déposer</a> pour réorganiser les éléments dans vos applications et entre elles.</li>
  <li><a href="/en/Detecting_device_orientation" title="en/Detecting_device_orientation">Détecter l'orientation de l'appareil</a>.</li>
</ul>
<h3 id="Stockage_de_donn.C3.A9es_localement">Stockage de données localement</h3>
<p>L'API <a href="/en/DOM/Storage" title="en/DOM/Storage">localStorage</a> fournit un réservoir précieux de données persistantes que vous pouvez utiliser pour garder trace des données de l'utilisateur entre deux visites avec votre application. Si l'utilisateur a un navigateur moderne, tel que Firefox (versions 4 et ultérieures), ou Chrome, vous pouvez également utiliser <a href="/en/IndexedDB" title="en/IndexedDB">IndexedDB</a>, un réservoir de données structuré et hautement performant côté client.</p>
<p>Si vous avez des données qui doivent être partagées entre plusieurs instances de votre application parmi tous les appareils de l'utilisateur, vous devriez utiliser l'option <code>install_data</code> pour la fonction <code>install()</code>, comme décrit ci-dessus.</p>
<h2 id="Exemples">Exemples</h2>
<p>Quelques exemples d'applications web :</p>
<ul>
  <li><a class="external link-https" href="https://github.com/mozilla/openwebapps/tree/develop/examples/mozillaball">Exemple MozillaBall</a> (utilise <a href="https://developer.mozilla.org/en-US/docs/HTML/Canvas/Drawing_Graphics_with_Canvas">canvas</a> pour dessiner et <a href="https://developer.mozilla.org/en-US/docs/Apps/Apps_JavaScript_API">l'API JavaScript</a> pour installer l'application)</li>
</ul>
Revenir à cette révision