React-native-notifee: Interactions with FCM and pressAction

[beweinreich]

Hi— I recently purchase Notifee to handle interactions with Push Notifications from Firebase Cloud Messaging.

The high-level overview for what I'm trying to do is fairly simple

• Send push notification from our server
• Allow user to click on "Reply" in the push notification, and answer it in the push notification

My hope (and maybe I've misread) is that you can send a push notification via FCM, and notifee.onBackgroundEvent will pick it up with the EventType.DELIVERED and I can detect a pressAction if they click one.

notifee.onBackgroundEvent(async ({ type, detail }) => {
  // fired when the app receives a message in the background
  const { notification, pressAction, input } = detail;

  console.log("notifee background event --> ", notification, pressAction);
}

notifee.createChannel({
        id: "messaging",
        name: "Messaging",
        description: "New messages.",
        lights: false,
        vibration: true,
        importance: AndroidImportance.DEFAULT,
});

I'm sending the push notification via FCM, so I've added in:

messaging().setBackgroundMessageHandler(onMessageReceived);

function onMessageReceived(message) {
  console.log("received message in background");
  let notification = message.notification;
  notifee.displayNotification(message.notification);
}

I receive the push notification in onMessageReceived but, this does not seem to fire off notifee.onBackgroundEvent.

---

Am I wrong to assume that notifee can handle remote push notifications and click actions?

[mikehardy]

Hi there! This feels like more of a react-native-firebase ("RNFB") issue than a Notifee issue.

It sounds like RNFB isn't actually getting control when the push happens. This is common, it's very difficult to set up correctly on all platforms, and even when set up is sometimes unreliable (for instance, data-only notifications are specifically unreliable on both platforms but especially on iOS).

I'd recommend looking through rnfirebase.io documentation and github issues list first, as this is so common, and always resolves to a project-specific issue.

Things to verify:

• current stable versions of everything
• messaging background handler is async
• messaging background handler is set in index.js (or equivalent) *prior to AppRegistry registering the App component
• JSON FCM message is correct (specifically if data-only, you include content-available for iOS etc)
• you have requested notification permissions in the app
• you are not being throttled somehow (e.g. on iOS add -FIRDebugEnabled and watch logs)
• you are using a real device, emulators/simulators do not work consistently enough for testing
• you watch logs on the real device to see what's happening (adb logcat or launch from Xcode and watch console)
• ios has correct entitlements and everything

That's what I can think of off the top of my head. It's a lot. It works though

[beweinreich]

Hey @mikehardy thanks for the reply! Just to be clear, RNFB is sending the push just fine, and I am seeing it in the setBackgroundMessageHandler callback.

My question was moreso: how can I access the press action on a background message? Is this even possible with Notifee for remote notifications?

[mikehardy]

Ah, fantastic, as you can see from my comment that is by far the hardest part.

Can you post the exact / full JSON you are sending via FCM (just removing API keys or device identifiers of course)?

Can you alter this line

console.log("received message in background");

to

console.log("received message in background: " + JSON.stringify(message, null, 2));

and post that (deleting any API keys or device identifiers of course

In my experience I've had to put an adapter between RNFB and Notifee for my work project, I send some specific things via data chunk of JSON and I call specific Notifee APIs that way, that would be one path forward I think, whether Notifee can or should do this out of the box, unsure without JSON details

[beweinreich]

@mikehardy aha! You're right. my setBackgroundMessageHandler isn't getting called (although I'm seeing the push notification).

Reading through the various issues and stackoverflow tickets, I'm realizing I need to:

• remove notification from the payload
• add the setBackgroundMessageHandler in the index.js before registerComponent.

It's still not working on my iPhone :/ but I'm going to keep looking through docs to figure out if I can troubleshoot.

For my own sanity, leaving answers to your questions here:

• Testing on iPhone
• FCM token stored in our cloud DB
• Entitlements are ✔️ I can see the push notifications when I test them (with the notification field is included in fcm payload)

Packages

"@react-native-firebase/messaging": "7.8.6",
"@notifee/react-native": "^0.15.2",
"react-native": "0.63.4",

Push notification

{
  "message": {
    "data": {
        "title": "hello",
    },
    "token": "REDACTED",
    "android": {
      "notification": {
        "sound": "default"
      }
    },
    "apns": {
      "headers": {},
      "payload": {
        "aps": {
          "sound": "default",
          "category": "message"
        }
      }
    },
    "webpush": {
      "fcm_options": {
      }
    }
  }
}

index.js

import { AppRegistry } from "react-native";
import App from "./App";
import { name as appName } from "./app.json";
import messaging from "@react-native-firebase/messaging";

messaging().setBackgroundMessageHandler(async (remoteMessage) => {
  console.log("remote message", remoteMessage);
});

AppRegistry.registerComponent(appName, () => App);

[mikehardy]

Interesting - you will most definitely want to use current react-native-firebase (that's 10.4.0 as I type this) to make sure your firebase stack is up to date

You will unfortunately have to respect that data-only notifications are inconsistent by design. They are designed for "background refresh / caching of content a user would want quickly when they open the app", with the idea that the app will (when opened) check freshness and fetch directly if it was not refreshed in the background. Of course it is possible to use them to do other things in the background (like handle notifications) but it will not be 100% reliable and should not be considered as anything other than best effort for the platform. If you really want a notification to show to the user in response to an FCM, you've got to have a notification segment in the JSON. These are just the constraints we have on the platform unfortunately.

[beweinreich]

Got it. That's unfortunate :/ I'll close this out, as it seems that for my use-case (messages and replies via push notifications) it wouldn't be reliable enough via the data push.

Thank you for your help Mike!

[mikehardy]

Yeah, it's a shame they aren't 100% but notification spam and app-wakeup abuse (with attendant power drain) is why. I'm sympathetic to that even though I wish it weren't so. Good luck with your project!

[beweinreich]

Hey— just a quick update, setting content-available: 1 in the FCM payload caused setBackgroundMessageHandler to fire.

Hope that helps anyone who finds this in the future.

[mikehardy]

Indeed - when it does work (it can still be unreliable) that is required. For the record I actually use data-only messages in my work project, I just accept they may not go through so they aren't core functionality. You may like: https://rnfirebase.io/messaging/usage#data-only-messages