diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:41:45 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:41:45 -0500 |
commit | 1109132f09d75da9a28b649c7677bb6ce07c40c0 (patch) | |
tree | 0dd8b084480983cf9f9680e8aedb92782a921b13 /files/es/web/api/navigatoronline/eventos_online_y_offline | |
parent | 4b1a9203c547c019fc5398082ae19a3f3d4c3efe (diff) | |
download | translated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.tar.gz translated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.tar.bz2 translated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.zip |
initial commit
Diffstat (limited to 'files/es/web/api/navigatoronline/eventos_online_y_offline')
-rw-r--r-- | files/es/web/api/navigatoronline/eventos_online_y_offline/index.html | 91 |
1 files changed, 91 insertions, 0 deletions
diff --git a/files/es/web/api/navigatoronline/eventos_online_y_offline/index.html b/files/es/web/api/navigatoronline/eventos_online_y_offline/index.html new file mode 100644 index 0000000000..d4f8a77824 --- /dev/null +++ b/files/es/web/api/navigatoronline/eventos_online_y_offline/index.html @@ -0,0 +1,91 @@ +--- +title: Eventos online y offline +slug: Web/API/NavigatorOnLine/Eventos_online_y_offline +tags: + - AJAX + - DOM + - Desarrollo_Web + - Todas_las_Categorías +translation_of: Web/API/NavigatorOnLine/Online_and_offline_events +--- +<p>{{ Fx_minversion_header(3) }} +<a href="es/Firefox_3_para_desarrolladores">Firefox 3</a> implementa <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#offline">eventos Online/Offline</a> de la <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">especificacióbn WHATWG Web Applications 1.0</a>. +</p> +<h3 id="Descripci.C3.B3n" name="Descripci.C3.B3n"> Descripción </h3> +<p>Para poder construir una aplicación web offline-funcional, necesitas conocer cuándo está tu aplicación realmente offline. Además, también necesitas conocer cuándo vuelve la aplicación al estado 'online' nuevamente. A efectos prácticos, los requisitos son los siguientes: +</p> +<ol><li> Necesitas conocer cuándo el usuario vuelve a estar online, para que puedas re-sincronizar con el servidor. +</li><li> Necesitas conocer cuándo el usuario está offline, para así estar seguro de poner en cola las peticiones al servidor para más tarde. +</li></ol> +<p>Es este proceso el que los eventos online/offline ayudan a trivializar. +</p><p>Tu aplicación web quizás necesite establecer que ciertos documentos se mantengan en la caché de recursos offline. Para hacerlo, incluye elementos <code>LINK</code> en tu sección <code>HEAD</code> de la siguiente manera: +</p> +<pre class="eval"><span class="nowiki"><link rel="offline-resource" href="mi_recurso></span> +</pre> +<p>Cuando Firefox 3 o superiores procesan el HTML, esto causará que el recurso referenciado se mantenga en caché para su uso offline en un recurso especial de la caché. +</p> +<h3 id="API" name="API"> API </h3> +<h4 id="navigator.onLine" name="navigator.onLine"> <code>navigator.onLine</code> </h4> +<p><code><a href="es/DOM/window.navigator.onLine">navigator.onLine</a></code> es una propiedad que mantiene un valor <code>true</code>/<code>false</code> (<code>true</code> para online, <code>false</code> para offline). Esta propiedad se actualiza siempre que el usuario cambia hacia "Modo sin conexión" seleccionando el menú correspondiente (Archivo -> Trabajar sin conexión en Firefox). +</p><p>Además, esta propiedad se debería actualizar siempre que el navegador no sea capaz de conectarse a la red. De acuerdo con la especificación: +</p> +<blockquote> +El atributo <code>navigator.onLine</code> debe devolver false si el agente de usuario no contactará con la red cuando el usuario siga los enlaces o cuando un script solicite una página remota (o sepa que intentarlo fallaría)... +</blockquote> +<p>Firefox 2 actualiza esta propiedad cuando cambia desde/hacia el modo offline del navegador, y cuando pierde/recupera la conectividad de la red en Windows y Linux. +</p><p>Esta propiedad existía en versiones más antiguas de Firefox e Internet Explorer (la especificación surgió a partir estas implementaciones previas), así que puedes comenzar a usarla inmediatamente. La detección automática del estado de la red se implementó en Firefox 2. +</p> +<h4 id="eventos_.22online.22_y_.22offline.22" name="eventos_.22online.22_y_.22offline.22"> eventos "<code>online</code>" y "<code>offline</code>" </h4> +<p><a href="es/Firefox_3_para_desarrolladores">Firefox 3</a> introduce dos nuevos eventos: "<code>online</code>" y "<code>offline</code>". Estos dos eventos son iniciados en el <code><body></code> de cada página cuando el usuario cambia de modo online a offline. Además, los eventos emergen desde <code>document.body</code> a <code>document</code>, terminando en <code>window</code>. Ambos eventos son no-cancelables (no se puede evitar que el usuario pase a modo online u offline). +</p><p>Puedes registrar <i>listeners</i> para estos eventos de varias maneras habituales: +</p> +<ul><li> Usando <code><a href="es/DOM/element.addEventListener">addEventListener</a></code> en <code>window</code>, <code>document</code> o <code>document.body</code> +</li><li> estableciendo las propiedades <code>.ononline</code> u <code>.onoffline</code> en <code>document</code> o <code>document.body</code> para que apunten a un objeto JavaScript <code>Function</code> (<b>Nota:</b> usar <code>window.ononline</code> o <code>window.onoffline</code> no funcionará por razones de compatibilidad). +</li><li> especificando los atributos <code>ononline="..."</code> u <code>onoffline="..."</code> en la etiqueta <code><body></code> en el código HTML. +</li></ul> +<h3 id="Ejemplo:" name="Ejemplo:"> Ejemplo: </h3> +<p>Hay una <a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=220609">prueba sencilla</a> que puedes ejecutar para verificar que los eventos están funcionando. +</p><p><span class="comment"> +</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("Event: " + msg + "; status=" + 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="Referencias" name="Referencias"> Referencias </h3> +<ul><li> <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#offline">Sección 'Eventos Online/Offline ' de la especificación WHATWG Web Applications 1.0 </a> +</li><li> <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=336359">El bug que documenta la implementación de los eventos online/offline en Firefox </a> y un enlace <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=336682">con una modificación posterior</a> +</li><li> <a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=220609">Un ejemplo sencillo</a> +</li><li> <a class="external" href="http://ejohn.org/blog/offline-events/">Una explicación de los eventos Online/Offline</a> +</li></ul> +<p><br> +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/Online_and_offline_events", "fr": "fr/\u00c9v\u00e8nements_online_et_offline", "ja": "ja/Online_and_offline_events", "pl": "pl/Zdarzenia_online_i_offline", "pt": "pt/Eventos_online_e_offline" } ) }} |