diff options
Diffstat (limited to 'files/fr/web/api/navigatoronline')
3 files changed, 252 insertions, 0 deletions
diff --git a/files/fr/web/api/navigatoronline/index.html b/files/fr/web/api/navigatoronline/index.html new file mode 100644 index 0000000000..118222cd81 --- /dev/null +++ b/files/fr/web/api/navigatoronline/index.html @@ -0,0 +1,62 @@ +--- +title: NavigatorOnLine +slug: Web/API/NavigatorOnLine +tags: + - API +translation_of: Web/API/NavigatorOnLine +--- +<p>{{APIRef("HTML DOM")}}</p> + +<p>L'interface <code><strong>NavigatorOnLine</strong></code> contient les méthodes et les propriétés concernant l'état de connexion du navigateur.</p> + +<p>Il n'y a pas d'objet de type <code>NavigatorOnLine</code>, mais d'autres interfaces l'implémentent comme {{domxref("Navigator")}} ou {{domxref("WorkerNavigator")}}.</p> + +<h2 id="Propriétés">Propriétés</h2> + +<p><em>L'interface <code>NavigatorOnLine</code></em><em> n'hérite d'aucune propriété.</em></p> + +<dl> + <dt>{{domxref("NavigatorOnLine.onLine")}} {{readonlyInline}}</dt> + <dd>Retourne un {{domxref("Boolean")}} indicant si le navigateur est connecté.</dd> +</dl> + +<h2 id="Méthodes">Méthodes</h2> + +<p><em>The </em><em><code>NavigatorOnLine</code></em><em> interface neither implements, nor inherit any method.</em></p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécifications</th> + <th scope="col">Status</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#navigatoronline', 'NavigatorOnLine')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Pas de changement depuis la dernière version, {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', '#navigatoronline', 'NavigatorOnLine')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Version apportant la définition initiale: {{SpecName('HTML WHATWG')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_naviagteurs">Compatibilité des naviagteurs</h2> + + + +<p>{{Compat("api.NavigatorOnLine")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>L'interface {{domxref("Navigator")}} qui l'implémente;</li> + <li><a href="/fr/docs/Web/API/NavigatorOnLine/Online_and_offline_events">Les évènements online et offline</a>.</li> +</ul> diff --git a/files/fr/web/api/navigatoronline/online/index.html b/files/fr/web/api/navigatoronline/online/index.html new file mode 100644 index 0000000000..647b560985 --- /dev/null +++ b/files/fr/web/api/navigatoronline/online/index.html @@ -0,0 +1,91 @@ +--- +title: window.navigator.onLine +slug: Web/API/NavigatorOnLine/onLine +tags: + - API + - DOM Reference + - En ligne + - Navigateur En Ligne + - NavigatorOnLine + - Online + - Propriété + - Reference +translation_of: Web/API/NavigatorOnLine/onLine +--- +<div>{{ApiRef("HTML DOM")}}</div> + +<p><span class="seoSummary">Renvoie l'état en ligne du navigateur. La propriété renvoie une valeur {{domxref ("Boolean", "Booléenne")}}, avec <code>true</code> signifiant en ligne et <code>false</code> signifiant hors ligne.</span> La propriété envoie des mises à jour chaque fois que la capacité du navigateur à se connecter au réseau change. La mise à jour se produit lorsque l'utilisateur suit des liens ou lorsqu'un script demande une page distante. Par exemple, la propriété doit renvoyer false lorsque les utilisateurs cliquent sur des liens peu de temps après avoir perdu la connexion Internet.</p> + +<p>Les navigateurs implémentent cette propriété différemment.</p> + +<p>Dans Chrome et Safari, si le navigateur ne parvient pas à se connecter à un réseau local (LAN) ou à un routeur, il est hors ligne; toutes les autres conditions renvoient <code>true</code>. Ainsi, bien que vous puissiez supposer que le navigateur est hors ligne lorsqu'il renvoie une valeur <code>false</code>, vous ne pouvez pas supposer qu'une valeur vraie signifie nécessairement que le navigateur peut accéder à Internet. Vous pourriez obtenir de faux positifs, par exemple dans les cas où l'ordinateur exécute un logiciel de virtualisation doté d'adaptateurs Ethernet virtuels toujours «connectés». Par conséquent, si vous souhaitez vraiment déterminer l'état en ligne du navigateur, vous devez développer des moyens supplémentaires de vérification. Pour en savoir plus, consultez l'article HTML5 Rocks, <a href="http://www.html5rocks.com/en/mobile/workingoffthegrid.html">Working Off the Grid</a>.</p> + +<p>Dans Firefox et Internet Explorer, le passage du navigateur en mode hors ligne envoie la valeur <code>false</code>. Jusqu'à Firefox 41, toutes les autres conditions renvoient une valeur vraie; tester le comportement réel sur Nightly 68 sous Windows montre qu'il ne recherche que la connexion LAN comme Chrome et Safari donnant de faux positifs.</p> + +<p>Vous pouvez voir les changements dans l'état du réseau en écoutant les événements sur {{domxref ("Document/ononline", "window.ononline")}} et {{domxref ("Document/onoffline", "window.onoffline")}}.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox notranslate"><em>window</em>.navigator.onLine +</pre> + +<h3 id="Valeur">Valeur</h3> + +<p><code>online</code> est un {{domxref ("Boolean", "Booléen")}} <code>true</code> ou <code>false</code>.</p> + +<h2 id="Exemple">Exemple</h2> + +<p>Voir <a href="http://html5-demos.appspot.com/static/navigator.onLine.html">un exemple en direct</a>.</p> + +<p>Pour vérifier si vous êtes en ligne, interrogez <code>window.navigator.onLine</code>, comme dans l'exemple suivant:</p> + +<pre class="brush: js notranslate">console.log(navigator.onLine ? 'online' : 'offline') +</pre> + +<p>Si le navigateur ne prend pas en charge <code>navigator.onLine</code>, l'exemple ci-dessus apparaîtra toujours comme <code>false</code> / <code>undefined</code>.</p> + +<p>Pour voir les modifications de l'état du réseau, utilisez <a href="https://wiki.developer.mozilla.org/en-US/docs/DOM/element.addEventListener">addEventListener</a> pour écouter les événements sur {{domxref ("Window/offline_event", "window.online")}} et {{domxref ("Window/offline_event", "window.offline")}}, comme dans l'exemple suivant:</p> + +<pre class="brush: js notranslate">window.addEventListener('offline', function(e) { ... }) +window.addEventListener('offline', (e) => { ... }) + +window.addEventListener('online', function(e) { ... }) +window.addEventListener('online', (e) => { ... }) +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML WHATWG", "browsers.html#dom-navigator-online", "navigator.onLine")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Définition initiale</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div> + +<p>{{Compat("api.NavigatorOnLine.onLine")}}</p> + +<h2 id="Notes">Notes</h2> + +<p>Voir <a href="https://wiki.developer.mozilla.org/en-US/docs/Online_and_offline_events">Événements en ligne / hors ligne</a> pour une description plus détaillée de cette propriété ainsi que des nouvelles fonctionnalités hors ligne introduites dans Firefox 3.</p> + +<h2 id="Voir_également">Voir également</h2> + +<ul> + <li><a href="http://www.html5rocks.com/en/mobile/workingoffthegrid.html">HTML5 Rocks: Travailler hors du réseau avec HTML5 Offline</a></li> + <li><a href="http://www.html5rocks.com/en/tutorials/offline/whats-offline/">HTML5 Rocks: "Offline": Qu'est-ce que cela signifie et pourquoi devrais-je m'en soucier?</a></li> + <li><a href="http://hacks.mozilla.org/2010/01/offline-web-applications/">Mozilla Blog: Applications web offline</a></li> +</ul> diff --git a/files/fr/web/api/navigatoronline/évènements_online_et_offline/index.html b/files/fr/web/api/navigatoronline/évènements_online_et_offline/index.html new file mode 100644 index 0000000000..4ba6a2d717 --- /dev/null +++ b/files/fr/web/api/navigatoronline/évènements_online_et_offline/index.html @@ -0,0 +1,99 @@ +--- +title: Évènements online et offline +slug: Web/API/NavigatorOnLine/Évènements_online_et_offline +tags: + - AJAX + - Applications_web_hors_ligne + - DOM + - Développement_Web +translation_of: Web/API/NavigatorOnLine/Online_and_offline_events +--- +<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 quand votre application est 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><body></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>. (<strong>Note :</strong> 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><body></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"> <!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> +</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> + +<p>{{ 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" } ) }}</p> |