推送通知未顯示在 Android 前台

Question

我在 android 和 iPhone 中使用react-native-fcm進行遠程通知。

react-native-fcm

在 Android 前台，我無法在通知欄中收到遠程通知。

在后台模式下，我能夠成功收到通知，但在前台卻沒有。

Android Manifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
          package="com.nusape">

    <application>

        <receiver android:name="com.evollu.react.fcm.FIRLocalMessagingPublisher"/>
        <receiver android:enabled="true" android:exported="true"  android:name="com.evollu.react.fcm.FIRSystemBootEventReceiver">
            <intent-filter>
                <action android:name="android.intent.action.BOOT_COMPLETED"/>
                <action android:name="android.intent.action.QUICKBOOT_POWERON"/>
                <action android:name="com.htc.intent.action.QUICKBOOT_POWERON"/>
                <category android:name="android.intent.category.DEFAULT" />
            </intent-filter>
        </receiver>

        <meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="@mipmap/ic_launcher"/>
        <meta-data android:name="com.google.firebase.messaging.default_notification_channel_id" android:value="my_default_channel"/>

        <service android:name="com.evollu.react.fcm.MessagingService" android:enabled="true" android:exported="true">
            <intent-filter>
                <action android:name="com.google.firebase.MESSAGING_EVENT"/>
            </intent-filter>
        </service>

        <service android:name="com.evollu.react.fcm.InstanceIdService" android:exported="false">
            <intent-filter>
                <action android:name="com.google.firebase.INSTANCE_ID_EVENT"/>
            </intent-filter>
        </service>



       <activity android:launchMode="singleTop" android:configChanges="keyboard|keyboardHidden|orientation|screenSize" android:windowSoftInputMode="adjustResize">

            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>

            <intent-filter>
                <action android:name="fcm.ACTION.HELLO" />
                <category android:name="android.intent.category.DEFAULT" />
            </intent-filter>

        </activity>
        <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
    </application>

</manifest>

應用程序.js

async componentDidMount() {
// create NotificationChannel for future use!
    FCM.createNotificationChannel({
      id: 'my_default_channel',
      name: 'Default',
      description: 'used for example',
      priority: 'high'
    });

    // initially user get InitialNotification frim the app if any pending
    FCM.getInitialNotification().then(notif => {
      console.log("getInitialNotification Notification : => ", notif);

      // if notif.targetScreen is details screen then it will redirect to details screen directly!
      if (notif && notif.targetScreen === "detail") {
        setTimeout(() => {
          this.props.navigation.navigate("Detail");
        }, 500);
      }
    });

    // added notification listener for getting any notification called below function then
    this.notificationListener =  FCM.on(FCMEvent.Notification, async (notif) =>  {
      console.log("FCMEvent.Notification Notification : => ", notif);

      if (Platform.OS === 'ios' && notif._notificationType === NotificationType.WillPresent && !notif.local_notification) {
        notif.finish(WillPresentNotificationResult.All);
        return;
      }

      // if user tap to notification bar then open app then below condition will follow up and redirect to details screen!
      if (notif.opened_from_tray) {
        if (notif.targetScreen === 'detail') {
          setTimeout(() => {
            navigation.navigate('Detail')
          }, 500)
        }
        setTimeout(() => {
          alert(`User tapped notification\n${JSON.stringify(notif)}`)
        }, 500)
      }

      // check whether app is in background or foreground for generate notification
     if (AppState.currentState !== 'background'){
        this.showLocalNotification(notif);


    });

    // getting user permission for sending notification or not ?
    try {
      let result = await FCM.requestPermissions({
        badge: true,
        sound: true,
        alert: true
      });
      console.log("Notification requestPermissions : => ", result)
    } catch (e) {
      console.error(e);
    }

    // Generating token for particular user wise send notification
    FCM.getFCMToken().then(token => {
      FCM.subscribeToTopic("channelToTopic");
      console.log("Notification token : => ", token);
      this.setState({ token: token || "" });
    });

    // Get APNSTOKEN for only ios
    if (Platform.OS === "ios") {
      FCM.getAPNSToken().then(token => {
        console.log("APNS TOKEN (getFCMToken)", token);
      });
    }
  }

  // show notification when app is in foreground and getting any new notification
  showLocalNotification = (notif) => {
    FCM.presentLocalNotification({
      channel: 'my_default_channel',
      id: new Date().valueOf().toString(),
      title: notif.fcm.title,
      body: notif.fcm.body,
      priority: "high",
      badge: 1,
      number: 1,
      ticker: "My Notification Ticker",
      auto_cancel: true,
      big_text: "Show when notification is expanded",
      sub_text: "This is a subText",
      wake_screen: true,
      group: "group",
      icon: "ic_launcher",
      ongoing: true,
      my_custom_data: "my_custom_field_value",
      lights: true,
      show_in_foreground: true
    });
  };

我從過去 2 個月開始就遇到了這個問題，並且沒有得到很好的解決方案，因為我做了很多新的嘗試來解決問題，但最終沒有取得任何成功。

Answer 1

根據react-native-fcm的官方 Github ，該庫已折舊。 您可以使用react-native-firebase來生成通知。 我能夠在大約 2 小時內為 android 發送通知。 如果你想要代碼，我可以分享它。 祝你好運。

更新 - 抱歉，由於我的辦公室帳戶，我無法更早地回答。

這是我用於顯示 android 前台通知的代碼。

firebase.messaging()
        .subscribeToTopic(this.state.user.user_name)
        .then(response => console.log('response from FCM TOPIC' + response))
        .catch(error =>  console.log('error from FCM TOPIC'+ error));

        this.notificationListener = firebase.notifications().onNotification(notification => {
            let notificationMessage = notification._android._notification._data.action;
            let recordId = notification._android._notification._data.recordID;

            let { title, body } = notification;
            //  console.log('ttttt', notification)
            // notification.android.setAutoCancel(false)
            console.log(title, body, notificationMessage, recordId);


            const channelId = new firebase.notifications.Android.Channel(
                'Default',
                'Default',
                firebase.notifications.Android.Importance.High
            );
            firebase.notifications().android.createChannel(channelId);

            let notification_to_be_displayed = new firebase.notifications.Notification({
                data: notification._android._notification._data,
                sound: 'default',
                show_in_foreground: true,
                title: notification.title,
                body: notification.body,
            });

            if (Platform.OS == 'android') {
                notification_to_be_displayed.android
                    .setPriority(firebase.notifications.Android.Priority.High)
                    .android.setChannelId('Default')
                    .android.setVibrate(1000);
            }
            console.log('FOREGROUND NOTIFICATION LISTENER: \n', notification_to_be_displayed);

            firebase.notifications().displayNotification(notification_to_be_displayed);
        });

Answer 2

根據此處列出的庫問題，您可以嘗試兩件事：

1. 只需在遠程通知的data屬性中傳遞show_in_foreground

2. android 僅在應用程序狀態被終止或后台時才顯示通知。 要在應用程序前台顯示通知，您需要顯示local notification 。

示例代碼：

FCM.on(FCMEvent.Notification, notif => {
    if (!notif.opened_from_tray) {
        showLocalNotification();
    }
});

showLocalNotification() {
    FCM.presentLocalNotification({
      id: new Date().valueOf().toString(),         // (optional for instant notification)
      title: "Test Notification with action",      // as FCM payload
      body: "Force touch to reply",                // as FCM payload (required)
      show_in_foreground: true                     // notification when app is in foreground (local & remote)
    });
  }

完整代碼在這里

Answer 3

您正在測試哪個 API 級別？ Android API 26 及更高版本需要創建通道才能在前台接收通知。 請閱讀本文以獲取更多信息。

react-native-fcm也更新為包含通道，盡管不應再使用該庫，因為該庫不再維護，請參考此，一個很好的替代方案是react-native-firebase 。