点击 Firebase 后台通知时如何正确显示通知内容？
2024-03-03 09:18:12
在开发 React Native 应用时，我们经常会用到 Firebase 云消息传递 (FCM) 来推送通知。理想情况下，当用户点击通知时，应用应该打开并显示通知的内容。但是，有时我们会遇到这样的问题：点击 Firebase 后台通知只会打开应用的主界面，而不会显示通知本身。这会让用户错过重要的信息，降低应用的用户体验。
出现这个问题的原因是 React Native 默认不会在点击后台通知时自动显示通知内容。我们需要手动处理这个过程，才能确保通知内容被正确显示。
解决这个问题的方法其实很简单，就是修改监听通知的代码，手动显示通知。具体来说，我们需要在 notificationListener 函数中添加一些代码，以便在应用打开时显示通知。
首先，我们需要监听 onNotificationOpenedApp 事件。这个事件会在用户点击后台通知并打开应用时触发。在事件处理函数中，我们可以获取到通知的内容，然后使用 showNotification 函数来显示它：
messaging().onNotificationOpenedApp(remoteMessage => {
showNotification(remoteMessage.notification);
});
其次，我们需要在应用启动时检查是否存在初始通知。如果存在，就说明用户是通过点击通知来打开应用的，我们也需要显示这个通知：
messaging().getInitialNotification().then(remoteMessage => {
if (remoteMessage) {
showNotification(remoteMessage.notification);
}
});
那么，showNotification 函数应该如何实现呢？我们可以使用 firebase.notifications 模块来创建和显示通知：
const showNotification = notification => {
const channelId = 'YOUR_CHANNEL_ID';
const channel = new firebase.notifications.Android.Channel(channelId, 'YOUR_CHANNEL_NAME', firebase.notifications.Android.Importance.Max).setDescription('YOUR_CHANNEL_DESCRIPTION');
firebase.notifications().android.createChannel(channel);
const notificationMessage = new firebase.notifications.Notification({
title: notification.title,
body: notification.body,
}).android.setChannelId(channelId);
firebase.notifications().displayNotification(notificationMessage);
};
在这段代码中，我们首先创建了一个通知通道。通知通道是 Android 8.0 (API 级别 26) 引入的概念，用于对通知进行分组和管理。然后，我们创建了一个 Notification 对象，设置了通知的标题和正文，并将其分配到我们创建的通道。最后，我们使用 displayNotification 函数来显示通知。
需要注意的是，这段代码只适用于 Android 设备。如果你的应用也需要支持 iOS，你需要使用不同的方法来显示通知。具体可以参考 Firebase 的官方文档。
通过以上步骤，我们就可以实现在点击 Firebase 后台通知时显示通知内容的功能，提升应用的用户体验。
常见问题解答：
- 为什么我的应用在后台运行时无法收到通知？
这可能是因为你的应用被系统杀死了。为了确保应用能够在后台接收通知，你需要在 AndroidManifest.xml 文件中配置firebase_messaging_service。 - 如何自定义通知的图标和声音？
你可以在notificationMessage对象中设置icon和sound属性来自定义通知的图标和声音。 - 如何处理点击通知后的跳转逻辑？
你可以在onNotificationOpenedApp事件的回调函数中处理点击通知后的跳转逻辑。例如，你可以根据通知的数据跳转到不同的页面。 - 如何实现通知的本地化？
你可以使用firebase.notifications().setLanguageCode()方法来设置通知的语言。 - 如何测试 Firebase 云消息传递的功能？
你可以使用 Firebase 控制台发送测试消息来测试 Firebase 云消息传递的功能。
希望这篇文章能够帮助你解决点击 Firebase 后台通知只打开应用主界面而不显示通知内容的问题。如果你有任何疑问，欢迎在评论区留言。
