Développement d'Applications pour les développeurs Web

  • Raccourci de la révision : Applications/Pour_développeurs_web
  • Titre de la révision : Démarrer quand on est développeur web
  • ID de la révision : 266212
  • Créé :
  • Créateur : Goofy
  • Version actuelle ? Non
  • Commentaire 328 words added, 237 words removed

Contenu de la révision

{{ TranslationInProgress() }}

Minimum requis

Si vous êtes développeur web et souhaitez transformer un site ou une application web en une application web ouverte, vous n'avez pas besoin de beaucoup de choses techniquement. Les pré-requis minimum sont peu nombreux :

  1. Créer un app manifest.
  2. Fournissez un manifeste d'application avec une extension de fichier .webapp. L'en-tête HTTP Content-Type: doit être mis mis à la valeur application/x-web-app-manifest+json.
  3. Publiez l'application, soit sur votre propre site soit sur un magasin d'applications (soit les deux).. Pour publier vous-même il vous faut ajouter un peu de code à votre site pour gérer l'installation et la mise à jour de l'application depuis le navigateur de l'utilisateur.

Fonctionnalités facultatives

Philosophiquement, l'idée de réaliser une application web ouverte installable représente beaucoup plus que simplement ajouter un manifeste à votre site. Les technologies web standards peuvent être considérées comme des plateformes parfaitement aptes à recevoir des applications, il se trouve qu'elles utilisent le moteur de rendu d'un navigateur pour afficher une interface utilisateur et interpréter le code, et communiquent avec un serveur avec des protocoles web. Mozilla fournit des exécutables « Web runtime » pour les diverses plateformes, de sorte que les applications peuvent tourner dans leur propre fenêtre, hors du cadre de la fenêtre de navigation.

Si vous voulez tirer le meilleur parti des applications installables, voici quelques exemples des très nombreuses possibilités qu'elles vous offrent :

  • Utilisez responsive Web design pour que votre application ait un aspect et un fonctionnement optimisés sur tous les appareils.
  • Monétisez vos applications.
  • Fournissez un moyen d' identifier vos utilisateurs.
  • Activez le cache hors-connexion pour que votre application soit utilisable lorsque l'appareil n'est pas connecté à l'internet.
  • Stockez les données localement en utilisant soit localStorage soit IndexedDB. Cet article (en) fait le point sur les avantages et inconvénients des diverses méthodes de stockage local.
  • Lancez l'application de façon autonome (avec une icône sur le bureau ou l'écran d'accueil).
  • Utilisez les API des appareils pour interagir avec la couche matérielle, comme la géolocalisation et l'orientation.
  • Fournissez à l'utilisateur un moyen de vous faire part de ses commentaires. Le groupe de recherche Mozilla sur les utilisateurs a remarqué que ceux-ci voulaient faire part de leur réactions sur les applications aux développeurs et savoir qu'il y a des êtres humains qui en prendront  connaissance. Ils souhaitent faire des suggestions et aider à régler des problèmes. Il risquent de cesser d'utiliser l'application s'il existe un problème et qu'on ne procure aucune aide.

Technologies utiles

Voici quelques technologies web qui peuvent vous être utiles pour écrire des applications installables. Veuillez noter qu'aucun élément de la liste qui suit n'est spécifique aux application ouvertes !

À consulter également

Source de la révision

<p>{{ TranslationInProgress() }}</p>
<h2>Minimum requis</h2>
<p>Si vous êtes développeur web et souhaitez transformer un site ou une application web en une application web ouverte, vous n'avez pas besoin de beaucoup de choses <em>techniquement</em>. Les pré-requis minimum sont peu nombreux :</p>
<ol> <li>Créer un <a href="/en/Apps/Manifest" title="App Manifest">app manifest</a>.</li> <li>Fournissez un manifeste d'application avec une extension de fichier <code>.webapp</code>. L'en-tête HTTP <code>Content-Type:</code> doit être mis mis à la valeur <code>application/x-web-app-manifest+json</code>.</li> <li>Publiez l'application, soit sur votre propre site soit sur un magasin d'applications (soit les deux).. Pour publier vous-même il vous faut <a href="Apps_JavaScript_API" rel="internal" title="/en/Apps/Apps_JavaScript_API">ajouter un peu de code à votre site pour gérer l'installation et la mise à jour de l'application</a> depuis le navigateur de l'utilisateur.</li>
</ol><h2>Fonctionnalités facultatives</h2>
<p><em>Philosophiquement</em>, l'idée de réaliser une application web ouverte installable représente beaucoup plus que simplement ajouter un manifeste à votre site. Les technologies web standards peuvent être considérées comme des plateformes parfaitement aptes à recevoir des applications, il se trouve qu'elles utilisent le moteur de rendu d'un navigateur pour afficher une interface utilisateur et interpréter le code, et communiquent avec un serveur avec des protocoles web. Mozilla fournit des exécutables « <a href="/en/Apps/Apps_architecture#Web_runtime" title="https://developer.mozilla.org/en/Apps/Apps_architecture#Web_runtime">Web runtime » </a>pour les diverses plateformes, de sorte que les applications peuvent tourner dans leur propre fenêtre, hors du cadre de la fenêtre de navigation.</p>
<p>Si vous voulez tirer le meilleur parti des applications installables, voici quelques exemples des très nombreuses possibilités qu'elles vous offrent :</p>
<ul> <li>Utilisez <a href="/en/Web_Development/Responsive_Web_design" title="en/Web development/Responsive Web design">responsive Web design</a> pour que votre application ait un aspect et un fonctionnement optimisés sur tous les appareils.</li> <li>Monétisez vos applications.</li> <li>Fournissez un moyen d' <a href="/en/Apps/Identity_integration" title="Identity integration for apps">identifier vos utilisateurs</a>.</li> <li><a href="/en/Apps/Using_apps_offline" title="/en/Apps/Using apps offline">Activez le cache hors-connexion</a> pour que votre application soit utilisable lorsque l'appareil n'est pas connecté à l'internet.</li> <li>Stockez les données localement en utilisant soit <a href="/en/DOM/Storage" title="DOM Storage">localStorage</a> soit <a href="/en/IndexedDB" title="IndexedDB">IndexedDB</a>. <a class="link-https" href="https://hacks.mozilla.org/2012/03/there-is-no-simple-solution-for-local-storage/" title="https://hacks.mozilla.org/2012/03/there-is-no-simple-solution-for-local-storage/">Cet article</a> (en) fait le point sur les avantages et inconvénients des diverses méthodes de stockage local.</li> <li><a href="/en/Apps/Platform-specific_details" title="/en/Apps/Launching apps">Lancez l'application</a> de façon autonome (avec une icône sur le bureau ou l'écran d'accueil).</li> <li>Utilisez les API des appareils pour interagir avec la couche matérielle, comme la <a href="/En/Using_geolocation" title="Using geolocation">géolocalisation</a> et l'<a href="/en/DOM/Orientation_and_motion_data_explained" title="Orientation and motion data explained">orientation</a>.</li> <li>Fournissez à l'utilisateur un moyen de vous faire part de ses commentaires. Le groupe de recherche Mozilla sur les utilisateurs a remarqué que ceux-ci voulaient faire part de leur réactions sur les applications aux développeurs et savoir qu'il y a des êtres humains qui en prendront  connaissance. Ils souhaitent faire des suggestions et aider à régler des problèmes. Il risquent de cesser d'utiliser l'application s'il existe un problème et qu'on ne procure aucune aide.</li>
</ul><h2>Technologies utiles</h2>
<p>Voici quelques technologies web qui peuvent vous être utiles pour écrire des applications installables. Veuillez noter qu'aucun élément de la liste qui suit n'est spécifique aux application ouvertes !</p>
<ul> <li><a href="/en/HTML/HTML5" title="HTML5">HTML5</a></li> <li><a href="/en/CSS" title="CSS">CSS</a></li> <li><a href="/en/JavaScript" title="/en/JavaScript">JavaScript</a></li> <li><a href="/en/HTML/Canvas" title="Canvas">Canvas</a></li> <li><a href="/en/AJAX" title="/en/Ajax">Ajax</a></li> <li><a href="/en/Using_the_Application_Cache" title="/en/Offline resources in Firefox">ressources jors-ligne de Firefox</a></li> <li><a href="/en/DOM/Storage" title="DOM Storage">Stockage DOM</a></li> <li><a href="/en/IndexedDB" title="IndexedDB">IndexedDB</a></li> <li><a href="/En/DragDrop/Drag_and_Drop" title="Drag and drop">Glisser-déposer</a></li>
</ul>
<h2>À consulter également</h2>
<ul> <li><a class="external" href="http://smus.com/mobile-web-app-tech-stack" title="http://smus.com/mobile-web-app-tech-stack">Les technologies pour applications web mobiles</a></li>
</ul>
Revenir à cette révision