Реагируйте на нативные push-уведомления с помощью Firebase 2020

Обновлено 26 мая 2020 г.

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

В этом руководстве мы собираемся внедрить Push-уведомления в мобильном приложении React Native, наш сервер уведомлений будет находиться в Firebase для простоты использования, но вы можете использовать свою собственную систему.

Сначала создайте проект в консоли Google Firebase.

Также создайте свой проект React Native и войдите в его каталог.
react-native init RNPushNotifications

Добавление Firebase в ваше приложение

Зарегистрируйте свое приложение в Firebase и следуйте инструкциям по настройке для Android и iOS.
Загрузите свой GoogleService-Info.plist и google-services.json. Не забудьте поместить их в правильную папку для каждой платформы.

Андроид:

iOS:

Добавьте и свяжите пакет React Native Firebase с вашим приложением.

yarn add @react-native-firebase/app
yarn add @react-native-firebase/messaging
cd ios ; pod install ; cd ..

Следуйте инструкциям по установке последней версии здесь:

Андроид: https://rnfirebase.io/#2-android-настройка
iOS:

Создание сертификата APNS для push-уведомлений iOS

На iOS вам необходимо сгенерировать сертификат APNS, чтобы получать push-уведомления.
Служба push-уведомлений Apple (обычно называемая службой уведомлений Apple или APNS) — это служба платформы, созданная Apple Inc., которая позволяет сторонним разработчикам приложений отправлять push-уведомления пользователям iOS. Для создания сертификатов у вас должна быть платная учетная запись разработчика Apple.

• Войдите в учетную запись разработчика Apple и нажмите «Сертификаты, идентификаторы и профили».
  (https://developer.apple.com/)

• Выберите «Идентификаторы» из левого меню.

• Щелкните значок плюса (+) над центральным списком.

• Выберите «Идентификаторы приложений» из вариантов выбора.

• Заполните свое описание, идентификатор пакета и выберите «Push-уведомления» из вариантов.

• Подтвердите свои данные и нажмите «Зарегистрироваться»

Генерация сертификата из Keychain Access

• Запустите приложение «Связка ключей» в Mac OS X и выберите «Доступ к цепочке ключей» -> «Помощник по сертификатам» -> «Запросить сертификат в центре сертификации».

• Введите адрес электронной почты и установите флажок «Сохранено на диск», затем нажмите «Продолжить».

Создать сертификат разработки

• Вернитесь к учетной записи разработчика, выберите приложение из идентификаторов приложений и нажмите на него, чтобы изменить.

• Прокрутите вниз до Push-уведомлений и нажмите «Настроить».

• В разделе «Разработка SSL-сертификата» нажмите «Создать сертификат».

• Выберите файл, созданный на предыдущем шаге, и нажмите «Продолжить».

• Загрузите сертификат разработки, чтобы завершить процесс

Создайте сертификат APNS .p12

• Дважды щелкните Сертификат разработки, созданный на предыдущем шаге, чтобы добавить его в Keychain Access. Перейдите в раздел «Связка ключей», выберите «Связка ключей для входа» и «Мой сертификат» в боковом меню. Найдите сертификат приложения и щелкните правой кнопкой мыши, чтобы экспортировать его.

• Введите имя сертификата и нажмите Сохранить

• Введите пароль для сертификата и нажмите OK

• Введите пароль администратора вашего компьютера, чтобы завершить процесс

Это все шаги по созданию сертификата разработки, теперь мы продолжаем добавлять PushNotifications в наше приложение.

Конфигурация проекта iOS

В Xcode перейдите к настройкам вашего проекта, в разделе «Пение» и «Возможности» добавьте эти два:

iOS предотвращает отображение сообщений, содержащих полезные данные уведомлений (или «предупреждений»), если вы не получили явное разрешение от пользователя.

Этот модуль предоставляет метод requestPermission, который запускает собственный диалог разрешений, запрашивающий разрешение пользователя:

import messaging from '@react-native-firebase/messaging';
...
useEffect(() => {
    requestUserPermission();
   }, []);

  requestUserPermission = async () => {
    const authStatus = await messaging().requestPermission();
    const enabled =
      authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
      authStatus === messaging.AuthorizationStatus.PROVISIONAL;

    if (enabled) {
      console.log('Authorization status:', authStatus);
    }
  }
...

API разрешений для iOS обеспечивает гораздо более точный контроль над разрешениями и тем, как они обрабатываются в вашем приложении. Чтобы узнать больше, просмотрите расширенную документацию по разрешениям iOS.

На Android вам не нужно запрашивать разрешение пользователя. Этот метод по-прежнему можно вызывать на устройствах Android; тем не менее, и всегда будет успешно разрешаться.

Внедрение токенов FCM в ваше приложение

Давайте перейдем к нашему App.js и добавим немного кода.

После того, как все настроено и настроено для Android и iOS (в Xcode), теперь нам нужно реализовать push-уведомление FCM на стороне React Native с помощью модуля React Native Firebase. Просто откройте и отредактируйте App.js затем добавьте или измените эти импорты Firebase, React Hooks useEffect и React Native Alert.

import React, {Fragment,useEffect} from "react";
import {
 SafeAreaView,
 StyleSheet,
 ScrollView,
 View,
 Text,
 StatusBar,
 Alert
} from "react-native";
import firebase from "react-native-firebase";

Измените метод, запускающий проверку разрешений.

  requestUserPermission = async () => {
    const authStatus = await messaging().requestPermission();
    const enabled =
      authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
      authStatus === messaging.AuthorizationStatus.PROVISIONAL;

    if (enabled) {
      getFcmToken() //<---- Add this
      console.log('Authorization status:', authStatus);
    }
  }

Добавьте функцию для получения токена FCM из Firebase и показа токена React Native Alert.

  getFcmToken = async () => {
    const fcmToken = await messaging().getToken();
    if (fcmToken) {
     console.log(fcmToken);
     console.log("Your Firebase Token is:", fcmToken);
    } else {
     console.log("Failed", "No token received");
    }
  }

После правильной настройки мы можем протестировать прямо из консоли firebase:

• Перейдите к опции Cloud Messaging на левой панели.
• Нажмите «Отправить первое сообщение».
• Введите тестовый текст, выберите приложение Android, в которое вы хотите отправить приложение, и нажмите «Отправить».

Вы можете использовать токен FCM для проверки своих уведомлений.

В консоли вы увидите токен FCM, вы можете скопировать и вставить его в консоль Firebase для своих тестов.

Кликните, чтобы посмотреть видео

Другие функции

Сообщения о состоянии переднего плана

Чтобы прослушивать сообщения на переднем плане, вызовите метод onMessage внутри кода вашего приложения. Код, выполняемый через этот обработчик, имеет доступ к контексту React и может взаимодействовать с вашим приложением (например, обновлять состояние или пользовательский интерфейс).

Например, React Native Alert API можно использовать для отображения нового оповещения каждый раз, когда доставляется сообщение.

import { Alert } from 'react-native';
...
  useEffect(() => {
    requestUserPermission();
    const unsubscribe = messaging().onMessage(async remoteMessage => {
      Alert.alert('A new FCM message arrived!', JSON.stringify(remoteMessage));
    });

    return unsubscribe;
   }, []);
...

Свойство remoteMessage содержит всю информацию о сообщении, отправленном на устройство из FCM, включая любые пользовательские данные (через свойство данных) и данные уведомления. Чтобы узнать больше, просмотрите справочник по API RemoteMessage.

Если полезная нагрузка RemoteMessage содержит свойство уведомления при отправке обработчику onMessage, устройство не будет показывать никаких уведомлений пользователю. Вместо этого вы можете активировать локальное уведомление или обновить пользовательский интерфейс в приложении, чтобы сигнализировать о новом уведомлении.

Пожалуйста, ознакомьтесь с их использованием для фоновых уведомлений здесь

Теперь вы можете отправлять push-уведомления в зависимости от платформы приложения, устройств, дат регистрации и т. д. В Google Firebase есть множество вариантов отправки этих уведомлений.