Получение push-уведомления от Firebase в React Native

Регистрация приложения

Чтобы использовать FCM, мы должны создать новый проект Firebase или использовать существующий. Создание нового проекта Firebase осуществляется путем перехода в Консоль Firebase.

нажмите «Создать проект».

Регистрация нового приложения для Android

Реагировать на нативную Firebase

Чтобы подключить наше приложение React Native к приложениям, созданным в консоли Firebase, необходимо выполнить пару шагов. Допустим, у нас уже создано приложение React Native. Все, чего нам сейчас не хватает, — это библиотеки, которые мы будем использовать для реализации push-уведомлений. Первое, что нужно сделать, это добавить в проект необходимые библиотеки Firebase:

yarn add react-native-push-notification
yarn add @react-native-community/push-notification-ios
yarn add @react-native-firebase/app
yarn add @react-native-firebase/messaging

После добавления библиотек Firebase нам нужно немного больше настроить, чтобы иметь возможность успешно получать push-уведомления на устройствах Android и iOS.

Настройка Android

Приложение Gradle для Android

Перейдите в android › app › build.gradle и найдите applicationId. Это похоже на «com.appName».

копировать и вредить имени пакета Android. и нажмите кнопку Зарегистрировать приложение.

Чтобы включить push-уведомления на Android, нам нужно загрузить файл конфигурации google-services.json, созданный ранее Firebase, и поместить его в папку android/app/.

Теперь откройте приложение для Android › файл build.gradle и поместите

apply plugin: ‘com.google.gms.google-services’// применить после этой строки сверху и внутри зависимостей поместите эту строку

Используйте этот код:

dependencies {
// For React Native Push Notification
 implementation project(‘:react-native-push-notification’)
 }

На андроид › build.gradle

supportLibVersion = “29.0.0”
playServicesVersion = “17.0.0”
googlePlayServicesVersion = “+” // default: “+”
firebaseMessagingVersion = “21.1.0”
firebaseVersion = “17.3.4”

настройка iOS

Это делается путем загрузки файла GoogleService-Info.plist из нашего проекта iOS Firebase.

Чтобы позволить Firebase использовать эти учетные данные, нам нужно добавить несколько строк в наш файл ios/{projectname}/appDelegate.m. Во-первых, нам нужно добавить строку в начало файла для импорта Firebase SDK:

#import <Firebase.h>

После этого мы добавляем внутрь существующего метода didFinishLaunchingWithOptions следующее:

Используйте этот код:

// ADD THIS LIBRARY IN TOP
#import <Firebase.h>
#import <RNCPushNotificationIOS.h>
#import <UserNotifications/UserNotifications.h>
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
[FIRApp configure]; // ADD THIS
// ...
}
// ADD THIS Functions
// Required for the register event.
- (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken
{
  [RNCPushNotificationIOS didRegisterForRemoteNotificationsWithDeviceToken:deviceToken];
}
// Required for the notification event. You must call the completion handler after handling the remote notification.
- (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo
fetchCompletionHandler:(void (^)(UIBackgroundFetchResult))completionHandler
{
  [RNCPushNotificationIOS didReceiveRemoteNotification:userInfo fetchCompletionHandler:completionHandler];
}
// Required for the registrationError event.
- (void)application:(UIApplication *)application didFailToRegisterForRemoteNotificationsWithError:(NSError *)error
{
  [RNCPushNotificationIOS didFailToRegisterForRemoteNotificationsWithError:error];
}
// Required for localNotification event
- (void)userNotificationCenter:(UNUserNotificationCenter *)center
didReceiveNotificationResponse:(UNNotificationResponse *)response
         withCompletionHandler:(void (^)(void))completionHandler
{
  [RNCPushNotificationIOS didReceiveNotificationResponse:response];
}
//Called when a notification is delivered to a foreground app.
-(void)userNotificationCenter:(UNUserNotificationCenter *)center willPresentNotification:(UNNotification *)notification withCompletionHandler:(void (^)(UNNotificationPresentationOptions options))completionHandler
{
  completionHandler(UNNotificationPresentationOptionSound | UNNotificationPresentationOptionAlert | UNNotificationPresentationOptionBadge);
}

Еще один необходимый шаг для включения push-уведомлений для проекта iOS — перейти к проекту в Xcode, выбрать «Подписание» и «Возможности» в настройках проекта и добавить push-уведомления, а также фоновые режимы с установленными флажками, как показано ниже.

Получение сообщений от Firebase

После настройки всего необходимого для работы push-уведомлений на обеих платформах осталось написать наш код React Native для получения сообщений от Firebase, которые позже будут отображаться как уведомления.

Для целей этого сообщения в блоге мы будем отправлять сообщения непосредственно из консоли Firebase. Это позволяет нам выбирать заголовок и текст уведомления, а также пользовательское изображение, планирование на более позднюю дату и другие полезные функции.

Также требуется обязательное свойство Android под названием senderID. Его можно получить из Настройки проекта › Облачный обмен сообщениями.

import React, { useEffect } from 'react'
import PushNotification from 'react-native-push-notification'
const RemotePushController = () => {
  useEffect(() => {
    PushNotification.configure({
      // (optional) Called when Token is generated (iOS and Android)
      onRegister: function(token) {
        console.log('TOKEN:', token)
      },
      // (required) Called when a remote or local notification is opened or received
      onNotification: function(notification) {
        console.log('REMOTE NOTIFICATION ==>', notification)
        // process the notification here
      },
      // Android only: GCM or FCM Sender ID
      senderID: '25620000662',
      popInitialNotification: true,
      requestPermissions: true
    })
  }, [])
  return null
}
export default RemotePushController

Добавьте этот метод в файл App.js, как показано ниже:

// after other import statements
import RemotePushController from './src/services/RemotePushController'
// before the ending <View>
  <RemotePushController />
</View>

Чтобы проверить это, перейдите в раздел Cloud Messaging и создайте уведомление.

Нажмите кнопку Отправить тестовое сообщение. Вы получили уведомление.

Всегда мотивируйте находить новые вещи в React Native

Мохаммад Недария (старший разработчик React Native)

Шивам Такер (разработчик iOS и кросс-мобильных приложений)

Дальнейшее чтение

Получайте уведомления о деталях новых инноваций в индустрии программного обеспечения, а также о других важных обновлениях и расширениях ИТ-индустрии, ознакомьтесь с нашей предыдущей и следующей статьей.