---
title: "Offline and Online Events Research"
author: "Austin St Mary"
description: "Event research on offline and online events"
published: "2025-01-22"
---
---
# *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.
```JavaScript
window.addEventListener("offline", () => {
alert("You have lost connection to the internet!");
});
```
> - *Can also be done using window.onoffline!*
```JavaScript
window.onoffline = () => {
alert("You have lost connection to the internet!");
}
```
> - [OnOffline Events - w3schools.com](https://www.w3schools.com/jsref/event_onoffline.asp)
> - [Window: Offline Events - developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Web/API/Window/offline_event)
> ### *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!".
```JavaScript
window.addEventListener("online", () => {
alert("You are back online!");
});
```
> - *Can also be done using window.ononline!*
```JavaScript
window.ononline = () => {
alert("You are back online!");
}
```
> - [OnOnline Events - w3schools.com](https://www.w3schools.com/jsref/event_ononline.asp)
> - [Window: Online Events - developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Web/API/Window/online_event)
> ### *Overall, this is what it'll look like -*
```JavaScript
Document
```