通知简介

React Native Firebase的通知模块支持远程（FCM）和本地通知。

远程通知

Firebase云消息传递（FCM）允许您的应用程序远程显示通知。为了使事情变得简单易懂，我们将React Native Firebase功能明确划分为仅限数据和通知消息。

远程通知：

用于在设备上显示可见通知。
包含可选的数据有效负载（键/值对的映射），供应用程序使用（如果它位于前台），或者随后打开通知。如果未打开通知，则此数据永远不会对应用程序可用。
被移动设备的操作系统拦截。
当应用程序处于后台或关闭时，将传送到通知托盘。

React Native Firebase通知模块处理仅通知和通知+数据FCM远程消息。
有关仅限数据的FCM消息，请参阅消息传递模块。

远程通知的行为如下：

	应用程序在前台	应用程序在后台	应用关闭
Android的	`onNotification` 触发	`onNotificationOpened` 如果点击通知则触发	`getInitialNotification` 如果点击通知并打开应用程序，则会填充
iOS版	`onNotification` 触发	`onNotificationDisplayed`如果`content_available`设置为`true` `onNotificationOpened`触发通知，则触发	`getInitialNotification` 如果点击通知并打开应用程序，则会填充
笔记	没有向用户显示可见通知，您可以手动显示通知	该通知由移动设备的OS呈现给用户	该通知由移动设备的OS呈现给用户

本地通知

扫描二维码关注公众号，回复： 1897471 查看本文章

Android和IOS都支持在本地触发应用程序通知的功能。这些可以立即显示，也可以安排在以后显示。

通知模块处理所有本地通知。

计划的通知行为如下：

	应用程序在前台	应用程序在后台	应用关闭
Android的	`onNotification` 触发	`onNotificationOpened` 如果点击通知则触发	`getInitialNotification` 如果点击通知并打开应用程序，则会填充
iOS版	`onNotification` 触发	`onNotificationOpened` 如果点击通知则触发	`getInitialNotification` 如果点击通知并打开应用程序，则会填充
笔记	没有向用户显示可见通知，您可以手动显示通知	该通知由移动设备的OS呈现给用户	该通知由移动设备的OS呈现给用户

Android安装

首先确保您已遵循初始设置指南和消息设置指南。

安装RNFirebase Notifications包

添加RNFirebaseNotificationsPackage到您的android/app/src/main/java/com/[app name]/MainApplication.java：

// ...
import io.invertase.firebase.RNFirebasePackage;
import io.invertase.firebase.notifications.RNFirebaseNotificationsPackage; // <-- Add this line

public class MainApplication extends Application implements ReactApplication {
    // ...

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
          new RNFirebasePackage(),
          new RNFirebaseNotificationsPackage() // <-- Add this line
      );
    }
  };
  // ...
}

更新Android清单

将以下内容添加到android/app/src/main/AndroidManifest.xml：

添加权限：

<manifest ...>
  <uses-permission android:name="android.permission.INTERNET" />
  <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED" />
  <uses-permission android:name="android.permission.VIBRATE" />

在活动道具中设置应用启动模式：

<activity
  ...
  android:launchMode="singleTop"
>

默认图标和颜色（可选）

在应用程序组件中，添加元数据元素以设置默认通知图标和颜色。只要传入的消息没有明确设置图标或颜色，Android就会使用这些值。

<application ...>
  <!-- Set custom default icon. This is used when no icon is set for incoming notification messages.
       See README(https://goo.gl/l4GJaQ) for more. -->
  <meta-data
    android:name="com.google.firebase.messaging.default_notification_icon"
    android:resource="@drawable/ic_stat_ic_notification" />
  <!-- Set color used with incoming notification messages. This is used when no color is set for the incoming
       notification message. See README(https://goo.gl/6BKBk7) for more. -->
  <meta-data
    android:name="com.google.firebase.messaging.default_notification_color"
    android:resource="@color/colorAccent" />
</application>

通知渠道（可选）

从Android 8.0（API级别26）及更高版本，支持并建议使用通知渠道。FCM提供具有基本设置的默认通知通道。如果您更喜欢创建和使用自己的默认频道，请将default_notification_channel_id设置为通知频道对象的ID，如图所示; 只要传入消息未明确设置通知通道，FCM就会使用此值。

<application ...>
  <meta-data
    android:name="com.google.firebase.messaging.default_notification_channel_id"
    android:value="@string/default_notification_channel_id"/>
</application>

预定通知（可选）

如果您想安排本地通知，那么您还需要将以下内容添加到以下应用程序组件中android/app/src/main/AndroidManifest.xml：

<application ...>
  <receiver android:name="io.invertase.firebase.notifications.RNFirebaseNotificationReceiver"/>
  <receiver android:enabled="true" android:exported="true"  android:name="io.invertase.firebase.notifications.RNFirebaseNotificationsRebootReceiver">
    <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>
</application>

接收通知

1）检查权限

在您能够发送和接收通知之前，您需要确保用户已授予正确的权限：

const enabled = await firebase.messaging().hasPermission();
if (enabled) {
    // user has permissions
} else {
    // user doesn't have permission
}

2）请求权限

如果用户尚未授予权限，则可以提示他们执行此操作，如下所示：

try {
    await firebase.messaging().requestPermission();
    // User has authorised
} catch (error) {
    // User has rejected permissions
}

3）听取通知

通知包含三种不同类型：

来自FCM的仅通知消息
来自FCM的通知+数据消息
本地通知

有关纯数据FCM消息，请参阅消息模块。

根据应用程序的状态，通知将触发两个侦听器中的一个：

onNotificationDisplayed - 在显示特定通知时触发
onNotification - 在收到特定通知时触发

// Optional: Flow type
import type { Notification } from 'react-native-firebase';

componentDidMount() {
    this.notificationDisplayedListener = firebase.notifications().onNotificationDisplayed((notification: Notification) => {
        // Process your notification as required
        // ANDROID: Remote notifications do not contain the channel ID. You will have to specify this manually if you'd like to re-display the notification.
    });
    this.notificationListener = firebase.notifications().onNotification((notification: Notification) => {
        // Process your notification as required
    });
}

componentWillUnmount() {
    this.notificationDisplayedListener();
    this.notificationListener();
}

4）听取正在打开的通知

在Android上，很遗憾，无法访问已打开的远程通知的标题和正文。如果需要，您可以使用data远程通知的部分提供此信息。

应用程序在前景和背景中

如果您的应用位于前台或后台，则可以按以下方式监听点击/点击/打开通知的时间：

// Optional: Flow type
import type { Notification, NotificationOpen } from 'react-native-firebase';

componentDidMount() {
    this.notificationOpenedListener = firebase.notifications().onNotificationOpened((notificationOpen: NotificationOpen) => {
        // Get the action triggered by the notification being opened
        const action = notificationOpen.action;
        // Get information about the notification that was opened
        const notification: Notification = notificationOpen.notification;
    });
}

componentWillUnmount() {
    this.notificationOpenedListener();
}

应用已关闭

如果您的应用已关闭，您可以通过点击/点按/打开通知来检查它是否已打开，如下所示：

// Optional: Flow type
import type { Notification, NotificationOpen } from 'react-native-firebase';

async componentDidMount() {
    const notificationOpen: NotificationOpen = await firebase.notifications().getInitialNotification();
    if (notificationOpen) {
        // App was opened by a notification
        // Get the action triggered by the notification being opened
        const action = notificationOpen.action;
        // Get information about the notification that was opened
        const notification: Notification = notificationOpen.notification;
    }
}

安排通知

Android和iOS都允许将通知安排在将来某个时间显示。

1）建立通知

要建立通知，请按照显示通知指南。

2）安排通知

（Android）设置通知频道

之前，你可以安排在Android的通知，你必须确保你已经创建了一个通知信道，如解释在这里。

安排通知

// Build notification
const notification = new firebase.notifications.Notification()...;

// Schedule the notification for 1 minute in the future
const date = new Date();
date.setMinutes(date.getMinutes() + 1);

firebase.notifications().scheduleNotification(notification, {
    fireDate: date.getTime(),
})

有关完整的参考文档，请参阅通知＃scheduleNotification。

Android通知渠道

从Android 8.0（API级别26）开始，通知必须指定通知通道，否则它们将不会出现。

要允许React Native Firebase在所有版本的Android中无缝工作，您需要先创建一个频道，然后才能显示通知。这段代码可以重复运行多次，因此每次应用程序启动时都可以安全地运行。

创建通知频道

// Build a channel
const channel = new firebase.notifications.Android.Channel('test-channel', 'Test Channel', firebase.notifications.Android.Importance.Max)
  .setDescription('My apps test channel');

// Create the channel
firebase.notifications().android.createChannel(channel);

有关完整的参考文档，请参阅AndroidChannel和AndroidNotifications。

创建通知通道组

React Native Firebase还支持通知通道组的概念。

// Build a channel group
const channelGroup = new firebase.notifications.Android.ChannelGroup('test-group', 'Test Channel Group');

// Create the channel group
firebase.notifications().android.createChannelGroup(channelGroup);

有关完整的参考文档，请参阅AndroidChannelGroup和AndroidNotifications。

Tips：

记得导包：

import firebase from 'react-native-firebase';
import type {Notification, NotificationOpen, RemoteMessage} from 'react-native-firebase';

发送通知有两种方式：根据包名和设备的令牌。

获取令牌方法：

/**
 * 获取令牌
 * @returns {Promise<void>}
 */
async msg() {
    const fcmToken = await firebase.messaging().getToken();
    if (fcmToken) {
        console.log(`令牌为：${fcmToken}`)
    } else {
        // user doesn't have a device token yet
        alert('user doesn\'t have a device token yet')
    }
}

接收通知的监听：

应用在前台：

this.notificationDisplayedListener = firebase.notifications().onNotificationDisplayed((notification: Notification) => {
    // Process your notification as required
    // ANDROID: Remote notifications do not contain the channel ID. You will have to specify this manually if you'd like to re-display the notification.
    console.log(notification);
    alert('onNotificationDisplayed')

});

this.notificationListener = firebase.notifications().onNotification((notification: Notification) => {
    // Process your notification as required
    console.log(notification);
    alert('onNotification')
});

notification._title
notification._body
notification._data

notification为接收到通知时拿到的对象。_title，_body等是高级选项中填写的内容

其实有两种方法接收到通知的监听，onNotificationDisplayed和onNotification，但一般通知好像

后台发的是走的onNotification，app内部发的通知走的是onNotificationDisplayed

应用在后台:

async checkNoti() {
    const notificationOpen: NotificationOpen = await firebase.notifications().getInitialNotification();
    if (notificationOpen) {
        // App was opened by a notification
        // Get the action triggered by the notification being opened
        const action = notificationOpen.action;
        console.log(action);
        // Get information about the notification that was opened
        const notification: Notification = notificationOpen.notification;
        console.log(notification);
    }
}

react-native-firebase 通知

通知简介

远程通知

本地通知

Android安装

安装RNFirebase Notifications包

更新Android清单

默认图标和颜色（可选）

通知渠道（可选）

预定通知（可选）

接收通知

1）检查权限

2）请求权限

3）听取通知

4）听取正在打开的通知

应用程序在前景和背景中

应用已关闭

安排通知

1）建立通知

2）安排通知

（Android）设置通知频道

安排通知

Android通知渠道

创建通知频道

创建通知通道组

猜你喜欢