Cookie Consent by Free Privacy Policy Generator ๐Ÿ“Œ Detecting if the user is online with JavaScript

๐Ÿ  Team IT Security News

TSecurity.de ist eine Online-Plattform, die sich auf die Bereitstellung von Informationen,alle 15 Minuten neuste Nachrichten, Bildungsressourcen und Dienstleistungen rund um das Thema IT-Sicherheit spezialisiert hat.
Ob es sich um aktuelle Nachrichten, Fachartikel, Blogbeitrรคge, Webinare, Tutorials, oder Tipps & Tricks handelt, TSecurity.de bietet seinen Nutzern einen umfassenden รœberblick รผber die wichtigsten Aspekte der IT-Sicherheit in einer sich stรคndig verรคndernden digitalen Welt.

16.12.2023 - TIP: Wer den Cookie Consent Banner akzeptiert, kann z.B. von Englisch nach Deutsch รผbersetzen, erst Englisch auswรคhlen dann wieder Deutsch!

Google Android Playstore Download Button fรผr Team IT Security



๐Ÿ“š Detecting if the user is online with JavaScript


๐Ÿ’ก Newskategorie: Programmierung
๐Ÿ”— Quelle: dev.to

Sometimes you might want to enhance your application to notify users they might have lost their internet connection.

Users might be visiting your website and receiving a cached version, so it can often appear that their internet is still working.
However, they lost a connection under the hood, and nothing new will load.

This is where it can be beneficial to show them some messages to let them know they should check their connection.

Detecting connection status

We can leverage the navigator.onLine API to detect the connection status.
This will return a boolean to indicate whether the user is online.

Note: Be aware browsers implement this differently so results may vary.

This would work great on the initial load so we could do something like this.

window.addEventListener('load', () => {
  const status = navigator.onLine;
});

But we won't know if the network status changes after load, which is not ideal.

We can subscribe to offline and online events to listen to those specific changes.

window.addEventListener('offline', (e) => {
  console.log('offline');
});

window.addEventListener('online', (e) => {
  console.log('online');
});

Demo

Let's set up a quick demo to demonstrate this.
We'll be using a basic text element in the center of the screen, but you can, of course, style and implement this in whatever way you like.

Note: I'm using SCSS to style this

<div class="status">
  <div class="offline-msg">You're offline ๐Ÿ˜ข</div>
  <div class="online-msg">You're connected ๐Ÿ”—</div>
</div>

We are building this with the premise that the default is a connected state.

Let's add some basic styling to the mix.

.status {
  background: #efefef;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  div {
    padding: 1rem 2rem;
    font-size: 3rem;
    border-radius: 1rem;
    color: white;
    font-family: Roboto, 'Helvetica Neue', Arial, sans-serif;
  }
  .online-msg {
    background: green;
    display: block;
  }
  .offline-msg {
    background: red;
    display: none;
  }
}

This would, by default, only show the online message ever.
Let's add a condition that if the status element has an offline class, we switch the two divs.

.status {
  &.offline {
    .online-msg {
      display: none;
    }
    .offline-msg {
      display: block;
    }
  }
}

Now, if we add the offline class to the status div, we should see the offline message.

So how can we switch these based on the network status?

const status = document.querySelector('.status');
window.addEventListener('load', () => {
  const handleNetworkChange = () => {
    if (navigator.onLine) {
      status.classList.remove('offline');
    } else {
      status.classList.add('offline');
    }
  };

  window.addEventListener('online', handleNetworkChange);
  window.addEventListener('offline', handleNetworkChange);
});

Yep, this piece of code does the trick!
We initialized this on the first load and created a new function to check the navigator status.

Then we add event listeners to listen to the changes so we can act based on them.
On change, it can add or remove the class name.

If we try it out, it looks like this.

JavaScript online, offline detection

Or give it a try on this CodePen.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

...



๐Ÿ“Œ Detecting if the user is online with JavaScript


๐Ÿ“ˆ 31.96 Punkte

๐Ÿ“Œ Js-X-Ray - JavaScript And Node.js Open-Source SAST Scanner (A Static Analysis Of Detecting Most Common Malicious Patterns)


๐Ÿ“ˆ 22.04 Punkte

๐Ÿ“Œ IPinfo Privacy Detection API: Detecting methods used to mask a userโ€™s true IP address


๐Ÿ“ˆ 20.25 Punkte

๐Ÿ“Œ Detecting Malicious User Behavior Within and Across Applications


๐Ÿ“ˆ 20.25 Punkte

๐Ÿ“Œ Insights into insider threats: Detecting and monitoring abnormal user activity


๐Ÿ“ˆ 20.25 Punkte

๐Ÿ“Œ CVE-2023-6462 | SourceCodester User Registration and Login System 1.0 delete-user.php user cross site scripting


๐Ÿ“ˆ 17.38 Punkte

๐Ÿ“Œ CVE-2023-6464 | SourceCodester User Registration and Login System 1.0 /endpoint/add-user.php user sql injection


๐Ÿ“ˆ 17.38 Punkte

๐Ÿ“Œ V8 Internals for JavaScript Developers (Make Your JavaScript Faster)


๐Ÿ“ˆ 15.17 Punkte

๐Ÿ“Œ JavaScript: Dirty Parts of the Language (aka Maneuvering JavaScript Errors)


๐Ÿ“ˆ 15.17 Punkte

๐Ÿ“Œ JavaScript: Dirty Parts of the Language (aka Maneuvering JavaScript Errors)


๐Ÿ“ˆ 15.17 Punkte

๐Ÿ“Œ A Brief History of JavaScript by the Creator of JavaScript


๐Ÿ“ˆ 15.17 Punkte

๐Ÿ“Œ Why Is JavaScript So Fast? (aka JavaScript Engines - How Do They Even?)


๐Ÿ“ˆ 15.17 Punkte

๐Ÿ“Œ Dynamic Rendering for JavaScript web apps - JavaScript SEO


๐Ÿ“ˆ 15.17 Punkte

๐Ÿ“Œ Top 10 JavaScript Vulnerabilities (aka OWASP Top 10 for JavaScript Developers)


๐Ÿ“ˆ 15.17 Punkte

๐Ÿ“Œ HTML and Javascript Teacher - Code examples in HTML and Javascript.


๐Ÿ“ˆ 15.17 Punkte

๐Ÿ“Œ Javascript: Neue Facebook-Webseite setzt komplett auf Javascript


๐Ÿ“ˆ 15.17 Punkte

๐Ÿ“Œ Low CVE-2020-14063: Tc custom javascript project Tc custom javascript


๐Ÿ“ˆ 15.17 Punkte

๐Ÿ“Œ Demo: Data types in JavaScript [16 of 51] | Beginner's Series to JavaScript


๐Ÿ“ˆ 15.17 Punkte

๐Ÿ“Œ Demo: Objects in JavaScript [44 of 51] | Beginner's Series to JavaScript


๐Ÿ“ˆ 15.17 Punkte

๐Ÿ“Œ Running JavaScript: browser or server [3 of 51] | Beginner's Series to JavaScript


๐Ÿ“ˆ 15.17 Punkte

๐Ÿ“Œ Mozilla Firefox up to 13.0 JavaScript SandBox Utility javascript: URL memory corruption


๐Ÿ“ˆ 15.17 Punkte

๐Ÿ“Œ JavaScript-Experte Crockford: "Wir sollten nicht immer noch JavaScript nutzen"


๐Ÿ“ˆ 15.17 Punkte

๐Ÿ“Œ State of JavaScript: Entwicklung und Akzeptanz von JavaScript im Jahr 2022


๐Ÿ“ˆ 15.17 Punkte

๐Ÿ“Œ Javascript - OOP with Javascript


๐Ÿ“ˆ 15.17 Punkte

๐Ÿ“Œ JavaScript Course in Spanish โ€“ Learn JavaScript for Beginners


๐Ÿ“ˆ 15.17 Punkte

๐Ÿ“Œ JavaScript Game Tutorial โ€“ Build a Stick Hero Clone with HTML Canvas + JavaScript


๐Ÿ“ˆ 15.17 Punkte

๐Ÿ“Œ Introduction to JavaScript: What is JavaScript and Why is it Important for Web Development?


๐Ÿ“ˆ 15.17 Punkte

๐Ÿ“Œ Mastering JavaScript Screen Capture: Essential Tips for Taking Screenshots | JavaScript Projects


๐Ÿ“ˆ 15.17 Punkte

๐Ÿ“Œ How To Create a Calculator Using HTML CSS & JavaScript | Simple Calculator in JavaScript


๐Ÿ“ˆ 15.17 Punkte

๐Ÿ“Œ Day-10 of Learning JavaScript: Whip Up Weather Wonders: Craft Your Own City-Ready Weather App with JavaScript Magic!


๐Ÿ“ˆ 15.17 Punkte

๐Ÿ“Œ JavaScript Game Dev Tutorial โ€“ Build Gorillas with HTML Canvas + JavaScript


๐Ÿ“ˆ 15.17 Punkte

๐Ÿ“Œ JavaScript Tutorial Series: Introduction to JavaScript events.


๐Ÿ“ˆ 15.17 Punkte











matomo