Push notification trouble

Ionic Framework Ionic Vue
1

I have a Ionic Vue app that I want to get push notifications working on. So far I have iOS working fine and I get a FCM token and have successfully targeted notifications.

Android on the other hand doesn’t work. I can get the FCM token but when I try to push to it the notification never comes in. So I think I’m close. What am I missing?

UPDATE: Checking console.log and it says:

FirebaseMessagingError: The registration token is not a valid FCM registration token

{
code: 'messaging/invalid-argument',
message: 'The registration token is not a valid FCM registration token'
},
codePrefix: 'messaging'
}

But, but… that comes from this line!

await PushNotifications.requestPermissions();
await PushNotifications.register();
const pushToken = await FCM.getToken();
2

Are you using the official Push Notification plugin?

If so, you should be using the listener.

await PushNotifications.addListener('registration',
    (token: Token) => {
        // Do stuff with token.value
    }
)

This is also a great guide if you haven’t seen it yet.

3

I’ve very confused between the Push Notification plugin and the FCM plugin. All I know is I want native push notifications through the Firebase messaging system so I figured getting the FCM token was what I want with FCM.getToken() vs that which seems like the what? APN?

4

Ok I switched from FCM.getToken() to the code you suggested above. That results in me getting a token which seems valid when I try to send via Firebase messaging but my app crashes! lol

5

In my project I am just using the Push Notification plugin. The listener gives you the FCM token.

For iOS, you do need to edit your AppDelegate.swift file adding the following code. Otherwise by default the listener gives you the APN instead of the FCM token which for me didn’t work (Firebase didn’t recognize the APN).

func application(_ application: UIApplication, didRegisterForRemoteNotificationsWithDeviceToken deviceToken: Data) {
    Messaging.messaging().apnsToken = deviceToken
    Messaging.messaging().token(completion: { (token, error) in
        if let error = error {
            NotificationCenter.default.post(name: .capacitorDidFailToRegisterForRemoteNotifications, object: error)
        } else if let token = token {
            NotificationCenter.default.post(name: .capacitorDidRegisterForRemoteNotifications, object: token)
        }
    })
}

This is referenced here.

1 Like
6

Not sure on the crashing…lol. I’d be glad to share my code if need be. I am also using Vue.

7

iOS isn’t an issue for me as I’ve had that working for weeks now (without modification of AppDelegate.swift either). I am just trying to get Android working.

8

If you don’t mind sharing the bits that matter. It’s funny, I am getting messages from Firebase Functions that the message was sent:

Successfully sent message: projects/jetfoil-mobile-dev/messages/0:1640039314900193%72cb085572cb0855

vs this:

FirebaseMessagingError: The registration token is not a valid FCM registration token

So I feel like I’m on the right track. And if the app is running and I wait a minute and then send a test push the app crashes immediately. So I know it’s TRYING to handle the incoming push. Funny thing is I didn’t do any pushNotificationReceived or pushNotificationActionPerformed listeners yet! This is my code now:

PushNotifications.requestPermissions().then(result => {
     if (result.receive === 'granted') {
          PushNotifications.register();
     }
});

await PushNotifications.addListener('registration', (token: any) => {
     setPushToken(token.value);
});
9

On the simplest level, that is what I am doing. I add the listeners in my main.ts/js file before createApp.

Not sure what would cause it to crash. Might need to look at the errors in Android Studio. Assuming you’ve added the google-services.json auth file. You also don’t need to add any dependencies to the Android project as Capacitor automatically includes firebase-messaging.

10

I put my code in the App.vue file as main.ts fires before I have connectivity to Firebase which is where I store their token. Do you store the token in the db? Perhaps I’m just doing it all wrong.

11

Ok I go it working by removing the android folder, re-creating it and comparing within git to make sure my customizations were still intact. Redeployed and it worked!

1 Like