Online/offline event observable with RxJS (see comments below for a better, more up-to-date way of doing this)

rx-online-offline.js

const { Observable } = require('rxjs/Observable');
require('rxjs/add/observable/fromEvent');
require('rxjs/add/operator/map');
require('rxjs/add/observable/merge');

function createOnline$() {
  //merge several events into one
  return Observable.merge(
    //use .map() to transform the returned Event type into a true/false value
  	Observable.fromEvent(window, 'offline').map(() => false),
  	Observable.fromEvent(window, 'online').map(() => true),
    //start the stream with the current online status
  	Observable.create(sub => {
  		sub.next(navigator.onLine);
  		sub.complete(); //this one only emits once, so now we end it
  	})
  );
}

// implement it
const onlineSub = createOnline$().subscribe(isOnline => console.log(isOnline));
onlineSub.unsubscribe();

Thanks for the Gist! This was exactly what I was looking for. As of RxJS 6.0 the syntax seems to have changed slightly though. I modified it as shown below and it seems to work fine for me.

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

function createOnline$() {
  return merge(
    fromEvent(window, 'offline').pipe(map(() => false)),
    fromEvent(window, 'online').pipe(map(() => true)),
    Observable.create(sub => {
      sub.next(navigator.onLine);
      sub.complete();
    }));
  }

could you write unit test for this?

I think you could also use of(navigator.onLine) for initial status event.

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

I never saw any of these comments, sorry 😬.

@plevold Nice, thanks! I haven't kept up with RxJS so I appreciate that 👍

combineLatest([
  fromEvent(window, 'online').pipe(startWith(null)),
  fromEvent(window, 'offline').pipe(startWith(null)),
]).pipe(
  map(() => navigator.onLine),
  shareReplay(),
);

Lightest version, that always return navigator.onLine value:

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

Any samples for unit testing in angular, how do we trigger these events during testing.

@thecyberd3m0n did you manage to get unit testing for this

@kumar2live I don't know if you're still looking for a way to test this but you don't have to worry about online and offline behaviors, that's part of the browser, you only need to test your responses to different responses of that observable (i.e. Create a mock observable that emits true or false)

Thanks for responding, you are correct! I managed to use different RXJS events to handle this