How to show Firebase database connection error alert when viewing Ionic 3 app offline

Ionic Framework ionic-v3
1

Good day,

I’m working on an Ionic 3 app and for the sake of a good User Experience I would like to show an Alert Controller pop-up that asks the user to make sure that they are connected online when they are offline, perhaps you open the app whilst in ‘Flight Mode’ on an iPhone for example.

Here is my current code that is not working:

about.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import firebase from 'firebase';
import { LoadingController } from 'ionic-angular';
import { AlertController } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-about',
  templateUrl: 'about.html',
})
export class AboutPage {

  info = [];

  constructor(public navCtrl: NavController, public navParams: NavParams, 
    public loadingCtrl: LoadingController, private alertCtrl: AlertController) {

    let loader = this.loadingCtrl.create({
      content: "Loading Data",
      spinner: 'dots'
      });
      loader.present();

    firebase.database().ref('about').on('value', snapshot => {
      if (this.info = snapshot.val()) {
        loader.dismiss();
      } else {
        loader.dismiss();
        let alert = this.alertCtrl.create({
          title: 'Connection Failed!',
          message: 'Please make sure you are connected online and try again.',
          buttons: ['Ok']
          });
        alert.present();
      }

  });

  }

}
2

Maybe you should get your Network Status directly and not while requesting firebase.
Try this plugin https://ionicframework.com/docs/native/diagnostic/

3

https://firebase.google.com/docs/database/web/offline-capabilities#section-connection-state

4

Hi Aaron!

Thanks for your reply, so how can I achieve that with my own code above? I’ve tried the below but that doesn’t seem to work:

var connectedRef = firebase.database().ref(".info/connected");
    connectedRef.on("value", function(snap) {
    if (snap.val() === true) {
      loader.dismiss();
    } else {
      loader.dismiss();
        
        alert.present();
      }
    });
     
  }

I don’t know how to reference my ’about’ node any longer?

5

The code in the doc is officially written for old vanilla JS. Since you have Typescript and rxjs, I’d recommend you use AngularFire2, instead of the callback structure you quoted.