Отправка push-уведомлений в Android через Parse в React Native

17min
Push-уведомления для React Native на Android
Введение
Этот гид научит вас, как использовать Parse для отправки push-уведомлений в ваше приложение React Native на Android. Вы настроите Firebase и сконфигурируете ваше приложение Back4App для их отправки через панель управления и функции Cloud Code.
В любое время вы можете получить доступ к полному проекту Android, созданному с помощью этого руководства, в наших репозиториях на Github
﻿Репозиторий примера на JavaScript﻿
﻿Репозиторий примера на TypeScript﻿
Предварительные требования
Чтобы завершить это руководство, вам потребуется:
Приложение React Native, созданное и подключенное к Back4App.
Понимание того, как развернуть облачную функцию на Back4App.
Активная учетная запись в Google, чтобы вы могли использовать Google Firebase.
Цель
Отправка push-уведомлений из Parse в приложение React Native на Android с использованием панели управления Back4App и функций Cloud Code.
- Настройка Firebase
Firebase является наиболее используемым поставщиком услуг для отправки и получения push-уведомлений на Android. В настоящее время его используют широкий круг компаний вместе с другими различными инструментами. Давайте начнем с создания проекта Firebase для вашего приложения, следуя шагам 1 и 2 из этой документации.
После создания вашего приложения и перед выходом из консоли Firebase убедитесь, что вы скачали и сохранили файл google-services.json, а также перейдите в настройки проекта, на вкладке “Cloud Messaging” и получите следующие ключи:
Ключ сервера;
ID отправителя.
﻿
- Включение push-уведомлений на Back4App
Чтобы связать ваш проект Firebase с Back4App и включить отправку push-уведомлений через вашу панель управления и Cloud Code, выполните следующие шаги:
Перейдите на сайт Back4App, войдите в систему, найдите ваше приложение и нажмите на Настройки сервера.
Найдите блок “Android Push notification” и нажмите на НАСТРОЙКИ > ИЗМЕНИТЬ. Блок “Android Push notification” выглядит так:
﻿
Добавьте ключ FirebaseServer Key в полеAPI Key иSender ID в полеGCM Sender ID.
﻿
Сохраните это, и вы закончили.
- Установка и настройка зависимостей
В вашем проекте React Native давайте установим библиотеку react-native-push-notification, которая интегрирует приложение с Firebase и позволяет вам обрабатывать любые полученные уведомления. Выполните следующую команду в корневом каталоге вашего проекта:
yarn add react-native-push-notification
После установки вам также нужно добавить некоторые конфигурации в android/app/src/main/AndroidManifest.xml, android/build.gradle и android/app/build.gradle в соответствии с библиотекой документация.
Убедитесь, что вы также добавили в файл AndroidManifest.xml meta-data с идентификатором канала уведомлений по умолчанию для вашего приложения (давайте используем guideChannel в качестве нашего примера). Вы можете добавить имя непосредственно в директиву или включить его в файл strings.xml. Также поместите файл google-services.json вашего проекта в каталог android/app.
XML
<meta-data
     android:name="com.google.firebase.messaging.default_notification_channel_id"
     android:value="guideChannel" />
 <!-- OR -->
 <meta-data
     android:name="com.google.firebase.messaging.default_notification_channel_id"
     android:value="@string/default_notification_channel_id" />
<meta-data
     android:name="com.google.firebase.messaging.default_notification_channel_id"
     android:value="guideChannel" />
 <!-- OR -->
 <meta-data
     android:name="com.google.firebase.messaging.default_notification_channel_id"
     android:value="@string/default_notification_channel_id" />
﻿
На следующем шаге мы узнаем, как использовать эту библиотеку и комбинировать ее с Parse.
- Обработка Push-уведомлений
Давайте создадим файл с новыми методами, связанными с push-уведомлениями, под названием PushNotificationMethods.js (или PushNotificationMethods.tsx) и добавим следующую функцию, которая отвечает за инициализацию react-native-push-notification, создание канала уведомлений и настройку Parse для распознавания конфигурации push на нашем устройстве:
JavaScript
TypeScript
import PushNotification from 'react-native-push-notification';
import Parse from 'parse/react-native';

const channelId = 'guideChannel';

export async function configurePushNotifications() {
 // Initialize PushNotification
 await PushNotification.configure({
   // (required) Called when a remote is received or opened, or local notification is opened
   onNotification: function (notification) {
     // process the notification
     console.log('NOTIFICATION:', notification);
     // If notification is remote and has data, trigger local notification to show popup.
     // This is needed for Parse sent notifications because Firebase doesn't trigger popup
     // notifications with data by itself
     if (
       notification.data !== undefined &&
       notification.data.data !== undefined
     ) {
       try {
         // Notification data comes as a stringified JSON, so parsing is needed
         const notificationData = JSON.parse(notification.data.data);
         // JSON Parse notifications from the dashboard and Cloud Code
         // should contain the default `title` and `message` parameters
         let title = 'Notification Title';
         if (notificationData.title !== undefined) {
           title = notificationData.title;
         }
         let message = 'Noticiation Message';
         if (notificationData.message !== undefined) {
           message = notificationData.message;
         }
         // Text Parse notifications from the dashboard only have an `alert` parameter
         if (notificationData.alert !== undefined) {
           message = notificationData.alert;
         }
         PushNotification.localNotification({
           channelId: channelId,
           title: title,
           message: message,
         });
       } catch (error) {
         console.log(`Error triggering local notification ${error}`);
       }
     }
   },

   onRegister: async function (token) {
     console.log(`Registered with device token ${token.token}`);
     let deviceToken = token.token;

     // Create the notification channel, required for Android notifications
     await PushNotification.createChannel({
       channelId: channelId,
       channelName: 'Guide channel',
     });
     console.log('Notification channel created!');

     // Create a Parse Installation, that will link our application's push notification
     // to the Parse server
     try {
       const installationId = await Parse._getInstallationId();
       const Installation = new Parse.Installation();
       // Make sure to change any needed value from the following
       Installation.set('deviceType', 'android');
       Installation.set('GCMSenderId', 'YOUR_GCM_SENDER_ID');
       Installation.set('pushType', 'gcm');
       Installation.set('appIdentifier', 'YOUR_APP_IDENTIFIER(PACKAGE_NAME)');
       Installation.set('parseVersion', '3.2.0');
       Installation.set('appName', 'Back4AppGuidePushNotifications');
       Installation.set('appVersion', '1.0');
       Installation.set('localeIdentifier', 'pt-BR');
       Installation.set('badge', 0); // Set initial notification badge number
       Installation.set('timeZone', 'America/Sao_Paulo');
       Installation.set('installationId', installationId);
       Installation.set('channels', [channelId]);
       Installation.set('deviceToken', deviceToken);
       await Installation.save();
       console.log(`Created new Parse Installation ${Installation}`);
     } catch (error) {
       console.log(error.message);
     }
   },
   popInitialNotification: true,
   requestPermissions: true,
 });
}
import PushNotification from 'react-native-push-notification';
import Parse from 'parse/react-native';

const channelId = 'guideChannel';

export async function configurePushNotifications() {
 // Initialize PushNotification
 await PushNotification.configure({
   // (required) Called when a remote is received or opened, or local notification is opened
   onNotification: function (notification) {
     // process the notification
     console.log('NOTIFICATION:', notification);
     // If notification is remote and has data, trigger local notification to show popup.
     // This is needed for Parse sent notifications because Firebase doesn't trigger popup
     // notifications with data by itself
     if (
       notification.data !== undefined &&
       notification.data.data !== undefined
     ) {
       try {
         // Notification data comes as a stringified JSON, so parsing is needed
         const notificationData = JSON.parse(notification.data.data);
         // JSON Parse notifications from the dashboard and Cloud Code
         // should contain the default `title` and `message` parameters
         let title = 'Notification Title';
         if (notificationData.title !== undefined) {
           title = notificationData.title;
         }
         let message = 'Noticiation Message';
         if (notificationData.message !== undefined) {
           message = notificationData.message;
         }
         // Text Parse notifications from the dashboard only have an `alert` parameter
         if (notificationData.alert !== undefined) {
           message = notificationData.alert;
         }
         PushNotification.localNotification({
           channelId: channelId,
           title: title,
           message: message,
         });
       } catch (error) {
         console.log(`Error triggering local notification ${error}`);
       }
     }
   },

   onRegister: async function (token) {
     console.log(`Registered with device token ${token.token}`);
     let deviceToken = token.token;

     // Create the notification channel, required for Android notifications
     await PushNotification.createChannel({
       channelId: channelId,
       channelName: 'Guide channel',
     });
     console.log('Notification channel created!');

     // Create a Parse Installation, that will link our application's push notification
     // to the Parse server
     try {
       const installationId = await Parse._getInstallationId();
       const Installation = new Parse.Installation();
       // Make sure to change any needed value from the following
       Installation.set('deviceType', 'android');
       Installation.set('GCMSenderId', 'YOUR_GCM_SENDER_ID');
       Installation.set('pushType', 'gcm');
       Installation.set('appIdentifier', 'YOUR_APP_IDENTIFIER(PACKAGE_NAME)');
       Installation.set('parseVersion', '3.2.0');
       Installation.set('appName', 'Back4AppGuidePushNotifications');
       Installation.set('appVersion', '1.0');
       Installation.set('localeIdentifier', 'pt-BR');
       Installation.set('badge', 0); // Set initial notification badge number
       Installation.set('timeZone', 'America/Sao_Paulo');
       Installation.set('installationId', installationId);
       Installation.set('channels', [channelId]);
       Installation.set('deviceToken', deviceToken);
       await Installation.save();
       console.log(`Created new Parse Installation ${Installation}`);
     } catch (error) {
       console.log(error.message);
     }
   },
   popInitialNotification: true,
   requestPermissions: true,
 });
}
﻿
Документация с открытым исходным кодом
Больше информации о Parse.Installation классе можно найти здесь.
Обратите внимание, что обработчик событий onNotification имеет код, который вызывает локальное уведомление в приложении после получения удаленного. Parse требует этот код, потому что Firebase сам по себе не вызывает всплывающие уведомления с данными. Больше об этом и типах уведомлений Android можно прочитать здесь.
Вызовите этот configurePushNotifications метод в вашем App.js (или App.tsx) файле после инициализации Parse и перед объявлением вашего App контента.
App.js
// Other imports
// ...
import {configurePushNotifications} from './src/PushNotificationMethods';

// Your Parse initialization configuration goes here
// ...

// Initialize PushNotifications
configurePushNotifications();
// Other imports
// ...
import {configurePushNotifications} from './src/PushNotificationMethods';

// Your Parse initialization configuration goes here
// ...

// Initialize PushNotifications
configurePushNotifications();
﻿
Соберите и запустите приложение. Теперь вы можете увидеть Установку в таблице на панели управления Back4App вашего приложения с записью, соответствующей вашему приложению.
﻿
- Отправка push-уведомлений через панель управления
Теперь мы готовы отправить первое push-уведомление в наше приложение. Следуйте приведенным ниже шагам, чтобы отправить push-сообщение через панель управления Back4App:
Перейдите на Сайт Back4App, войдите в систему, найдите свое приложение и нажмите на Панель управления.
Нажмите на Push > Отправить новое push-уведомление и создайте аудиторию для вашего push-уведомления.
﻿
Напишите ваше сообщение и посмотрите предварительный просмотр, нажав на опцию Android.
﻿
Если вы уже просмотрели push-уведомление и хотите его отправить, нажмите на Отправить push.
﻿
Вы можете изучить другие варианты для Push-уведомлений на Parse Dashboard.
Там также можно посмотреть на Прошлые Push-уведомления которые вы отправили и на Аудитории которые вы создали для них.
- Отправка Push-уведомлений через Cloud Code
Используя руководство по началу работы с облачными функциями, вы можете отделить повторно используемые методы от вашего фронтенда и получить полный контроль над всеми вашими ресурсами бэкенда через мастер-ключ.
Давайте используем функции облачного кода для отправки push-сообщения. Сначала создайте облачную функцию под названием sendPush которая вызывает метод Parse.Push.send. Существует два способа выбрать, какие пользователи получат уведомление: запрос класса Parse.Installation или через названия каналов уведомлений. В Android-приложениях чаще используют каналы для различения пользователей, поэтому давайте используем это. Убедитесь, что вы развернули эту функцию на Back4App перед тем, как продолжить.
Документация с открытым исходным кодом
Пожалуйста, проверьте документацию с открытым исходным кодом для получения дополнительной информации о методе send.
JS
Parse.Cloud.define('sendPush', async (request) => {
 try {
   await Parse.Push.send({
     channels: [ 'guideChannel' ],
     data: {
       message: 'Test message',
       title: 'Back4App Guide Notification'
     }
   }, { useMasterKey: true });
   return true;
 } catch (error) {
   return `Error: ${error}`
 }
});
Parse.Cloud.define('sendPush', async (request) => {
 try {
   await Parse.Push.send({
     channels: [ 'guideChannel' ],
     data: {
       message: 'Test message',
       title: 'Back4App Guide Notification'
     }
   }, { useMasterKey: true });
   return true;
 } catch (error) {
   return `Error: ${error}`
 }
});
﻿
Теперь давайте вызовем функцию из приложения React Native. Добавьте эту функцию в PushNotificationMethods.js (или PushNotificationMethods.tsx) файл и вызовите ее в кнопке на главном экране вашего приложения:
JS
export async function sendNotification() {
 try {
   await Parse.Cloud.run('sendPush');
   console.log('Success!');
 } catch (error: any) {
   console.log(`Error: ${error}`);
 }
}
export async function sendNotification() {
 try {
   await Parse.Cloud.run('sendPush');
   console.log('Success!');
 } catch (error: any) {
   console.log(`Error: ${error}`);
 }
}
﻿
Обратите внимание, что этот случай, когда пользователь может сам инициировать отправку push-уведомления, не является распространенным, мы использовали его здесь только для того, чтобы показать, как просто интегрировать отправку push-уведомлений с Parse.
Заключение
В конце этого руководства вы узнали, как отправлять push-уведомления с помощью Parse в ваше приложение React Native на Android. В следующем руководстве вы узнаете, как отправлять их на iOS.