Browser Integration

Navigator Online Status

navigator.onLine and browser online/offline events update one accessible status output.

Program

The browser already knows whether it thinks the page is online. A small status output can show that state and update when the connection changes.

navigator_online_status.html
Visuals: captured from real browser rendering
<output id="connection" role="status">Checking connection</output>
<script>
  const statusEl = document.querySelector("#connection");
  function renderOnline(isOnline) {
    statusEl.textContent = isOnline ? "Online" : "Offline";
    statusEl.dataset.state = isOnline ? "online" : "offline";
  }
  renderOnline(navigator.onLine);
  window.addEventListener("online", () => renderOnline(true));
  window.addEventListener("offline", () => renderOnline(false));
</script>

  1. Create an accessible status output.

    A connection status output is ready to announce short state changes.
    role status makes the connection label an accessible live status.

  2. Find the status element.

    JavaScript stores a reference to the connection output.
    The script keeps one reference to the visible status output.

  3. Define one renderer for connection state.

    A renderOnline function will turn a boolean into visible status text.
    One render function handles both the first paint and later events.

  4. Render the online or offline text.

    The output text changes to Online or Offline based on the browser hint.
    The status text is the part users see and hear.

  5. Read the browser's initial online hint.

    navigator.onLine supplies the first status value.
    The first render uses the browser's current connection hint.

  6. Listen for future connection changes.

    Online and offline browser events will re-render the status output.
    The page updates when the browser fires online or offline events.
navigator.onLine navigator.onLine is the browser's current online/offline hint.
status output role="status" lets the page announce a short state change without moving focus.