Identificare se la pagina è online o offline (JavaScript)

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

JavaScriptCopia

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.

JavaScriptCopia

window.addEventListener("online", handleNetworkChanged);
window.addEventListener("offline", handleNetworkChanged);
// per aggiornare subito lo stato
handleNetworkChanged();

La funzione handleNetworkChanged sarà simile a questa corrente

JavaScriptCopia

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

HTMLCopia

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