Реализация push-уведомлений React Native с помощью Firebase Cloud Messaging

React Native использует JavaScript и React для создания приложений для iOS, Android и веб из единой кодовой базы. Он также позволяет использовать встроенные функции каждого устройства, такие как темы по умолчанию, камера, геолокация и push-уведомления. Это означает, что вы можете использовать React Native для создания полноценного мобильного приложения, которое интегрируется с базовыми настройками iOS или Android, что упрощает реализацию push-уведомлений, как я продемонстрирую сегодня.

В этой статье мы узнаем, как построить простое приложение для чата на React, которое интегрируется с Firebase Cloud Messaging и push-уведомлениями устройства для уведомления пользователя о получении нового сообщения.

Предварительные условия
Чтобы следовать этому руководству, необходимо иметь следующее:

Node v14 или выше и npm v5.6 или выше, установленные на вашей локальной машине.
Рабочие знания о React Native
учетная запись Firebase

Настройка чат-приложения React Native
Чтобы настроить приложение, создайте папку проекта, в которой будет находиться ваш проект, а затем инициализируйте приложение с помощью этой команды npx:

npx react-native init chat_app_with_fcm
Войти в полноэкранный режим Выйти из полноэкранного режима

После выполнения вышеуказанной команды будет создан каталог chat_app_with_fcm, в котором будут размещены ваши настройки React Native. Измените путь к созданной папке chat_app_with_fcm:

cd chat_app_with_fcm
Войти в полноэкранный режим Выйти из полноэкранного режима

Давайте проверим, работает ли загруженный шаблон React Native. Убедитесь, что у вас есть подключенное устройство или эмулятор, а затем запустите приложение в таком виде:

npm run android
Войти в полноэкранный режим Выйти из полноэкранного режима

Это запустит среду разработки, которую вы можете использовать для доступа к приложению на подключенном устройстве или эмуляторе.

Создание функциональности чата
В этом руководстве мы создаем приложение для чата. Для работы с функциональностью чата мы будем использовать пакет react-native-gifted-chat. Пакет предоставит готовый к использованию интерактивный пользовательский интерфейс для приложения чата.

Чтобы установить пакет, откройте терминал проекта и выполните следующую команду:

npm i react-native-gifted-chat
Войти в полноэкранный режим Выйти из полноэкранного режима

После установки перейдите к файлу App.js и внесите следующие изменения.

Во-первых, импортируйте модуль GiftedChat:

import { GiftedChat } from 'react-native-gifted-chat'
Войти в полноэкранный режим Выйти из полноэкранного режима

Затем импортируйте следующие хуки:

import { useState, useCallback, useEffect } from "react";
Войти в полноэкранный режим Выход из полноэкранного режима

Внутри функции App: () определите состояние для сообщений:

const [messages, setMessages] = useState([]);
Войти в полноэкранный режим Выход из полноэкранного режима

Определите useEffect для установки сообщения по умолчанию при загрузке приложения:

useEffect(() => {
    setMessages([
        {
            _id: 1,
            text: 'Hello there',
            createdAt: new Date(),
            user: {
                _id: 2,
                name: 'PartyA',
                avatar: 'https://placeimg.com/140/140/any',
            },
        },
    ]);
}, [])
Войти в полноэкранный режим Выйти из полноэкранного режима

Наконец, замените отрисованное представление компонентом GiftedChat:

return (
    <GiftedChat
        backgroundColor={isDarkMode ? Colors.black : Colors.white}
        messages={messages}
        onSend={messages => onSend(messages)}
        user={{
            _id: 1,
        }}
    />
)
Войти в полноэкранный режим Выйти из полноэкранного режима

После внесения вышеуказанных изменений React Native использует свои функции горячей перезагрузки и отразит изменения на вашем экране.

Настройка приложения на консоли Firebase
Теперь давайте подключим это приложение к Firebase. Чтобы настроить это, войдите в свой аккаунт Firebase и создайте новый проект с помощью карточки Add project. Введите название проекта, а затем нажмите Продолжить. Не стесняйтесь включить или отключить Google Analytics на следующем шаге, а затем нажмите Продолжить.

Когда ваш проект будет готов, снова нажмите Продолжить, чтобы перейти на приборную панель проекта. На этой приборной панели создайте приложение Android, используя значок Android, присутствующий на приборной панели проекта.

В разделе Имя пакета Android введите имя пакета вашего приложения. Вы можете получить это имя пакета в файле /android/app/src/main/AndroidManifest.xml. Наконец, нажмите кнопку Register app, загрузите файл google-services.json и поместите его в каталог android/app/ вашего проекта.

Настройка Firebase Cloud Messaging в приложении React Native
Чтобы подключить наше React Native приложение к Firebase, мы должны настроить приложение с учетными данными Firebase.

В android/build.gradle добавьте следующий classpath внутри тегов buildscripts/dependencies:

classpath 'com.google.gms:google-services:4.3.10'
Войти в полноэкранный режим Выйти из полноэкранного режима

В файле /android/app/build.gradle добавьте плагин google-services прямо под apply plugin: «com.android.application» :

apply plugin: 'com.google.gms.google-services'
Войти в полноэкранный режим Выйти из полноэкранного режима

Далее установите React Native Firebase следующим образом:

npm i --save @react-native-firebase/messaging
Войти в полноэкранный режим Выйти из полноэкранного режима

Эти настройки готовы. Теперь давайте разберемся, как React Native будет использовать FCM для отправки сообщений чата.

Обработка уведомлений о сообщениях на переднем плане
Сначала создайте обработчик событий для обработки уведомлений о сообщениях переднего плана. Обработчик будет получать входящее сообщение, структурировать его, добавлять в состояние сообщения и выводить оповещение.

Перейдите в файл App.js и импортируйте React Native Firebase:

import messaging from '@react-native-firebase/messaging';
Вход в полноэкранный режим Выход из полноэкранного режима

В разделе App() добавьте хук useEffect(), который будет слушать любые изменения в состоянии сообщений:

useEffect(() => {
}, [messages]);
Вход в полноэкранный режим Выход из полноэкранного режима

Внутри useEffect() добавьте обработчик событий для прослушивания уведомлений:

// Get the notification message
const subscribe = messaging().onMessage(async remoteMessage => {

    // Get the message body
    let message_body = remoteMessage.notification.body;

    // Get the message title
    let message_title = remoteMessage.notification.title;

    // Get message image
    let avatar = remoteMessage.notification.android.imageUrl;

    // Append the message to the current messages state
    setMessages(messages => GiftedChat.append(messages, {
        _id: Math.round(Math.random() * 1000000),
        text: message_body,
        createdAt: new Date(),
        user: {
            _id: 2,
            name: "PartyB",
            avatar: avatar,
        },
    }));

    // Show an alert to the user
    Alert.alert(message_title, message_body);
});

return subscribe;
Вход в полноэкранный режим Выход из полноэкранного режима

Чтобы проверить это, перейдите в консоль Firebase приложения, которое вы создали в предыдущем шаге. На левой боковой панели, в разделе Engage, нажмите Cloud messaging. Затем нажмите кнопку Отправить первое сообщение.

В открывшейся форме:

Введите любое название (например, «test») Под текстом уведомления.
Введите «Hello there!» в поле «Изображение уведомления
Вставьте любой адрес изображения, который вам нравится, или используйте это изображение стакана воды.
Нажмите кнопку Далее
Теперь в разделе Цель нажмите Выбрать приложение, а затем выберите ваше приложение. На следующем шаге нажмите Далее, а затем Обзор. В появившемся всплывающем окне нажмите Опубликовать.

Работа с фоновыми уведомлениями о сообщениях
Фоновые уведомления о сообщениях работают, когда приложение закрыто. Как и в случае с фоновыми уведомлениями, мы добавим обработчик.

Чтобы добавить обработчик, внесите следующие изменения в App.js перед App():

// Register background handler
// Get the notification
messaging().setBackgroundMessageHandler(async remoteMessage => {
    // Extract the body
    let message_body = remoteMessage.notification.body;
    // Extract the title
    let message_title = remoteMessage.notification.title;
    // Extract the notification image 
    let avatar = remoteMessage.notification.android.imageUrl;

    // Add the notification to the messages array
    setMessages(messages => GiftedChat.append(messages, {
        _id: Math.round(Math.random() * 1000000),
        text: message_body,
        createdAt: new Date(),
        user: {
            _id: 2,
            name: "PartyB",
            avatar: avatar,
        },
    }));

    // Send a notification alert
    Alert.alert(message_title, message_body);
});
Войти в полноэкранный режим Выйти из полноэкранного режима

Для проверки функциональности необходимо закрыть приложение, затем отправить уведомление из консоли, как в предыдущем разделе.

Вы должны получить такое уведомление, как показано ниже, на панели push-уведомлений вашего телефона.


Заключение
Уведомления крайне важны для современных мобильных приложений. Надеюсь, это руководство помогло вам освоить важный навык добавления push-уведомлений в приложения React Native. Как мы видели, Firebase Cloud Messaging и React Native Firebase делают этот процесс бесшовным и очень простым.

Оцените статью
devanswers.ru
Добавить комментарий