Online / Offline Status Detection w/ Async & Await

online_offline_detection.js

/*  ********** Online / Offline Detection **********  */

// Request a small image at an interval to determine status
// ** Get a 1x1 pixel image here: http://www.1x1px.me/
// ** Use this code with an HTML element with id="status"

const checkOnlineStatus = async () => {
  try {
    const online = await fetch("/1pixel.png");
    return online.status >= 200 && online.status < 300; // either true or false
  } catch (err) {
    return false; // definitely offline
  }
};

setInterval(async () => {
  const result = await checkOnlineStatus();
  const statusDisplay = document.getElementById("status");
  statusDisplay.textContent = result ? "Online" : "OFFline";
}, 3000); // probably too often, try 30000 for every 30 seconds

// forgot to include async load event listener in the video! 
window.addEventListener("load", async (event) => {
  const statusDisplay = document.getElementById("status");
  statusDisplay.textContent = (await checkOnlineStatus())
    ? "Online"
    : "OFFline";
});

Lot of bloatware waiting for you on that website, please don't visit or download any image from 1x1px.me website. It is just another scam he smoothly pulled out on everyone.
He is just trying to call the local file and that does not indicate any connection to the internet and thats not the correct way to do it. You are just fetching a local file and it gives success even if don't have active internet connection, cause your browser already must have downloaded it.

You can get a 1x1 pixel image from other sites or make your own. I simply shared where I got mine. It is not a "scam". I was trying to be helpful.

Your 2nd paragraph is incorrect. In a dev environment, yes, that would be a local file - HOWEVER, if you host your website on a server and then request that image from the server - it is ALL online. 🤦‍♂️

The points made above about using a self-hosted image by DesignByOnyx are correct. Nailed it! 🚀

I always welcome improvements and I think the suggested "cache: no-cache" setting above by jacobcollinsdev is a good idea. 💯

Tell them to go to https://commons.wikimedia.org/wiki/File:1x1.png

I implemented this React, with a bit of modification with the request to the server to fetch HEAD only to the root URL.

Please check the following link:

https://codesandbox.io/s/check-online-offline-status-44ju8p?file=/src/App.tsx

You link is dead, please update