Внедрение push-уведомлений в приложении React Native может значительно повысить вовлеченность пользователей, предоставляя своевременные обновления и оповещения. Firebase Cloud Messaging (FCM) предлагает надежное и простое в интеграции решение для управления push-уведомлениями на разных платформах. Это руководство проведет вас через шаги по внедрению push-уведомлений в React Native с использованием Firebase.

Предпосылки

  • Проект React Native, созданный с помощью Expo или React Native CLI
  • Проект Firebase создан в консоли Firebase
  • Базовые знания JavaScript и React Native
  • Firebase SDK установлена в вашем проекте

Создаем пожарную базу

Сначала создайте проект Firebase и добавьте в него свое приложение. Загрузите файлы конфигурации:

Для Android

Загрузите файл google-services.json и поместите его в каталог Android/app вашего проекта. Обязательно добавьте Firebase SDK в зависимости от вашего проекта.

Для iOS

Загрузите файл GoogleService-Info.plist и добавьте его в свой проект Xcode. Установите Firebase SDK через CocoaPods.

Установка зависимостей

Установите необходимые пакеты Firebase:

  • Для React Native CLI:

Бег:

  • Для управления рабочим процессом Expo:

Используйте SDK Expo Firebase или выбросьте в рабочий процесс для нативных модулей.

Запрос разрешений и получение токена

В вашем коде React Native запросите разрешение на уведомления и извлеките маркер устройства:

Пример:

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('Authorization status:', authStatus);
 getFcmToken();
 }
}

async function getFcmToken() {
 const fcmToken = await messaging().getToken();
 if (fcmToken) {
 console.log('FCM Token:', fcmToken);
 // Send token to your server for push notifications
 }
}

requestUserPermission();

Обработка входящих уведомлений

Настройте слушателей для обработки уведомлений и ответов на переднем плане:

messaging().onMessage(async remoteMessage => {
 console.log('A new FCM message arrived!', remoteMessage);
 // Show local notification or update UI
});

messaging().setBackgroundMessageHandler(async remoteMessage => {
 console.log('Message handled in the background!', remoteMessage);
 // Handle background message
});

Отправка Push уведомлений

Используйте API обмена сообщениями Firebase Cloud или Firebase Console для отправки уведомлений.

{
 "to": "",
 "notification": {
 "title": "Hello!",
 "body": "This is a push notification."
 }
}

Отправьте сообщение через Firebase Cloud Messaging REST API или Firebase Console.

Заключение

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