如何使用 react-native-firebase v5 正确设置前台通知？

Posted 2023-02-24

【中文标题】如何使用 react-native-firebase v5 正确设置前台通知？

【英文标题】：How to correctly set up foreground notifications using react-native-firebase v5?

【发布时间】：2019-11-29 16:32:42

【问题描述】：

我们有一个 react-native 应用，它通过 FCM 在以下环境中运行通知：

  react-native: 0.59.10,
  react-native-firebase: 5.5.6

所有配置都已设置，证书已配置等。直到现在，通知一直像时钟一样工作，但最近我们停止在前台接收通知。

这是NotificationsManager 代码：

import firebase from 'react-native-firebase';

const CHANNEL = 'default';

...

const localNotificationListener = React.useRef();
const notificationOpenListener = React.useRef();
const onTokenRefreshListener = React.useRef();

const receiveForegroundPN = (n) => 
    const notification = new firebase.notifications.Notification()
      .setNotificationId(n.notificationId)
      .setTitle(n.title)
      .setSubtitle(n.subtitle)
      .setBody(n.body)
      .setData(n.data);

    if (Platform.OS === 'android') 
      notification
        .android.setChannelId(CHANNEL)
        .android.setSmallIcon('ic_launcher');
    
    firebase.notifications().displayNotification(notification);
  ;

React.useEffect(() => 
    const channel = new firebase.notifications.Android.Channel(
      CHANNEL,
      'Bank Notifications',
      firebase.notifications.Android.Importance.Max,
    ).setDescription('*****');

    firebase.notifications().android.createChannel(channel);

    localNotificationListener.current = firebase.notifications().onNotification(receiveForegroundPN);
    notificationOpenListener.current = firebase.notifications().onNotificationOpened(openNotification);

    onTokenRefreshListener.current = firebase.messaging().onTokenRefresh((fcmToken) => 
      registerToken(
        device_token: fcmToken,
      );
    );

    runFlow();

    return () => 
      localNotificationListener.current();
      notificationOpenListener.current();
      onTokenRefreshListener.current();
    ;
  , []);

当应用程序在后台时，通知在两个平台上都可以正常工作，但当应用程序在前台时从不显示。

我尝试设置show_on_foreground: "true"，但没有帮助。实际上，我尝试在 receiveForegroundPN 方法中记录任何内容，但它从未被调用，也就是说，当应用程序运行时，它看起来好像从未从 firebase 收到通知。

这可能是什么问题以及使通知起作用的可能解决方案？

更新

突然之间，在发布此消息的一小时内，ios 开始收到前台通知。 Android 仍然无法运行，但它曾经使用过。

【参考方案1】：

我也有类似的问题.. , onNotification 方法没有被触发，所以我尝试了 onMessage 方法，它似乎适用于前台。

 firebase.messages().onMessage(msg => 
  // ... your code here
);

【参考方案2】：

迭代 Amr 的答案。

根据documentation，您必须挂钩到 Firebase 的回调，以便在前台收到推送通知时收到通知。 从那时起，您可以决定如何处理该消息。

最简单的方法是显示警报Alert.alert('A new FCM message arrived!', JSON.stringify(remoteMessage)); 或 您可以使用另一个库来显示本地通知。下面是一个使用 react-native-notifications 库的示例：

// Just call the hook in some root component that's always present

export const useDisplayRemoteNotifications: () => void = () => 
  useEffect(() => 
    return messaging().onMessage(async remoteMessage => 
      Notifications.postLocalNotification(
        title: remoteMessage.notification?.title || '',
        body: remoteMessage.notification?.body || '',
        fireDate: dayjs().add(1, 'second').toDate(), // one second later
      );
    );
  , []);
;