Your Search Results

    Online and offline events

    Some browsers implement Online/Offline events from the WHATWG Web Applications 1.0 specification.


    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 user comes back online, so that you can re-synchronize with the server.
    2. You need to know when the user 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 help to trivialize.

    Your web application may also need to establish that certain documents be maintained in the offline resources cache. You can learn more about how to do this in the article Offline resources in Firefox.


    navigator.onLine is a property that maintains a true/false value (true for online, false for offline). This property is updated whenever the user switches into "Offline Mode" by selecting the corresponding menu item (File -> Work Offline in Firefox).

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


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

    This property existed in older versions of Firefox and Internet Explorer (the specification based itself off of these prior implementations), so you can begin using it immediately. Network status autodetection was implemented in Firefox 2.

    "online" and "offline" events

    Firefox 3 introduces two new events: "online" and "offline". These two events are fired on the <body> of each page when the browser switches between online and offline mode. Additionally, the events bubble up from document.body, to document, ending at window. Both events are non-cancellable (you can't prevent the user from coming online, or going offline).


    • using addEventListener on the window, document, or document.body



    Here's the JavaScript part:

    window.addEventListener('load', function() {
      var status = document.getElementById("status");
      function updateOnlineStatus(event) {
        var condition = navigator.onLine ? "online" : "offline";
        status.className = condition;
        status.innerHTML = condition.toUpperCase();
        log.insertAdjacentHTML("beforeend", "Event: " + event.type + "; Status: " + condition);
      window.addEventListener('online',  updateOnlineStatus);
      window.addEventListener('offline', updateOnlineStatus);

    A touch of CSS

    #status {
      position : fixed;
      width: 100%;
      font : bold 1em sans-serif;
      color: #FFF:
      padding : 0.5em
    #log {
      padding: 2.5em 0.5em 0.5em;
      font: 1em sans-serif;
    .online {
      background: green;
    .offline {
      background: red;

    And the corresponding HTMLXXX When mochitests for this are created, point to those instead and update this example -nickolay

    <div id="status"></div>
    <div id="log"></div>
    <p>This is a test</p>

    Here's the live result


    If the API isn't implemented in the browser, you can use other signals to detect if you are offline including listening for AppCache error events and responses from XMLHttpRequest.


    Document Tags and Contributors

    Last updated by: jsx,