HTML5 Browser state: Monitoring Browser Network Connection

This tutorial demonstrates how you can access the browser connection state.

This feature is supported in mobile applications only.

Warm-up

Become familiar with the HTML5 Browser state API basics by learning about:

Retrieving the Browser State
Retrieve the current browser state and track changes in the state.

Retrieving the Browser State

To enhance the user interaction with the device, you must learn to retrieve the browser state:

The updateIndicator() method updates the browser connection state information on the screen to reflect the current state.

To retrieve the current state, use the return value of the onLine attribute of the navigator interface:

<!DOCTYPE HTML>
<html>
   <head>
      <title>Online status</title>
      <script>

         function updateIndicator() 
         {
            var status = navigator.onLine ? 'online' : 'offline';
            document.getElementById('indicator').textContent = status;
         }

Subscribe to event listeners to be informed when the connection state changes:

         /* Receive event when page is loaded */
         window.onload = updateIndicator;
         /* Receive event when network connection is available */
         window.ononline = updateIndicator;
         /* Receive event when network connection is unavailable */
         window.onoffline = updateIndicator;

      </script>
   </head>
   <body>
      <p>The network is: <span id="indicator">(state unknown)</span>
   </body>
</html>

Source Code

For the complete source code related to this use case, see the following file:

browser_state.htm