Firebase cloud messaging notifications received but not popping up with capacitor/push-notifications - push-notification

Question

In my Angular 13 Ionic 6 app I'm using the capacitor/push-notifications with FireBase,
In my service:
import { EventEmitter, Injectable, Output } from '#angular/core';
import {ActionPerformed, PushNotifications, PushNotificationSchema, Token} from '#capacitor/push-notifications';
import { Capacitor } from '#capacitor/core';
import { Dialogs, DialogType } from '../Utilities/dialogs';
import { get, set, remove } from './storage.service';
import { BehaviorSubject } from 'rxjs';
import { App } from '#capacitor/app';
//https://devdactic.com/push-notifications-ionic-capacitor/
#Injectable({
providedIn: 'root'
})
export class FbNotificationsService {
onFCMTokenChanged: BehaviorSubject<string> = new BehaviorSubject('');
tokenProcessed: boolean = false;
constructor(private dialogs: Dialogs) {
}
initPush() {
if (Capacitor.getPlatform() !== 'web') {
this.registerPush()
} else {
console.log('Web platform detected');
this.onFCMTokenChanged.next('web-platform');
}
}
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) => {
if ((token)&&(!this.tokenProcessed)) {
this.tokenProcessed = true;
console.log('My token: ' + JSON.stringify(token));
this.onFCMTokenChanged.next(token.value);
set('device-token', token.value);
}
});
PushNotifications.addListener('registrationError', (error: any) => {
console.log('Registration Error: ' + JSON.stringify(error));
this.dialogs.dialogClose('Network Error','The network signal is not sufficient at this time. Please improve connection and try again');
App.exitApp();
});
PushNotifications.addListener(
'pushNotificationReceived',
async (notification: PushNotificationSchema) => {
console.log('Push received: ' + JSON.stringify(notification));
alert('Push received: ' + JSON.stringify(notification));
//What to do next. Notification received on the device.
}
);
PushNotifications.addListener(
'pushNotificationActionPerformed',
async (notification: ActionPerformed) => {
const data = notification.notification.data;
console.log('Action performed: ' + JSON.stringify(notification.notification));
alert('Push action performed: ' + JSON.stringify(notification));
//What to do next. data holds all payload fields of the notification object
}
);
}
}
The basic guide I followed is here.
When I send a test message from the Firebase console, the alert statement I placed is poping up, meaning, the message is received by the app:
alert('Push received: ' + JSON.stringify(notification)); //WORKING
HOWEVER, there is no notification message popping up by the OS for the user to see. I do get notifications all the time from Whatapp, Emails, etc, and the "Do not disturb" setting is turned off.
This is experienced with TWO Android devices: Xiaomi Rednote 8 and Samsung Galaxy A32.
Am I missing something?

Answer 1

I had a similar problem before, maybe the following information could help you:
When your Android app is in the foreground, PushNotifications won't appear on the screen.
If you absolutely want a visual display of the notification, you can create a local notification when the push notification is received.