Trigger Angular app logic after Firebase notifications registration and device token

Question

I'm looking to implement this logic in my Angular 13 Ionic 6 app: Upon app start, obtain device token. With the device token, I do some logic (query the DB to see if this device is known or new) and based on the results - route to a page: Signup page for unknown devices, and some Home page for existing. Until either of these pages come up, I'll probably show a spinner or something.

I cannot reach a situation in which the appLauncher() function is called with a valid token. I tried by storing the token in local storage - but I couldn't async with the storage being populated. The last thing I tried (shown here) is using an @Output emitter - the appLauncher is never called. Here's what I have:

app.component.ts - Here I also tried nested Promises. I'm OK with the first promise resolved quickly if the token is already found in local storage, and only if this is first run - I will wait some time until this storage is populated. But calling appLauncher failed here too, and I believe it's not an elegant way to implement. I prefer reactive events running the show here.

import { Component } from '@angular/core';
import { AlertController, Platform } from '@ionic/angular';
import { Router } from '@angular/router';

import { SplashScreen } from '@capacitor/splash-screen';

import { FbNotificationsService } from './services/fb-notifications.service';
import { TigergraphService } from "./services/tigergraph.service";
import { get, set, remove } from './services/storage.service';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {
  deviceId: string;
  private _tgdb;
  constructor(
    private platform: Platform,
    private fbNotifications: FbNotificationsService,
    private route: Router,
    public tgdb: TigergraphService,
    public LoggerService: LoggerService,
    private alertCtrl: AlertController
  ) {
    this.initializeApp();
  }

 
  initializeApp() {
    this.platform.ready().then(async (source) => {
      console.log("platform source: " + source);
      // Trigger the push setup 
      this.fbNotifications.initPush();

      get('device-token').then(
        (res) => {
          if (res==null) {
            console.log('No token returned - need to wait for the promise to complete');
            
            return new Promise(function(resolve, reject) {
              setTimeout(function() {
                  // Fetch token again after a delay
                  get('device-token').then(
                    (res) => {
                      resolve(res);
                    }
                  )
                  
               }, 15000);
          });
          } else {
            console.log('app main just received a device token: ', res.value);
            this.appLauncher(res.value);
          }
      },
        (err) => {
          console.error('Error in receiving device token in app main: ', err);
      }).then(function(resToken2: any) {
        console.log('Obtained the device token on second attempt: ', resToken2);
        if (resToken2) {
          this.appLauncher(resToken2);
        }        
    });


      try {
        await SplashScreen.hide();
       } catch (err) {
        console.log('This is normal in a browser: ', err);
       }
    });
  }


  deviceTokenReceived(event) {
    console.log('Device Token received from emitter: ', event);
    if (event) {
      this.appLauncher(event);
    }
  }

  //Based on deviceId and if existing user or not - route
  appLauncher(deviceId: string) {
    console.log('Entered appLauncher: ', deviceId);
    this._tgdb.runQuery("getPersonByDeviceId", {"DeviceId": deviceId}).subscribe(
      res => {
        if(res == null){
          //No person found in DB - need registration routing
          console.log('No person found with DeviceID. Routing to signup');
          this.route.navigate(['/signup']); 
          
        } else {
          //person exists in db
          console.log('TG Query Result PErson by DeviceID: ' + JSON.stringify(res) + ' firstName: ' + res[0].vPerson[0].attributes.firstName);
          set('curr-person', res[0].vPerson[0].attributes); //Store locally for use throughout the app
          console.log('curr-person just saved');
          //Rout based on user type
          
        }
      },
      err => {
        console.log('TG Query Error: ' + err.description);
        //Route to some error page?
        this.showAlert("Network Error", "Ooooops. I can't find any Internet at this time");
      }
  );
  }
}

app.component.html - only used to capture the emitted @Output variable event - but never really works:

<ion-app>
  <ion-item (deviceId)="deviceTokenReceived($event)"></ion-item>
  <ion-router-outlet></ion-router-outlet>
</ion-app>

The Firebase service:

import { EventEmitter, Injectable, Output } from '@angular/core';
import {ActionPerformed, PushNotifications, PushNotificationSchema, Token} from '@capacitor/push-notifications';
import {  Capacitor } from '@capacitor/core';

import { get, set, remove } from './storage.service';

@Injectable({
  providedIn: 'root'
})
export class FbNotificationsService {

  @Output('deviceId') deviceId = new EventEmitter<string>();

  constructor() {}
 
  initPush() {
    if (Capacitor.getPlatform() !== 'web') {
      this.registerPush()
    } else {
      
    }
  }
 
  private registerPush() {
    PushNotifications.requestPermissions().then((permission) => {
      if (permission.receive === 'granted') {
        // Register with Apple / Google to receive push via APNS/FCM
        console.log('FB Permission granted');
        PushNotifications.register(); //Registers app to receive notifications
      } else {
        // No permission for push granted by user on iOS
        console.log('FB NO permissions granted');
      }
    });
 
    PushNotifications.addListener(
      'registration',
      (token: Token) => {
        console.log('My token: ' + JSON.stringify(token));
        //This is the device token.
        this.deviceId.emit(token.value);
        set('device-token', token.value).then( () => {
          remove('curr-person'); //clear local store of current person in app init
        }); //to be picked up in registration
        
      });
 
    PushNotifications.addListener('registrationError', (error: any) => {
      console.log('Error: ' + JSON.stringify(error));
      //Alert that the registration of this device for notifications failed
    });
 
  }
}

The Storage service is skipped here for brevity, it's just uses the Storage service from @capacitor/storage to get/set the token values.

Please, what's the right approach for this to work? Thanks!

Answer 1

thanks for your reporting I suggest you use BehaviorSubject to solve the issue. try this.

1. inside FBNotificationService.ts file

onFCMTokenChanged: BehaviorSubject<string> = new BehaviorSubject("");
PushNotifications.addListener('registration', (token: Token) => {
   console.log('My token: ' + JSON.stringify(token));
   //This is the device token.
   this.onFCMTokenChanged.next(token);
});

2. in app.component.ts file inside construtor() function

this.fbNotifications.onFCMTokenChanged.pipe(takeUntil(this._unsubscribeAll)).subscribe(token => {
   if ((token)&&(!this.appLaunched)) {
      this.appLaunched = true;
      this.appLauncher(token);
   }
});