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";
});

I've found that even when I tick "Offline" in Chrome service workers, the ajax response is true... anyone else had this?

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

setInterval(async () => {
    const result = await checkOnlineStatus();
    console.log(result)
    const statusDisplay = document.querySelector('.internet-connection');
    statusDisplay.textContent = result ? "Online" : "OFFline";
}, 2000);

Solved this by adding cache: 'no-cache' beneath mode:'no-cors'

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.

isn't it better to just get a response from a server (say, Google) instead of trying to fetch an image?

@shirooo39 - companies and services usually prohibit this type of unauthorized requests to their servers, especially for production applications which you are likely using to make money (you don't want someone making unauthorized requests to your servers do you?) One day, Google might even block requests from your domain, or worse, sue you for adding unnecessary load to their servers. You're free to set up a developer account with google, register your app, generate an API key, and ping their APIs in accordance with their EULA - but that seems like a lot of work.

Furthermore, using a self-hosted image provides two metrics: 1) internet connectivity, and 2) a simple "health-check" mechanism to indicate that your server is up and running.

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

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

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