JSFiddle - React, Tailwind, and code Playground

by J. Albert Bowden

HTML

<body>

	<h1>Test Offline</h1>

	<h3>event listener on window</h3>
		<span id="test1">-</span>

	<h3>event listener on document.body</h3>
		<span id="test2">-</span>

	<h3>polling navigator.onLine</h3>
		<span id="test3">-</span>

</body>

JavaScript

/* Case 1 */
window.addEventListener("online", function() {
	document.getElementById('test1').innerHTML = "online";
}, false);

window.addEventListener("offline", function() {
	document.getElementById('test1').innerHTML = "OFFLINE";
}, false);

/* Case 2 */
document.body.ononline = function() {
	document.getElementById('test2').innerHTML = "online";
};
document.body.onoffline = function() {
	document.getElementById('test2').innerHTML = "OFFLINE";
};

/* Case 3 */
setInterval(function () {
	if (navigator && navigator.onLine) 
		document.getElementById('test3').innerHTML = "online";
	else
		document.getElementById('test3').innerHTML = "OFFLINE";
}, 500);