Check web app is online or offline

Question

Here it is a code to check application is online or offline :

 this.online$ = Observable.merge(
            Observable.of(navigator.onLine),
            Observable.fromEvent(window, 'online').map(() => true),
            Observable.fromEvent(window, 'offline').map(() => false)
        )
        this.online$.subscribe(isOnline=>{
            if(isOnline){
              console.log(isOnline);
            }else{
              console.log("you are offline");
              console.log(isOnline);
            }
        });

But it always return a true it means they are online but it's wrong result. I turned off system internet unlikely they return same result (true).

Possible duplicate of [How to check whether user has internet connection or not in Angular2?](http://stackoverflow.com/questions/39571231/how-to-check-whether-user-has-internet-connection-or-not-in-angular2) — Pardeep Jain, Mar 21 '17 at 12:26
You can use the shorthand `.mapTo(true)` instead of `.map(() => true)`. You don't need to and it requires another import, but it's a nice shorthand. — Aluan Haddad, Mar 21 '17 at 14:34

score 6 · Answer 1 · edited Jul 11 '18 at 10:27

6

import { fromEvent, merge, of } from 'rxjs';
import { mapTo } from 'rxjs/operators';


this.online$ = merge(
       of(navigator.onLine),
       fromEvent(window, 'online').pipe(mapTo(true)),
       fromEvent(window, 'offline').pipe(mapTo(false))
    );

this.online$.subscribe((isOnline) =>{
  if(isOnline) {
    console.log(isOnline);
    } else {
      console.log("you are offline");
      console.log(isOnline);
    }
});

This will emit true or false based on the browsers online status.

edited Jul 11 '18 at 10:27

Arjun Yelamanchili

577
1
3
16

answered Feb 23 '18 at 12:42

Ketan Chaudhari

556
6
15

Nice answer. A note: I would highly recommend to surround "of(navigator.onLine)" with a RxJS "defer" ("defer(() => of(navigator.onLine))"). You never know when the subscription happens (perhaps the online status has already changed in time) – Pierre Chavaroche Mar 30 '23 at 11:06

score 3 · Answer 2 · answered Feb 23 '18 at 14:10

I have the following code in my app:

// Adjust the imports if you use RxJS < 6.0.0-alpha.3.
import { BehaviorSubject, fromEvent } from 'rxjs';

/**
 * Whether the browser indicates that the device is online.
 */
export const onlineSubject = new BehaviorSubject<boolean>(true);

const handleOnlineChange = (online: boolean) => {
  if (online !== onlineSubject.getValue()) {
    onlineSubject.next(online);
  }
};

handleOnlineChange(navigator.onLine);

fromEvent(window, 'online').subscribe(() => handleOnlineChange(true));
fromEvent(window, 'offline').subscribe(() => handleOnlineChange(false));

Hope this does the trick for you.

score 2 · Answer 3 · answered Feb 28 '20 at 00:56

Lightest version, that always return navigator.onLine value:

import { fromEvent, merge, of } from 'rxjs';
import { map } from 'rxjs/operators';

isOffline$ = merge(
  of(null),
  fromEvent(window, 'online'),
  fromEvent(window, 'offline')
).pipe(map(() => !navigator.onLine));

Check web app is online or offline

3 Answers3

Linked