Banner notification on background firebase

@eramos-dve wrote:

Hey !

I have troubles using Firebase plugin and Ionic 4.
Well, I just want to display a banner notification when user receive a notification and the app is running in background (or is kill).

Actually, I get the small icon in the top bar, and the notification is display in the notifications’s center.
But I want to display it like a banner.

So this is my code : app.component.ts :

this.platform.ready().then(() => {
    if (this.platform.is('cordova')) {
        this.notifications.initPushNotification();
    }
});

push-notification.component.ts :

import { Injectable } from '@angular/core';
import { environment } from 'src/environments/environment';
import { UserService } from 'src/app/user/user.service';
import { User } from '../interfaces/user';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Firebase } from '@ionic-native/firebase/ngx';
import { AngularFirestore } from 'angularfire2/firestore';
import { ToastController, Platform } from '@ionic/angular';
import { FirebaseApp } from 'angularfire2';
import { LocalNotifications } from '@ionic-native/local-notifications/ngx';


@Injectable({
  providedIn: 'root'
})

export class PushNotificationService {

  token: string;

  constructor(
    private http: HttpClient,
    private users: UserService,
    private toastController: ToastController,
    private firebase: Firebase,
    private afs: AngularFirestore,
    private platform: Platform,
    private app: FirebaseApp,
    private localNotifications: LocalNotifications
  ) { }

  initPushNotification() {
    console.log('initPushNotification');

    if (this.platform.is('cordova')) {
      // Initialize push notification feature
      this.platform.is('ios') ? this.initializeFireBaseIos() : this.initializeFireBaseAndroid();
    } else {
      console.log('Push notifications are not enabled since this is not a real device');
    }
  }

  initializeFireBaseAndroid(): Promise<any> {
    return this.firebase.getToken()
      .then(token => {
        console.log(`The token is ${token}`);
        this.token = token;
        this.subscribeToPushNotificationEvents();
      })
      .catch(error => console.error('Error getting token :', error));
  }

  initializeFireBaseIos(): Promise<any> {
    return this.firebase.grantPermission()
      .catch(error => console.error('Error getting permission', error))
      .then(() => {
        this.firebase.getToken()
          .catch(error => console.error('Error getting token', error))
          .then(token => {
            console.log(`The token is ${token}`);
            this.subscribeToPushNotificationEvents();
          });
      });
  }

  subscribeToPushNotificationEvents() {
    // Handle token refresh
    this.firebase.onTokenRefresh().subscribe(
      token => {
        console.log(`The new token is ${token}`);
        this.saveToken(token);
      },
      error => console.error('Error refreshing token', error));

    // Handle incoming notifications
    this.firebase.onNotificationOpen()
    .subscribe(
      async notification => {
        !notification.tap
          ? console.log('The user was using the app when the notification arrived...')
          : console.log('The app was closed when the notification arrived...');
        console.log('Notification received :', notification);

        this.localNotifications.schedule({
          title: notification.title,
          text: notification.body,
          foreground: true,
        });
      },
      error => {
        console.error('Error getting the notification', error);
      });
  }

  private saveToken(token: any): Promise<any> {
    // Send the token to the server
    this.token = token;
    this.saveTokenToFirestore(token);
    return Promise.resolve(true);
  }

  private saveTokenToFirestore(token: string): Promise<void> {
    const devicesRef = this.afs.collection('devices');
    const docData = {
      token,
      userId: this.users.get()
    };
    return devicesRef.doc(token).set(docData);
  }

  displayBannerNotification(message: string, interlocutor: User) {
    console.log('sendBannerNotification ----------------------------------------');
    const options = new HttpHeaders()
      .set('Content-Type', 'application/json')
      .set('Authorization', `key=${environment.firebase.serverKey}`);

    const body = {
      'notification': {
        'title': interlocutor.nickname,
        'body': message,
        'click_action': 'FCM_PLUGIN_ACTIVITY'
      },
      'to': 'DEVICE TOKEN'
    };

    this.http.post('https://fcm.googleapis.com/fcm/send', JSON.stringify(body), { headers: options })
      .subscribe(data => { console.log('Message envoyé ! ', data); });
  }
}

The fact is that onNotificationOpened is not trigger when the app run in background.

Have I missed something ?

Posts: 1

Participants: 1

Read full topic