Not Receiving Twilio Chat Push Notifications (Ionic & Firebase)

Question

I am having an issue I've been trying to debug for few days and lost hope. I have an Ionic mobile app with a Firebase backend. I am trying to write a Twilio chat. I'm trying to get it to work for iOS for now. This is what I've done so far:

1. I created an APN auth key in the Apple developer account. (I've also tested this using the APN cert)
2. I've added the APN auth key to the Firebase console. (I've also tested this using the APN cert)
3. I tested sending a push notification from the Firebase console and I was able to get it successfully. no problems so far.
4. I then added the FCM secret key to Twilio.
5. Configured my Ionic app to get the FCM token using the Ionic Firebase sdk (https://github.com/dpa99c/cordova-plugin-firebasex). After getting the FCM token, I pass the FCM token to Twilio.
6. Configured the Ionic app to handle the notification when the notification is received.
7. Tried sending a chat message. Notification is not received. When I open the app, I can see that the Firebase SDK logging the notification correctly.

Why am I not receiving the notification when the app is not open? The logic is clearly working because the Firebase SDK does receive the notification when I open the app. It also doesn't seem to be a problem with any app settings because I was able to get the notification when the app is in the background when sending the notification directly from Firebase.

This is my backend code that generates the Twilio access token:

    // Twilio credentials and ids are defined here...

    const chatGrant = new ChatGrant({
        serviceSid: twilioServiceSid,
        pushCredentialSid: credentialSid
    });

    const token = new AccessToken(twilioAccountSid, twilioApiKey, twilioApiSecret, {
        identity: uid
    });

    token.addGrant(chatGrant);
    return token.toJwt();

This is a snippet from my Ionic code that gets the FCM token from the device and passes it to Twilio

async getToken(): Promise<string> {

  let token: string;

  if (this.platform.is('ios')) {
    const hasPermission = await this.firebaseNative.hasPermission();

    if (!hasPermission) {
      try {
        await this.firebaseNative.grantPermission();
      } catch (e) {
        console.error('Error granting permission', e);
        throw e;
      }
    }

    try {
      token = await this.firebaseNative.getToken();
    } catch (e) {
      console.error('Error getting FCM token', e);
      throw e;
    }

  }

  return token;
}

setPushRegistrationId(token: string) {
    return this.twilioClient.setPushRegistrationId('fcm', token);
}

getToken().then(async (token) => {
    console.log('fcm token: ' + token);
    setPushRegistrationId(token)
        .then(() => console.log('Added registration token'))
        .catch(e => console.error('Error registering fcm token', e));

}).catch(e => {
    console.error('Error getting FCM token', e);
    console.error(e);
});

Please help! Thank you 😊

Answer 1

I recently discovered that Twilio sends only data pushes for FCM. That means that you need to handle background pushes and decide either to show them locally or not.