Online and offline events

  • Revision slug: Online_and_offline_events
  • Revision title: Online and offline events
  • Revision id: 79895
  • Created:
  • Creator: Nickolay
  • Is current revision? No
  • Comment add {{fx minversion header|3}}, categories

Revision Content

{{template.Fx_minversion_header(3)}} Firefox 3 implements Online/Offline events from the WHATWG Web Applications 1.0 specification.

Overview

Effectively, in order to build a good offline-capable web application, you need to know when your application is actually offline. Incidentally, you also need to know when your application has returned to an 'online' status again. Effectively, the requirements break down as such:

  1. You need to know when the service comes back online, so that you can re-synchronize with the server.
  2. You need to know when your service is offline, so that you can be sure to queue your server requests for a later time.

It is this process that online/offline events helps to trivialize.

API

navigator.onLine

This is a single property that maintains a true/false value (true for online, false for offline). Currently, this property is updated (in Firefox) whenever you switch into "Offline Mode" (more details at the end of this post).

Additionally, this property should update whenever a browser is no longer capable of connecting to the network. According to the specification:

The navigator.onLine attribute must return false if the user agent will not contact the network when the user follows links or when a script requests a remote page (or knows that such an attempt would fail)...

Firefox updates this property when switching to/from the browser's Offline mode, and when losing/regaining network connectivity in Windows and Linux.

This property already exists in Firefox and Internet Explorer (the specification based itself off of these prior implementations), so you can begin using it immediately.

"online" and "offline" events

These two events are fired against the document body of any page that switches in between online and offline mode. Additionally, the event bubbles up from document.body, to document, ending at window. Both of the events are non-cancellable (you can't prevent the user from coming online, or going offline).

Example

In the ticket that describes the implementation of these events in Firefox, there's a simple test case that you can run to verify that the events are working.

 <!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>

References

Revision Source

<p>{{template.Fx_minversion_header(3)}}
<a href="en/Firefox_3_for_developers">Firefox 3</a> implements <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#offline">Online/Offline events</a> from the <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">WHATWG Web Applications 1.0 specification</a>.
</p>
<h3 name="Overview"> Overview </h3>
<p>Effectively, in order to build a good offline-capable web application, you need to know when your application is actually offline. Incidentally, you also need to know when your application has returned to an 'online' status again. Effectively, the requirements break down as such:
</p>
<ol><li> You need to know when the service comes back online, so that you can re-synchronize with the server.
</li><li> You need to know when your service is offline, so that you can be sure to queue your server requests for a later time.
</li></ol>
<p>It is this process that online/offline events helps to trivialize.
</p>
<h3 name="API"> API </h3>
<h4 name="navigator.onLine"> <code>navigator.onLine</code> </h4>
<p>This is a single property that maintains a true/false value (true for online, false for offline). Currently, this property is updated (in Firefox) whenever you switch into "Offline Mode" (more details at the end of this post).
</p><p>Additionally, this property should update whenever a browser is no longer capable of connecting to the network. According to the specification:
</p>
<dl><dd>The navigator.onLine attribute must return false if the user agent will not contact the network when the user follows links or when a script requests a remote page (or knows that such an attempt would fail)...
</dd></dl>
<p>Firefox updates this property when switching to/from the browser's Offline mode, and when losing/regaining network connectivity in Windows and Linux.
</p><p>This property already exists in Firefox and Internet Explorer (the specification based itself off of these prior implementations), so you can begin using it immediately.
</p>
<h4 name=".22online.22_and_.22offline.22_events"> "<code>online</code>" and "<code>offline</code>" events </h4>
<p>These two events are fired against the document body of any page that switches in between online and offline mode. Additionally, the event bubbles up from document.body, to document, ending at window. Both of the events are non-cancellable (you can't prevent the user from coming online, or going offline).
</p>
<h3 name="Example"> Example </h3>
<p>In <a class="external" href="https://bugzilla.mozilla.org/show_bug.cgi?id=336359">the ticket</a> that describes the implementation of these events in Firefox, there's <a class="external" href="https://bugzilla.mozilla.org/attachment.cgi?id=220609">a simple test case</a> that you can run to verify that the events are working.
</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("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);
     }
   &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 name="References"> References </h3>
<ul><li> <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">WHATWG Web Applications 1.0 Specification</a>
</li><li> <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#offline">Online/Offline events</a>
</li><li> <a class="external" href="https://bugzilla.mozilla.org/show_bug.cgi?id=336359">Implementation of Online/Offline events in Firefox</a>
</li><li> <a class="external" href="https://bugzilla.mozilla.org/attachment.cgi?id=220609">A simple test case</a>
</li><li> <a class="external" href="http://ejohn.org/blog/offline-events/">An explanation of Online/Offline events</a>
</li></ul>
Revert to this revision