online

16 March, 2023

Contributors

Milsaware

@milsaware

About

The online event is fired when the browser has re-established a connection to the internet after being offline. This event is triggered automatically by the browser when it detects that the internet connection has been restored.

The online event is useful for applications that require an internet connection to function properly, as it allows the application to respond to changes in the network state and update its behaviour accordingly. For example, an online store may want to display a message to users when they are offline, letting them know that certain features may be unavailable. Once the user goes back online, the online event can be used to remove this message and restore full functionality to the app.

Event listener

Here's an example of adding an event listener for online events:

HTML

<p>Check your network status below:</p>
<p id="network-status">Loading network status...</p>

JavaScript

const statusElement = document.getElementById('network-status');

// Add an event listener to detect changes in network status
window.addEventListener('offline', function() {
    statusElement.textContent = 'You are now offline.';
});

window.addEventListener('online', function() {
    statusElement.textContent = 'You are now online.';
});

Here, we add two event listeners to the window object: one for the offline event and one for the online event. When the offline event is triggered (e.g., when the device loses its internet connection), we update the text content of the #network-status element to indicate that the user is now offline. Similarly, when the online event is triggered (e.g., when the device regains internet connectivity), we update the text content to indicate that the user is now online.

Property

There is also an ononline property that can be used to assign an event handler function to the online event. The ononline property is a property of the window object and can be set to a function that will be called when the browser goes online:

window.ononline = function() {
    console.log("You are now online");
};

Here, we're assigning an anonymous function to the ononline property of the window object. When the browser goes online, the function will be called, and the message "You are now online" will be logged to the console.

Inline

The ononline property cannot be used inline in HTML.

Note that inline event handlers in HTML (such as onclick) are not recommended because they mix HTML and JavaScript code, making it harder to maintain and debug. Additionally, using inline event handlers makes it difficult to add or remove event handlers dynamically in response to user interactions or other events.

Programmatic trigger

There is no online() method that can be used to trigger the online event programmatically. Instead, you can use the dispatchEvent() method to trigger the online event on an element, such as the window object:

const onlineEvent = new Event('online');
window.dispatchEvent(onlineEvent);

Here, we're creating a new online event using the Event constructor, and then dispatching it on the window object using the dispatchEvent() method. This will trigger any event listeners that have been added to the window object for the online event.

However, it's important to use this feature judiciously, as triggering events manually can lead to unexpected behaviour and can make your code harder to maintain and debug. It's generally better to let events be triggered naturally by user interactions or other external factors, rather than trying to simulate them programmatically.

javascript