Listen to FCM push notification delivery with Expo react native (android)

Question

I am facing an issue extremely similar to this one.

• I am using Expo (SDK38) with the Managed Workflow
• I am creating standalone APK builds with Turtle CLI on CI
• I have an FCM project working almost perfectly with the standalone app. By almost perfectly I mean:
  • That I am successfully obtaining the device FCM token with the following code:

    import { Notifications } from 'expo';
    
    await Notifications.getDevicePushTokenAsync(); // Gives the token successfully
    

  • That I am sending a push notification when running the following NodeJS script, but:

    const admin = require('firebase-admin');
    
    admin.initializeApp({
        credential: require('./my-credentials.json'),
        databaseURL: 'https://MY_URL_HERE'
    });
    
    admin.messaging.send({
        notification: { title: 'Foo', body: 'Bar' },
        android: { ttl: 86400 },
        token: 'THE_FCM_TOKEN_HERE'
    });
    

    • [Minor issue 1] The device does not show any notification if the app is in foreground;
    • [Minor issue 2] The device shows the notification duplicated if the app is not in foreground.

I've mentioned the minor issues above for completeness, but the main problem I am facing now is that my app just won't notice that the notification arrived. The listener does not fire.

I tried both the Legacy Notifications Module and the New Notifications Module:

// Attempt using Legacy Notifications
// https://docs.expo.io/versions/v38.0.0/sdk/legacy-notifications/
import { Notifications as LegacyNotificationsModule } from 'expo';

// Attempt using New Notifications Module
// https://docs.expo.io/versions/v38.0.0/sdk/notifications/
import * as NewNotificationsModule from 'expo-notifications';

LegacyNotificationsModule.addListener(() => {
    // Make any UI change just for we to see it happening
});

NewNotificationsModule.addNotificationReceivedListener(() => {
    // Make any UI change just for we to see it happening
});

// I also tried commenting and uncommenting the code below
NewNotificationsModule.setNotificationHandler({
    handleNotification: async () => ({
        shouldShowAlert: true,
        shouldPlaySound: false,
        shouldSetBadge: false,
    }),
});

Recall that, like in the similar issue I linked above, I am not using Expo notification tokens (of the form ExponentPushToken[xxxxxx]). I am using standard FCM tokens obtained via Notifications.getDevicePushTokenAsync().

How can I make this work?

Answer 1

I finally figured it out.

I've sent a PR to Expo to improve the documentation on this.

In short, quoting my comment on GitHub:

For the app to properly react to the notification, it must come with an extra special field called experienceId. I couldn't find a way to send this field through Firebase Console interface for sending test messages; instead I made it work performing a HTTP POST call with:

• Headers:
  • Authorization: key=${FIREBASE_SERVER_KEY_TOKEN} (obtained in my Firebase project Settings > Cloud Messaging)
  • Content-Type: application/json
• Body:

  {
      "to": "<DEVICE_PUSH_NOTIFICATION_TOKEN>",
      "priority": "normal",
      "data": {
          "experienceId": "@anonymous/my-project-slug",
          "title": "Hello",
          "message": "World"
      }
  }
  

A key information that wasn't documented is that, for people like me that do not have an expo account (and are building everything independently of expo), the experience ID should start with @anonymous. Full credits for @awinograd in GitHub for figuring this out.