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 : 47646
  • Créé :
  • Créateur : Goofy
  • Version actuelle ? Non
  • Commentaire 47 words added, 38 words removed

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 bien 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

You can distribute your app directly from your site. Just construct a button or link that invokes this JavaScript:

//expands on the previous example code

function installCallback(result) {
    // great - display a message, or redirect to a launch page
}

function errorCallback(result) {
    // whoops - result.code and result.message have details
}

function installCheck(data) {
    if (data) {
        // ...
    } else {
        navigator.mozApps.install(
            "http:/path.to/my/example.webapp",
            {},
            installCallback,
            errorCallback
        );
    }
}

Invoking navigator.mozApps.install() causes the browser to load the manifest and ask the user whether to install the application. If the user approves the installation, the app is installed into the browser.

The second parameter is an install_data argument to  navigator.mozApps.install(), to persist some information into the user's installed-applications data store. This information can be synchronized to their other devices, and can be retrieved by your application using the amInstalled() call (see Checking whether the app is installed). For example:

navigator.mozApps.install(
    "http://path.to/my/example.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 bien 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>You can distribute your app directly from your site. Just construct a button or link that invokes this JavaScript:</p>
<pre class="brush: js">//expands on the previous example code

function installCallback(result) {
    // great - display a message, or redirect to a launch page
}

function errorCallback(result) {
    // whoops - result.code and result.message have details
}

function installCheck(data) {
    if (data) {
        // ...
    } else {
        navigator.mozApps.install(
            "http:/path.to/my/example.webapp",
            {},
            installCallback,
            errorCallback
        );
    }
}
</pre>
<p>Invoking <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> causes the browser to load the manifest and ask the user whether to install the application. If the user approves the installation, the app is installed into the browser.</p>
<p>The second parameter is an <code>install_data</code> argument to  <code>navigator.mozApps.install()</code>, to persist some information into the user's installed-applications data store. This information can be synchronized to their other devices, and can be retrieved by your application using the <code>amInstalled()</code> call (see <a href="#Determining_whether_the_app_is_installed" title="Determining whether the app is installed">Checking whether the app is installed</a>). For example:</p>
<pre class="brush: js">navigator.mozApps.install(
    "http://path.to/my/example.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