How Can I Detect Internet Connectivity in JavaScript?

Detecting Internet Connectivity in JavaScript

One of the essential aspects of developing web applications is determining whether the user has access to the internet, as this can significantly impact the application's functionality. In JavaScript, there are several methods to determine the availability of internet connectivity.

The most widely supported method involves using the window.navigator.onLine property. This property returns a Boolean value, true if the user is online and false if they are offline. Additionally, the online and offline window events are fired when the connectivity status changes, providing a more reactive approach.

To demonstrate the usage of window.navigator.onLine, consider the following code snippet:

console.log('Initially ' + (window.navigator.onLine ? 'on' : 'off') + 'line');

window.addEventListener('online', () => console.log('Became online'));
window.addEventListener('offline', () => console.log('Became offline'));

document.getElementById('statusCheck').addEventListener('click', () => console.log('window.navigator.onLine is ' + window.navigator.onLine));

In this snippet, we output an initial message indicating the current connectivity status and add event listeners to handle the online and offline events, which will trigger the corresponding messages in the console. Additionally, a button element is added to allow manual checks of the window.navigator.onLine property.

The above is the detailed content of How Can I Detect Internet Connectivity in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!