Navigator Online Status - JavaScript Client

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

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

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.