Offline and Online Events Research

Author: Austin St Mary
Published on: 2025-01-22

Event research on offline and online events

Offline and Online Events Research

By Austin St Mary - January 22, 2025

Offline and Online Events

Offline and Online events listen for when the user loses or gains internet connectivity. Once the user loses or gains connectivity, the listener will return with something. The importance behind using these events is to notify users when they lose connectivity to your website. This can help prevent loss of data if the user is doing something that may have to be saved to the web server, such as submitting a form or writing an email.

Offline Event Explanation

When the user goes offline, the event listener will notice and trigger the event listener that is provided. In this case below when the user goes offline, the event listener will activate, returning with an alert saying "You have lost connection to the internet!". It doesn't have to be an alert though, the output can really be anything. In this case it makes the most sense to alert the user that they have lost internet connection.

window.addEventListener("offline", () => {
  alert("You have lost connection to the internet!");
});
  • Can also be done using window.onoffline!
window.onoffline = () => {
  alert("You have lost connection to the internet!");
}

Online Event Explanation

When the user goes online, the event listener will notice and trigger much like the offline event listener. In this example below when the user goes offline, the event listener will return with the alert saying "You are online!".

window.addEventListener("online", () => {
  alert("You are back online!");
});
  • Can also be done using window.ononline!
window.ononline = () => {
  alert("You are back online!");
}

Overall, this is what it'll look like -

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>

    // Checks if the user goes offline.
    window.addEventListener("offline", () => {
      alert("You have lost connection to the internet!");
    });
      // OR
    // window.onoffline = () => {
    //   alert("You have lost connection to the internet!");
    // }

    // Checks if the user goes online.
    window.addEventListener("online", () => {
      alert("You are back online!");
    });
      // OR
    // window.ononline = () => {
    //   alert("You are back online!");
    // }
    
  </script>
</head>
<body>
  
</body>
</html>

© 2025 Austin St Mary