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 : 47650
  • Créé :
  • Créateur : Goofy
  • Version actuelle ? Non
  • Commentaire one or more formatting changes

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.

Publier l'application

La seule chose que vous deviez faire pour publier une application web à partir d'un site web c'est ajouter un 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 fournie avec un Content-Type 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.

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  amInstalled(), comme suit :

function installCheck(data) {
    if (data) {
        // oui, nous sommes bien installés
        // data.manifest a son manifeste
        // data.install_time précise quand l'installation s'est déroulée
        // data.install_origin est le domaine qui a requis l'installation
        // data.install_data a reçu les données facultatives à l'installation
    } else {
        // pas installés !
    }
}

navigator.mozApps.amInstalled(installCheck);

Installer l'application

Vous pouvez distribuer votre application directement sur votre site. Il vous suffit de créer un bouton ou un lien qui lance ce code JavaScript :

//continuité de l'exemple de code précédent

function installCallback(result) {
    // super - afficher un message, ou rediriger vers une page de lancement
}

function errorCallback(result) {
    // oups - result.code et result.message donnent des précisions
}

function installCheck(data) {
    if (data) {
        // ...
    } else {
        navigator.mozApps.install(
            "http:/vers/mon/exemple.webapp",
            {},
            installCallback,
            errorCallback
        );
    }
}

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.

Le second paramètre est un argument install_data de  navigator.mozApps.install(), to persist some information into the user's installed-applications data store. Ces informations peuvent être synchronisées avec les autres appareils, et récupérées par votre application en utilisant l'appel à amInstalled()  (voir Checking whether the app is installed). Par exemple :

navigator.mozApps.install(
    "http://vers/mon/exemple.webapp",
    {
        user_id: "some_user"
    },
    installCallback,
    errorCallback,
);

Promouvoir l'application

Mozilla is building an app marketplace that take care of discovery, reviews, ratings, and billing, using an open infrastructure that can be used by other third parties to create their own stores. But you're not required to list your app in a store.

The Open Web apps project Developer Preview is an early version of the Mozilla App Marketplace. You can also sign up for the Apps Developer newsletter to get news about the progress of the Mozilla App Marketplace, as well as tips and advice on creating apps.

Running offline and using advanced device APIs

Modern Web browsers have added a lot of great features to let your application run offline or access device capabilities. Here are some useful links:

Stockage des données localement

The localStorage API provides a key-value store of persistent data that you can use to keep track of user data between visits to your app. If the user has a modern browser, such as Firefox 4 or later, or Chrome, you can also use IndexedDB, a structured, high-performance client-side datastore.

If you have data that should be shared between instances of your app across all devices that a user uses, then you should use the install_data option to the install() function, as described above.

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.  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>Publier l'application</h2>
<p>La seule chose que vous deviez faire pour publier une application web à partir d'un site web c'est ajouter un <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 fournie avec un Content-Type <code>application/x-web-app-manifest+json</code>. Tous les détails sur le manifeste sont à votre disposition dans la <a class="external" href="/en/Apps/Manifest" 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>
<h2>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  <a href="/en/Apps/Apps_JavaScript_API/navigator.mozApps.amInstalled" title="navigator.mozApps.amInstalled"><code>amInstalled()</code></a>, comme suit :</p>
<pre class="brush: js">function installCheck(data) {
    if (data) {
        // oui, nous sommes bien installés
        // data.manifest a son manifeste
        // data.install_time précise quand l'installation s'est déroulée
        // data.install_origin est le domaine qui a requis l'installation
        // data.install_data a reçu les données facultatives à l'installation
    } else {
        // pas installés !
    }
}

navigator.mozApps.amInstalled(installCheck);
</pre>
<h2>Installer l'application</h2>
<p>Vous pouvez distribuer votre application directement sur votre site. Il vous suffit de créer un bouton ou un lien qui lance ce code JavaScript :</p>
<pre class="brush: js">//continuité de l'exemple de code précédent

function installCallback(result) {
    // super - afficher un message, ou rediriger vers une page de lancement
}

function errorCallback(result) {
    // oups - result.code et result.message donnent des précisions
}

function installCheck(data) {
    if (data) {
        // ...
    } else {
        navigator.mozApps.install(
            "http:/vers/mon/exemple.webapp",
            {},
            installCallback,
            errorCallback
        );
    }
}
</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.</p>
<p>Le second paramètre est un argument <code>install_data</code> de  <code>navigator.mozApps.install()</code>, to persist some information into the user's installed-applications data store. Ces informations peuvent être synchronisées avec les autres appareils, et récupérées par votre application en utilisant l'appel à <code>amInstalled()</code>  (voir <a href="#Vérifier_que_l'_application_est_installée" title="Determining whether the app is installed">Checking whether the app is installed</a>). Par exemple :</p>
<pre class="brush: js">navigator.mozApps.install(
    "http://vers/mon/exemple.webapp",
    {
        user_id: "some_user"
    },
    installCallback,
    errorCallback,
);
</pre>
<h2>Promouvoir l'application</h2>
<p>Mozilla is building an app marketplace that take care of discovery, reviews, ratings, and billing, using an open infrastructure that can be used by other third parties to create their own stores. But you're not required to list your app in a store.</p>
<p>The <a class="external" href="http://apps-preview.mozilla.org" title="http://apps-preview.mozilla.org">Open Web apps project Developer Preview</a> is an early version of the Mozilla App Marketplace. You can also <a href="/apps" title="https://developer.mozilla.org/apps">sign up for the Apps Developer newsletter</a> to get news about the progress of the Mozilla App Marketplace, as well as tips and advice on creating apps.</p>
<h2>Running offline and using advanced device APIs</h2>
<p>Modern Web browsers have added a lot of great features to let your application run offline or access device capabilities. Here are some useful links:</p>
<ul> <li><a href="/en/Using_the_Application_Cache" title="en/Offline_resources_in_Firefox">Running offline</a>: details and demos that show how to use the HTML5 AppCache</li> <li><a href="/en/Online_and_offline_events" title="https://developer.mozilla.org/en/Online_and_offline_events">Online and Offline Events</a>: detecting when the device changes between online and offline states</li> <li><a href="/en/Using_HTML5_audio_and_video" title="En/Using_audio_and_video_in_Firefox">Using audio and video</a> in your application</li> <li><a href="/en/HTML/Canvas/Drawing_Graphics_with_Canvas" title="en/Drawing_Graphics_with_Canvas">Drawing Graphics with Canvas</a></li> <li><a href="/en/WebGL" title="en/WebGL">Drawing 3D Graphics with WebGL</a></li> <li><a href="/en/HTML/Content_Editable" title="en/HTML/Content_Editable">Using Content-Editable</a> to create full and fast rich-text editors in your app</li> <li><a href="/en/Using_files_from_web_applications" title="en/Using_files_from_web_applications">Using Files from Web Applications</a> with the HTML5 File API</li> <li><a href="/En/DragDrop/Drag_and_Drop" title="En/DragDrop/Drag_and_Drop">Using Drag and Drop</a> to drag items between and within web applications</li> <li><a href="/en/Detecting_device_orientation" title="en/Detecting_device_orientation">Detecting Device Orientation</a></li>
</ul>
<h3>Stockage des données localement</h3>
<p>The <a href="/en/DOM/Storage" title="en/DOM/Storage">localStorage</a> API provides a key-value store of persistent data that you can use to keep track of user data between visits to your app. If the user has a modern browser, such as Firefox 4 or later, or Chrome, you can also use <a href="/en/IndexedDB" title="en/IndexedDB"> IndexedDB</a>, a structured, high-performance client-side datastore.</p>
<p>If you have data that should be shared between instances of your app across all devices that a user uses, then you should use the <code>install_data</code> option to the <code>install()</code> function, as described above.</p>
Revenir à cette révision