Évènements online et offline

  • Raccourci de la révision : Évènements_online_et_offline
  • Titre de la révision : Évènements online et offline
  • ID de la révision : 282605
  • Créé :
  • Créateur : BenoitL
  • Version actuelle ? Non
  • Commentaire +cat

Contenu de la révision

{{ Fx_minversion_header("3") }} Firefox 3 implémente les évènements online et offline de la spécification Web Applications 1.0 du WHATWG.

Aperçu

Afin de construire une bonne application Web capable de fonctionner hors ligne, il est nécessaire de savoir si votre application est ou non hors ligne. De même, vous devrez également savoir quand votre application est de nouveau en ligne. Concrètement, ce qui est nécessaire se résume à :

  1. Savoir quand l'utilisateur est de nouveau en ligne, afin de se resynchroniser avec le serveur.
  2. Savoir quand l'utilisateur est hors ligne, afin de s'assurer que les requêtes à faire vers le serveur soient bien enregistrées localement.

C'est ce processus que les évènements online et offline rendent presque trivial.

Votre application web peut également vouloir indiquer que certains documents doivent être maintenus dans le cache des ressources hors ligne. Pour en savoir plus sur la manière de préciser cette indication, consultez l'article Ressources hors ligne dans Firefox.

API

navigator.onLine est une propriété qui maintient une valeur true/false (true pour online, false pour offline). Cette propriété est mise à jour chaque fois que l'utilisateur passe en mode « Hors ligne » en sélectionnant l'entrée de menu correspondante (Fichier → Travailler hors connexion dans Firefox).

De plus, cette propriété doit être mise à jour dès que le navigateur n'arrive plus à se connecter au réseau. D'après la spécification :

L'attribut navigator.onLine doit renvoyer false si l'agent utilisateur ne va pas contacter le réseau lorsque l'utilisateur suit un lien ou lorsqu'un script demande une page distante (ou sait qu'une telle tentative échouerait)…

Firefox 2 met à jour cette propriété lors du passage en mode hors connexion du navigateur, et lors de la perte ou de la récupération de la connectivité réseau sous Windows et Linux.

Cette propriété existait dans de versions plus anciennes de Firefox et Internet Explorer (la spécification se base sur ces implémentations précédentes), vous pouvez donc immédiatement commencer à l'utiliser. La détection de l'état du réseau a été ajoutée dans Firefox 2.

Les évènements « online » et « offline »

Firefox 3 introduit deux nouveaux évènements : « online » et « offline ». Ces deux évènements sont déclenchés sur l'élément <body> de chaque page lorsque le navigateur passe d'un mode à l'autre. De plus, les évènements se propagent depuis document.body, vers document, puis vers window. Aucun de ces deux évènements n'est annulable (il n'est pas possible d'empêcher l'utilisateur de passer en ligne ou hors ligne).

Vous pouvez ajouter des gestionnaires pour ces évènements selon les manières habituelles :

  • en utilisant addEventListener sur window, document ou document.body
  • en définissant les propriétés .ononline ou .onoffline sur document ou document.body vers un objet JavaScript Function. (Note : l'utilisation de window.ononline ou window.onoffline ne fonctionnera pas, pour des raisons de compatibilité.)
  • en spécifiant les attributs ononline="…" ou onoffline="…" à la balise <body> dans le balisage HTML.

Exemple

Un cas de test simple peut être exécuté pour vérifier que les évènements fonctionnent. XXX When mochitests for this are created, point to those instead and update this example -nickolay

 <!doctype html>
 <html>
 <head>
   <script>
     function updateOnlineStatus(msg) {
       var status = document.getElementById("status");
       var condition = navigator.onLine ? "ONLINE" : "OFFLINE";
       status.setAttribute("class", condition);
       var state = document.getElementById("state");
       state.innerHTML = condition;
       var log = document.getElementById("log");
       log.appendChild(document.createTextNode("Évènement : " + msg + " ; état=" + condition + "\n"));
     }
     function loaded() {
       updateOnlineStatus("load");
       document.body.addEventListener("offline", function () {
         updateOnlineStatus("offline")
       }, false);
       document.body.addEventListener("online", function () {
         updateOnlineStatus("online")
       }, false);
     }
   </script>
   <style>...</style>
 </head>
 <body onload="loaded()">
   <div id="status"><p id="state"></p></div>
   <div id="log"></div>
 </body>
 </html>

Références

{{ languages( { "en": "en/Online_and_offline_events", "es": "es/Eventos_online_y_offline", "ja": "ja/Online_and_offline_events", "pl": "pl/Zdarzenia_online_i_offline", "pt": "pt/Eventos_online_e_offline" } ) }}

Source de la révision

<p>{{ Fx_minversion_header("3") }}
<a href="fr/Firefox_3_pour_les_d%c3%a9veloppeurs">Firefox 3</a> implémente <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#offline">les évènements <code>online</code> et <code>offline</code></a> de la <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">spécification Web Applications 1.0 du WHATWG</a>.
</p>
<h3 id="Aper.C3.A7u" name="Aper.C3.A7u"> Aperçu </h3>
<p>Afin de construire une bonne application Web capable de fonctionner hors ligne, il est nécessaire de savoir si votre application est ou non hors ligne. De même, vous devrez également savoir quand votre application est de nouveau en ligne. Concrètement, ce qui est nécessaire se résume à :
</p>
<ol><li> Savoir quand l'utilisateur est de nouveau en ligne, afin de se resynchroniser avec le serveur.
</li><li> Savoir quand l'utilisateur est hors ligne, afin de s'assurer que les requêtes à faire vers le serveur soient bien enregistrées localement.
</li></ol>
<p>C'est ce processus que les évènements <code>online</code> et <code>offline</code> rendent presque trivial.
</p><p>Votre application web peut également vouloir indiquer que certains documents doivent être maintenus dans le cache des ressources hors ligne. Pour en savoir plus sur la manière de préciser cette indication, consultez l'article <a href="fr/Ressources_hors_ligne_dans_Firefox">Ressources hors ligne dans Firefox</a>.
</p>
<h3 id="API" name="API"> API </h3>
<h4 id="navigator.onLine" name="navigator.onLine"> <code>navigator.onLine</code> </h4>
<p><code><a href="fr/DOM/window.navigator.onLine">navigator.onLine</a></code> est une propriété qui maintient une valeur <code>true</code>/<code>false</code> (<code>true</code> pour <code>online</code>, <code>false</code> pour <code>offline</code>). Cette propriété est mise à jour chaque fois que l'utilisateur passe en mode « Hors ligne » en sélectionnant l'entrée de menu correspondante (Fichier → Travailler hors connexion dans Firefox).
</p><p>De plus, cette propriété doit être mise à jour dès que le navigateur n'arrive plus à se connecter au réseau. D'après la spécification :
</p>
<blockquote cite="http://www.whatwg.org/specs/web-apps/current-work/#offline">
L'attribut <code>navigator.onLine</code> doit renvoyer <code>false</code> si l'agent utilisateur ne va pas contacter le réseau lorsque l'utilisateur suit un lien ou lorsqu'un script demande une page distante (ou sait qu'une telle tentative échouerait)…
</blockquote>
<p>Firefox 2 met à jour cette propriété lors du passage en mode hors connexion du navigateur, et lors de la perte ou de la récupération de la connectivité réseau sous Windows et Linux.
</p><p>Cette propriété existait dans de versions plus anciennes de Firefox et Internet Explorer (la spécification se base sur ces implémentations précédentes), vous pouvez donc immédiatement commencer à l'utiliser. La détection de l'état du réseau a été ajoutée dans Firefox 2.
</p>
<h4 id="Les_.C3.A9v.C3.A8nements_.C2.AB_online_.C2.BB_et_.C2.AB_offline_.C2.BB" name="Les_.C3.A9v.C3.A8nements_.C2.AB_online_.C2.BB_et_.C2.AB_offline_.C2.BB"> Les évènements « <code>online</code> » et « <code>offline</code> » </h4>
<p><a href="fr/Firefox_3">Firefox 3</a> introduit deux nouveaux évènements : « <code>online</code> » et « <code>offline</code> ». Ces deux évènements sont déclenchés sur l'élément <code>&lt;body&gt;</code> de chaque page lorsque le navigateur passe d'un mode à l'autre. De plus, les évènements se propagent depuis <code>document.body</code>, vers <code>document</code>, puis vers <code>window</code>. Aucun de ces deux évènements n'est annulable (il n'est pas possible d'empêcher l'utilisateur de passer en ligne ou hors ligne).
</p><p>Vous pouvez ajouter des gestionnaires pour ces évènements selon les manières habituelles :
</p>
<ul><li> en utilisant <code><a href="fr/DOM/element.addEventListener">addEventListener</a></code> sur <code>window</code>, <code>document</code> ou <code>document.body</code>
</li><li> en définissant les propriétés <code>.ononline</code> ou <code>.onoffline</code> sur <code>document</code> ou <code>document.body</code> vers un objet JavaScript <code>Function</code>. (<b>Note :</b> l'utilisation de <code>window.ononline</code> ou <code>window.onoffline</code> ne fonctionnera pas, pour des raisons de compatibilité.)
</li><li> en spécifiant les attributs <code>ononline="…"</code> ou <code>onoffline="…"</code> à la balise <code>&lt;body&gt;</code> dans le balisage HTML.
</li></ul>
<h3 id="Exemple" name="Exemple"> Exemple </h3>
<p>Un <a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=220609">cas de test simple</a> peut être exécuté pour vérifier que les évènements fonctionnent.
<span class="comment">XXX When mochitests for this are created, point to those instead and update this example -nickolay</span>
</p>
<pre class="eval"> &lt;!doctype html&gt;
 &lt;html&gt;
 &lt;head&gt;
   &lt;script&gt;
     function updateOnlineStatus(msg) {
       var status = document.getElementById("status");
       var condition = navigator.onLine ? "ONLINE" : "OFFLINE";
       status.setAttribute("class", condition);
       var state = document.getElementById("state");
       state.innerHTML = condition;
       var log = document.getElementById("log");
       log.appendChild(document.createTextNode("Évènement : " + msg + " ; état=" + condition + "\n"));
     }
     function loaded() {
       updateOnlineStatus("load");
       document.body.addEventListener("offline", function () {
         updateOnlineStatus("offline")
       }, false);
       document.body.addEventListener("online", function () {
         updateOnlineStatus("online")
       }, false);
     }
   &lt;/script&gt;
   &lt;style&gt;...&lt;/style&gt;
 &lt;/head&gt;
 &lt;body onload="loaded()"&gt;
   &lt;div id="status"&gt;&lt;p id="state"&gt;&lt;/p&gt;&lt;/div&gt;
   &lt;div id="log"&gt;&lt;/div&gt;
 &lt;/body&gt;
 &lt;/html&gt;
</pre>
<h3 id="R.C3.A9f.C3.A9rences" name="R.C3.A9f.C3.A9rences"> Références </h3>
<ul><li> <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#offline">La section « Offline Web applications » de la spécification Web Applications 1.0 du WHATWG</a>
</li><li> <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=336359">Le bug suivant l'implémentation des évènements online/offline dans Firefox</a> et sa <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=336682">continuation</a>
</li><li> <a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=220609">Un cas de test simple</a>
</li><li> <a class="external" href="http://ejohn.org/blog/offline-events/">Une explication sur les évènements <code>online</code> et <code>offline</code></a> (en anglais)
</li></ul>
<div class="noinclude">
</div>
{{ languages( { "en": "en/Online_and_offline_events", "es": "es/Eventos_online_y_offline", "ja": "ja/Online_and_offline_events", "pl": "pl/Zdarzenia_online_i_offline", "pt": "pt/Eventos_online_e_offline" } ) }}
Revenir à cette révision