How to Check the Internet Connection Status with JavaScript | Async Await | Offline | Online

[@rajashekarkothapelli9649]

Hi, its a great video, will it shows network status when the wifi disconnected instead of unchecking offline check box in developer tools, Thanks

[@DaveGrayTeachesCode]

Thanks! It should detect if it can download the 1 pixel image or not. If not, it will say offline. 👍

[@cameronthompson1275]

Excellent video! Very clear, and easy to understand. Thanks!

[@DaveGrayTeachesCode]

Glad it was helpful! Thank you.

[@vladislavkarpov6372]

Thank you for the explanation. I didn't get the trick with the 1pixel.png. Could you please explain this?

[@vladislavkarpov6372]

Also, it worked with the browser online tick, but when I turned off wi-fi on my laptop it shows still Online.

[@DaveGrayTeachesCode]

Hello Vladislav and thanks for asking. My explanation in the freeCodeCamp article is the best explanation I have: www.freecodecamp.org/news/how-to-check-internet-connection-status-with-javascript/

[@DaveGrayTeachesCode]

@@vladislavkarpov6372 for your laptop online issue, I cannot diagnose from here. That said, if you read the provided freeCodeCamp article to understand the 1pixel image usage, this code should provide the results described :)

[@CynthiaSotoCaballerolYEAHl]

@@DaveGrayTeachesCode Do I need to have the 1pixel.png image in my directory in order to work with this code? Because I'm getting a Not Found error 404

[@DaveGrayTeachesCode]

@@CynthiaSotoCaballerolYEAHl You do need to have the 1pixel.png in the directory. The 404 indicates you do not have it there. This is just like needing your index.html file there or it will not be found.

[@tictactoc9311]

Why are my fetch request remains return true even though I've already turned off my Wi fi?

[@DaveGrayTeachesCode]

Are you getting a cached response? Check the network tab in dev tools. You might consider adding cache-busting to your fetch request: developer.mozilla.org/en-US/docs/Web/API/Request/cache

[@tictactoc9311]

Wow thanks👍 I didn't expect to get response lol

[@shai_guy_chi_guy]

This is great, extremely useful, and easy to understand. Great work! My only question/concern is that the fetch requests are blowing up my server logs. I assume there isn't a way to turn off logging just for this specific request...

[@DaveGrayTeachesCode]

Probably depends on your server and logging system. I know I could if I used logging middleware in Node.js. Glad the video helped!

[@ahmad-murery]

I always check the network/router connection first and if succeeded I go and make a request to the server, this way I can return more accurate information about where the connection has failed (if any) Thanks

[@DaveGrayTeachesCode]

I'm interested in seeing your code process for this, and is it something you do for all apps you deploy or only on your network?

[@ahmad-murery]

@@DaveGrayTeachesCode Thanks Dave, I remember I deployed one web app way back in the past, it uses XHR instead of fetch API, unfortunately it's not online anymore, maybe off-topic but I have implemented the same concept in a desktop DotNet app where the connection is not stable and we needed a way to inform the user about the server availability and whether the disconnection was due to a LAN issue or due to an internet issue (working-offline was not an option), it has a very close implementation to JS where we have a Network.IsAvailable property and a Network.NetworkAvailabilityChanged event listener which I used to update a global app status with corresponding value, in the same time another function is called periodically, it checks the global connection status and then request the server only if the network is available. I believe understanding the concepts is what makes you a better programmer and the code is just your tool to translate that to a working model regardless of the language. Sorry for the long reply.

[@thanhkhanhnguyen3850]

what about "How to Check the Website status Up or Down with JavaScript" ?

[@DaveGrayTeachesCode]

You would need to be checking a different site. If your site was down, your Javascript would be down, too.

[@thearmor9231]

Thanks a lots!

[@DaveGrayTeachesCode]

Glad I could help!

[@maximumaim]

Nice coding, thanks sir 😊

[@DaveGrayTeachesCode]

You're welcome!

[@dharmeshgohil9375]

THANK YOU

[@maheshm4292]

Wow

[@DaveGrayTeachesCode]

I think that's a good wow 🙂 and if so, you're welcome.

[@maheshm4292]

@@DaveGrayTeachesCode yes it's a good wow 😂

[@DaveGrayTeachesCode]

@@maheshm4292 😂 Right on!

[@namsraikhatanbaatar9932]

Sass :D