Permettre votre application de fonctionner hors-connexion

  • Raccourci de la révision : Applications/Usage_hors-connexion
  • Titre de la révision : Usage hors-connexion
  • ID de la révision : 362027
  • Créé :
  • Créateur : tregagnon
  • Version actuelle ? Non
  • Commentaire

Contenu de la révision

La capacité d'utiliser les Applications sans connexion à Internet est particulièrement importante pour les appareils mobiles, qui peuvent se trouver au hasard des déplacements, hors de la zone d'accès aux réseaux. Mais c'est également un élément intéressant pour les ordinateurs, l'exemple le plus courant est celui d'une utilisation dans un avion, sans Wi-Fi.

Plusieurs technologies et stratégies peuvent contribuer à assurer une bonne expérience hors-connexion :

Cache de l'application

Le moyen le plus évident de faire tourner une application hors-connexion est d'utiliser un cache d'application qui stocke les ressources localement sur le système client, si bien qu'elles sont disponibles même quand Internet ne l'est pas.

Vérification de la connectivité

Un moyen décisif pour s'assurer d'un bon travail hors-connexion, c'est de vérifier que l'appareil est bien connecté, et qu'il réagit de façon appropriée si ce n'est pas le cas. Il vaut toujours mieux envoyer un message à l'utilisateur pour l'informer que l'application ne tourne plus car elle est hors-ligne, plutôt que de le laisser en plan en attendant qu'il reçoive un message classique de délai dépassé.

Le moyen le plus simple de le faire est de tester la propriété {{ domxref("window.navigator.onLine") }} et d'enregistrer ses changements. Cependant la valeur qu'elle renvoie ne donne pas une grande garantie de précision.

Si vous utilisez XMLHttpRequest pour mettre à jour dynamiquement les données, vous pouvez vérifier sa réactivité pour déterminer si la connexion au réseau a été interrompue pendant l'utilisation de votre application.

Voir aussi les évènements online et offline.

Ressources

Source de la révision

<p>La capacité d'utiliser les Applications sans connexion à Internet est particulièrement importante pour les appareils mobiles, qui peuvent se trouver au hasard des déplacements, hors de la zone d'accès aux réseaux. Mais c'est également un élément intéressant pour les ordinateurs, l'exemple le plus courant est celui d'une utilisation dans un avion, sans Wi-Fi.</p>
<p>Plusieurs technologies et stratégies peuvent contribuer à assurer une bonne expérience hors-connexion :</p>
<ul>
  <li><a href="#Cache_de_l'application">Le cache de l'application</a></li>
  <li><a href="#Verification_de_la_connectivite">La vérification de la connectivité</a></li>
  <li><a href="/fr/docs/DOM/Storage" title="en/DOM/Storage">Le stockage localement</a></li>
  <li><a href="/fr/docs/IndexedDB" title="IndexedDB">L'usage d'IndexedDB</a></li>
</ul>
<h2 id="Cache_de_l'application">Cache de l'application</h2>
<p>Le moyen le plus évident de faire tourner une application hors-connexion est d'utiliser un cache d'application qui stocke les ressources localement sur le système client, si bien qu'elles sont disponibles même quand Internet ne l'est pas.</p>
<ul>
  <li><a href="/fr/docs/Utiliser_Application_Cache" title="/en/Using_the_Application_Cache">Utilisation du cache de l'application</a></li>
  <li><a class="external" href="http://dev.w3.org/html5/spec/offline.html" title="http://dev.w3.org/html5/spec/offline.html">Spécifications du W3C pour les applications web hors-connexion</a></li>
</ul>
<h2 id="Verification_de_la_connectivite">Vérification de la connectivité</h2>
<p>Un moyen décisif pour s'assurer d'un bon travail hors-connexion, c'est de vérifier que l'appareil est bien connecté, et qu'il réagit de façon appropriée si ce n'est pas le cas. Il vaut toujours mieux envoyer un message à l'utilisateur pour l'informer que l'application ne tourne plus car elle est hors-ligne, plutôt que de le laisser en plan en attendant qu'il reçoive un message classique de délai dépassé.</p>
<p>Le moyen le plus simple de le faire est de tester la propriété {{ domxref("<code>window.navigator.onLine</code>") }} et d'enregistrer ses changements. Cependant la valeur qu'elle renvoie ne donne pas une grande garantie de précision.</p>
<p>Si vous utilisez <a href="/en/nsIXMLHttpRequest" title="en/XMLHttpRequest ">XMLHttpRequest </a>pour mettre à jour dynamiquement les données, vous pouvez vérifier sa réactivité pour déterminer si la connexion au réseau a été interrompue pendant l'utilisation de votre application.</p>
<p>Voir aussi les <a href="/fr/docs/Évènements_online_et_offline" title="/fr/docs/Évènements_online_et_offline">évènements <code>online</code> et <code>offline</code></a>.</p>
<h2 id="Ressources">Ressources</h2>
<ul>
  <li><a class="external" href="http://www.html5rocks.com/en/mobile/workingoffthegrid.html" title="http://www.html5rocks.com/en/mobile/workingoffthegrid.html">Travailler hors-connexion avec le HTML5</a></li>
  <li><a class="external" href="http://www.html5rocks.com/en/tutorials/offline/whats-offline/" title="http://www.html5rocks.com/en/tutorials/offline/whats-offline/">« Hors-connexion » : ce que cela implique et ce qu'il faut faire</a></li>
  <li><a class="external" href="http://diveintohtml5.info/offline.html" title="http://diveintohtml5.info/offline.html">Au cœur du HTML5 : passer hors-connexion</a></li>
</ul>
Revenir à cette révision