React Native Firebase Cloud Messaging推送无Heads-up弹窗通知问题求助

1. 检查Android通知通道配置 #

Android 8.0（API 26）及以上版本要求必须创建通知通道，且通道的重要性级别需设置为high或max才能触发heads-up弹窗。

在React Native客户端初始化通知通道：

import messaging from '@react-native-firebase/messaging';
import { Platform } from 'react-native';

async function createNotificationChannel() {
  if (Platform.OS === 'android') {
    const channel = new messaging.NotificationChannel('default', {
      name: '默认通知通道',
      description: '接收所有应用通知',
      importance: messaging.AndroidImportance.HIGH, // 关键：设置高优先级
      vibrationPattern: [0, 250, 250, 250],
      lightColor: '#FF231F7C',
    });
    await messaging().setNotificationChannel(channel);
  }
}
// 应用启动时调用该函数
createNotificationChannel();

2. 完善服务器端通知Payload配置 #

仅设置priority: "high"可能不足，需在payload中添加Android专属配置，明确指定通道ID和弹窗行为：

let payload = {
  notification: {
    title: params.title,
    body: params.body,
    android: {
      channelId: 'default', // 必须和客户端创建的通道ID一致
      priority: 'high',
      notification: {
        priority: 'high',
        visibility: 'public',
        sound: 'default',
        defaultSound: true,
        defaultVibrateTimings: true,
        defaultLightSettings: true,
      },
    },
  },
};
let options = { 
  priority: "high",
  timeToLive: 60 * 60
};
admin.messaging().sendToDevice(doc.firebase_notif_id, payload, options);

3. 确认客户端权限设置 #

确保应用已获取POST_NOTIFICATIONS权限（Android 13+），在客户端请求权限：

import messaging from '@react-native-firebase/messaging';

async function requestUserPermission() {
  const authStatus = await messaging().requestPermission();
  const enabled =
    authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
    authStatus === messaging.AuthorizationStatus.PROVISIONAL;

  if (enabled) {
    console.log('通知权限已授权');
  }
}
// 应用启动时调用该函数
requestUserPermission();

4. 检查设备通知设置 #

• 确认应用的通知权限已开启，且「弹窗通知」（或「悬浮通知」）选项未关闭
• 检查设备是否开启「免打扰模式」，该模式会屏蔽heads-up弹窗

5. 尝试Data消息配合本地通知 #

若以上配置无效，可改用Data消息发送，在客户端监听后手动创建本地通知，精准控制弹窗行为：

服务器端发送Data消息： #

let payload = {
  data: {
    title: params.title,
    body: params.body,
  },
};
let options = { 
  priority: "high",
  timeToLive: 60 * 60
};
admin.messaging().sendToDevice(doc.firebase_notif_id, payload, options);

客户端监听并创建本地通知： #

import messaging from '@react-native-firebase/messaging';
import notifee from '@react-native-firebase/notifee'; // 需要额外安装notifee依赖

messaging().onMessage(async remoteMessage => {
  await notifee.displayNotification({
    title: remoteMessage.data.title,
    body: remoteMessage.data.body,
    android: {
      channelId: 'default',
      importance: High,
      smallIcon: 'ic_notification', // 需在res/drawable目录添加对应图标
      pressAction: {
        id: 'default',
      },
    },
  });
});

内容的提问来源于stack exchange，提问作者Abdelghafour Ennahid