Sui browser moderni è disponibile la proprietà JavaScript navigator.onLine che ritorna true se la pagina è online, quindi c'è connessione, altrimenti false.
Quindi da una qualsiasi pagina HTML in JavaScript posso vedere lo stato
JavaScript
console.log(navigator.onLine);

Eventi

E' anche possibile gestire degli eventi specifici sull'oggetto JavaScript window che vengono invocati al cambio si stato, questi eventi sono online e offline.
JavaScript
window.addEventListener("online", handleNetworkChanged);
window.addEventListener("offline", handleNetworkChanged);
// per aggiornare subito lo stato
handleNetworkChanged();
La funzione handleNetworkChanged sarà simile a questa corrente
JavaScript
function handleNetworkChanged() {
    const isOnLine = navigator.onLine;
    const status = navigator.onLine ? "OnLine" : "OffLine";
    console.log(status);

    const elm = document.getElementById("network-status");
    elm.innerHTML = status;
    if (isOnLine === true) {
        elm.classList.remove("offline");
        elm.classList.add("online");
    } else {
        elm.classList.remove("online");
        elm.classList.add("offline");
    }
}
dove è possibile modificare un elemento HTML per visualizzare lo stato
HTML
<div id="network-status">Attendi...</div>

DEMO

Questa è una demo che mostra gli eventi in azione.
Viene visualizzato un riquadro verde se la connessione è presente (online) oppure rosso se manca la connessione (offline)
Attendi...
Per simulare la mancanza di connessione, da Chrome, premi F12 per aprire i Developer Tools e vai nella scheda Network.
Qui è possibile simulare la mancanza di connessione tramite il menu che di default mostra No throttiling
andando ad impostare lo stato su Offline.
Su Can I use è possibile verificare il supporto da parte dei browser.
Potrebbe interessarti anche: