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 ?
