Get internet connection status in Javascript

Question

I want to test if the user has an active internet connection.

I know we can do it with navigator.Online, but I don't think it works when the user has a limited WiFi network.

I need to show a popup if the user has been disconnected/has a limited WiFi network

Does this answer your question? [Detect the Internet connection is offline?](https://stackoverflow.com/questions/189430/detect-the-internet-connection-is-offline) — Alwaysblue, Nov 01 '19 at 13:55

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

0

XHR Requests

Try making an XHR request to the same website itself (or maybe even a couple of XHR requests), and check if it fails, and if it does, you can safely conclude that the user does not have an active internet connection.

edited Jun 20 '20 at 09:12

Community

1
1

answered Nov 01 '19 at 13:59

Vishnu S.

141
1
2
8

score 0 · Answer 2 · answered Nov 01 '19 at 13:59

You can use this one npm package ng-connection-service

after that you can easily use next code into your root app component:

constructor (private connectionService: ConnectionService) {
        this.connectionService.monitor().subscribe((isConnected: boolean) => {
            if (!isConnected) {
                alert('oops you have no Internet connection');
            }
        });
}

Melchia · Answer 3 · 2019-11-01T14:30:54.413

you can create a function like this :

const checkConnection = () => fetch('https://google.com')
        .then(response => {
            if (!response.ok) {
                throw new Error('HTTP status ' + response.status);
            }
            return response;
        })
        .then(response => 'online')
        .catch(error => 'offline');

And use it like this:

const isOnline = await checkConnection() === 'online';

score 0 · Answer 4 · answered Nov 27 '19 at 20:32

There's a native way that's supported almost everywhere:

const isOnline = ('onLine' in navigator) ? navigator.onLine : true

And a pair of event listeners:

window.addEventListener('online', () => {
    isOnline = true
})

window.addEventListener('offline', () => {
    isOnline = false
})

Get internet connection status in Javascript

4 Answers4

XHR Requests