Ionic 5 app with Capacitor push notification and FCM plugins.
import { FCM } from '@capacitor-community/fcm';
import {
ActionPerformed,
PushNotificationSchema,
PushNotifications,
Token,
} from '@capacitor/push-notifications';
Why do they generate different tokens??
For Capacitor/PushNotifications, the following generates a token
PushNotifications.addListener('registration',
async (token: Token) => {
console.log('token: ' + token.value);
}
).catch(e=>{alert('reqPerm'+e)});
While for FCM, the following generates a different token
FCM.getToken()
.then(async (r) => {
console.log(`token saved ${r.token}`)
})
.catch((err) => console.warn('error saving token', err));
The FCM token works on iOS (iPhone receives notifications), but registering it on Android, it says something about invalid token registered. So I had to use the token from PushNotifications.addListener for Android, but when it receives a notification, the app crashes.
I made sure that the google-services.json file is in the android/apps folder.
What gives?? Any suggestions?
Use this instead:
it’s weird.
Try this code, maybe it can help (it works correctly both with app killed or in background)
import { Injectable } from '@angular/core';
import {
ActionPerformed,
PushNotificationSchema,
PushNotifications,
Token,
} from '@capacitor/push-notifications';
import { Device } from '@capacitor/device';
import { AlertController } from '@ionic/angular';
import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';
@Injectable({
providedIn: 'root'
})
export class PushNotificatio…
This works both for ios and android.
Thanks, I tried it but still crashed when I received a notification.
I test by sending a test message from Firebase’s dashboard (Engage->Messaging->New campaign->Notifications).
Here’s my complete app.component.ts code for reference:
import { Component } from '@angular/core';
import { Platform } from '@ionic/angular';
import { SplashScreen } from '@capacitor/splash-screen';
import { StatusBar, Style } from '@capacitor/status-bar';
import { StorageService } from '@services/storage.service';
import { FCM } from '@capacitor-community/fcm';
import { Device } from '@capacitor/device';
import {
ActionPerformed,
PushNotificationSchema,
PushNotifications,
Token,
} from '@capacitor/push-notifications';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.scss']
})
export class AppComponent {
pushNotificationToken: any; // I save the token to database because i need it in my backend code.
constructor( private platform: Platform, private storage: StorageService ) {
this.initializeApp();
}
initializeApp() {
this.platform.ready().then(async () => {
await SplashScreen.hide();
Device.getInfo().then(res => {
if (res.platform !== 'web') {
this.registerPush();
}
});
});
}
// solution
private registerPush() {
PushNotifications.requestPermissions().then((permission) => {
if (permission.receive) {
// Register with Apple / Google to receive push via APNS/FCM
PushNotifications.register();
} else {
// No permission for push granted
}
});
PushNotifications.addListener(
'registration',
(token: Token) => {
console.log('My token: ' + JSON.stringify(token));
this.pushNotificationToken = JSON.stringify(token.value);
}
);
PushNotifications.addListener('registrationError', (error: any) => {
console.log('Error: ' + JSON.stringify(error));
});
PushNotifications.addListener(
'pushNotificationReceived',
async (notification: PushNotificationSchema) => {
console.log(notification);
alert(notification.body)
}
);
PushNotifications.addListener(
'pushNotificationActionPerformed',
async (notification: ActionPerformed) => {
const data = notification.notification.data;
console.log('Action performed: ' + JSON.stringify(notification.notification));
}
);
}
}
Thanks.
Have you tried to replace all your code with my example? Have you put the json generated by firebase inside android folder? In your example i still ser the fcm import