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!
CodePudding user response：
thanks for your reporting I suggest you use BehaviorSubject to solve the issue. try this.
- 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);
});
- 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);
}
});