Перейти к основному содержимому

Push-уведомления с помощью AWS Amplify

Push-уведомления играют важную роль в любом приложении. Это может значительно увеличить взаимодействие с пользователями.

Push Notifications

Настройка push-уведомлений с нуля может быть немного сложной. К счастью, Amplify предоставляет услуги push-уведомлений и SDK для наших приложений. В этом уроке мы узнаем, как интегрировать в наше приложение этот сервис.

Step01

Создаем новый проект ⚛️#

npx react-native init amplifyPush
cd amplifyPush

В корневой директории проекта React Native инициализируем AWS Amplify

amplify init

Отвечаем на вопросы:

Initialize Amplify

Проект инициализацировался 🚀

Ставим зависимости:#

npm install --save aws-amplify @aws-amplify/pushnotification @react-native-community/netinfo

Cвязываем зависимость push-уведомлений с помощью команды:

react-native link @aws-amplify/pushnotification
info

Связывание пакетов с использованием ссылки react-native link стало излишним c версии React-Native 0.60.0. Autolink был добавлен в интерфейс командной строки React-Native, что означает, что iOS теперь будет использовать cocoapods, а Android - gradle. Вы можете узнать больше об авто связывании здесь.

Step02

Android - Настройка Firebase#

  1. Откройте Firebase консоль.
  2. Откройте или создайте новый проект для дальнейших действий.
  3. Выберите Cloud Messaging на панели инструментов.

Cloud Messaging

  1. Нажмите на Android и выполните следующие действия:
  • Заполните форму и зарегистрируйте приложение. Android package name можно найти в android/app/build.gradle. Хранится в applicationId выглядеть так:
   gradle title="android/app/build.gradle"     defaultConfig {       applicationId "com.amplifypush"   }
  • Загрузите файл конфигурации на android/app и следуйте предложенной инструкции.

  • Добавьте Firebase SDK. Рассмотрим <project> android и <app-module> app

    каталог в react native проект. Не забудьте добавить последнюю версию firebase-messaging отсюда в dependencies

  • Запустите проект в Android и вы увидите, подтверждение от Firebase. (вы можете пропустить этот шаг).

  1. Открыйте android/app/src/main/AndroidManifest.xml и добавьте следующий код в application:
<!--[START Push notification config -->        <!-- [START firebase_service] -->        <service            android:name="com.amazonaws.amplify.pushnotification.RNPushNotificationMessagingService">            <intent-filter>                <action android:name="com.google.firebase.MESSAGING_EVENT"/>            </intent-filter>        </service>        <!-- [END firebase_service] -->        <!-- [START firebase_iid_service] -->        <service            android:name="com.amazonaws.amplify.pushnotification.RNPushNotificationDeviceIDService">            <intent-filter>                <action android:name="com.google.firebase.INSTANCE_ID_EVENT"/>            </intent-filter>        </service>        <receiver            android:name="com.amazonaws.amplify.pushnotification.modules.RNPushNotificationBroadcastReceiver"            android:exported="false" >            <intent-filter>                <action android:name="com.amazonaws.amplify.pushnotification.NOTIFICATION_OPENED"/>            </intent-filter>        </receiver>    <!-- [END Push notification config -->

Step03

Настройка Amplify для FCM#

  1. Добавьте службу push-уведомлений с помощью следующей команды в каталоге проекта:
 amplify add notifications
  1. Выберите FCM:
 ? Choose the push notification channel to enable. APNS ❯ FCM Email SMS
  1. Введите точное имя ресурса (или просто нажмите ввод, не заполняя ничего).
  2. У вас спросят ApiKey. Для этого вам необходимо выполнить следующие шаги:
  • Откройте Firebase консоль и откройте приложение, которое вы создали на предыдущих шагах.
  • Нажмите на значок в разделе Project Overview на панели инструментов и выберите Project settings. Настройки проекта
  • Выберите вкладку Cloud Messaging и скопируйте значение Server key. Настройки проекта
  1. Вставьте запрошенный значения для ApiKey.
  2. После завершения настройки запустите amplify push.

Step04

iOS - Настройка#

  1. Устанавливаем @react-native-community/push-notification-ios:
npm install --save @react-native-community/push-notification-ios
  1. Выполните следующую команду для iOS:
  cd ios && pod install && cd ..
  1. Добавьте уведомления iOS командой amplify add notifications :

    1. Выбирайте APNS:
  ? Choose the push notification channel to enable.    > APNS    FCM    Email    SMS
  1. Затем вам будет предложено ввести метод аутентификации. Рекомендуется выбрать сертификат.

    ? Choose authentication method used for APNs (Use arrow keys)> CertificateKey
  2. Если вы выбрали сертификат, вам будет предложено указать путь к сертификату .p12. (Вы можете использовать этот туториал).

  3. Запустите amplify push.

  4. Откройте .xcworkspace с помощью XCode.

  5. Выберите проект и выберите название проекта в разделе TARGETS. Выберите Signing & Capabilities и нажмите + передCapability. Выберите Background Mode - Remote Notifications.

Step05

Настройка приложения#

Как было сказано ранее, Analytics должна быть интегрирована вместе с уведомлениями. Это поможет отследить уведомления. Хотя можно использовать пользовательские свойства, рекомендуется использовать файл aws-exports.

В App.js добавьте следующую конфигурацию:

...import Amplify from 'aws-amplify'import PushNotification from '@aws-amplify/pushnotification'import awsconfig from './aws-exports'
Amplify.configure(awsconfig)
PushNotification.configure(awsconfig)...

Step06

Working with API#

Обычно мы хотим отправлять push-уведомления конкретным пользователям для различных целей. API предоставляет нам различные методы для обработки наших пользователей и push-уведомлений.

onRegister#

Каждое устройство может быть распознано с помощью push-токена, с помощью которого вы можете указать устройство, для которого вы хотите получить push-уведомление. Когда пользователь открывает приложение в первый 🥇 раз, выдвинутый токен извлекается и сохраняется на устройстве. Вы должны знать о том, что этот метод может быть вызван снова в будущем, поэтому вы должны быть готовы к этой ситуации, чтобы обновить свои данные в соответствии с ним.

Вы можете добавить следующий код в App.js:

PushNotification.onRegister(token => {  console.log('in app registration', token)  PushNotification.updateEndpoint(token)})

attention: В Android может быть проблема, что этот метод никогда не будет вызван! Однако обходной путь может быть таким везде, где вам может понадобиться токен:

...import {NativeModules} from 'react-native'...NativeModules.RNPushNotification.getToken((token) => {  console.log(`PushToken: ${token}`)})...

onNotification#

Если вы хотите что-то сделать, когда уведомление получено, метод onNotification для действий на основе полученного уведомления. Не забывайте, что структура объектов уведомлений отличается от Android и iOS. В iOS, Вам следует использовать метод finish. Вы можете добавить следующий код в App.js:

...import PushNotificationIOS from '@react-native-community/push-notification-ios'...PushNotification.onNotification((notification) => {  console.log('in app notification', notification)  if (Platform.OS === 'ios') {    notification.finish(PushNotificationIOS.FetchResult.NoData)  }})

onNotificationOpened#

Распространенный сценарий - когда пользователь открывает push-уведомление, вызывается onNotificationOpened. App.js выглядет так:

PushNotification.onNotificationOpened(notification => {  console.log('the notification is opened', notification)})

requestIOSPermissions#

Push-уведомление работает только на реальном устройстве и не будет получать никаких уведомлений, если конечный пользователь не даст разрешение. requestIOSPermissions нужен для получения этого разрешения. Он может быть вызван без каких-либо параметров, или вы можете настроить объект следующим образом:

PushNotification.requestIOSPermissions()// orPushNotification.requestIOSPermissions({  alert: true,  badge: true,  sound: false})

Step07

Тестирование#

Прежде всего, мы хотим взглянуть на файл App.js.

import React from 'react'import { SafeAreaView, Platform, Text, NativeModules } from 'react-native'
import PushNotificationIOS from '@react-native-community/push-notification-ios'import Analytics from '@aws-amplify/analytics'import Amplify from 'aws-amplify'import PushNotification from '@aws-amplify/pushnotification'import awsconfig from './aws-exports'
Amplify.configure(awsconfig)PushNotification.configure(awsconfig)
PushNotification.onRegister(async token => {  console.log('in app registration', token)  PushNotification.updateEndpoint(token)})
// In case PushNotification.onRegister didn't workNativeModules.RNPushNotification.getToken(token => {  console.log(`PushToken: ${token}`)})
PushNotification.onNotification(notification => {  console.log('in app notification', notification)  if (Platform.OS === 'ios') {    notification.finish(PushNotificationIOS.FetchResult.NoData)  }})
PushNotification.onNotificationOpened(notification => {  console.log('the notification is opened', notification)})
const endpointId = Analytics.getPluggable('AWSPinpoint')._config.endpointIdconsole.log(`endpoint ID: ${endpointId}`)
if (Platform.OS === 'ios') {  PushNotification.requestIOSPermissions()}
const App: () => React$Node = () => {  return (    <SafeAreaView>      <Text>Push Notification</Text>    </SafeAreaView>  )}
export default App

Запускаем проект:

react-native run-android
react-native run-ios

Чтобы идти дальше, нам нужен один из endpoint ID или Push Token. Подробно объяснено тут endpoint в aws услугах:

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

Push Token это уникальный идентификатор, который генерируется и присваивается отGCM(Android) или APNS(iOS) к вашему приложению в конкретном устройстве.

Наиболее очевидное различие между этими двумя заключается в том, что endpoint генерируется из aws, и определяет приложение в устройстве независимо от платформы (iOS / Android). Но токен в зависимости от платформы генерируется либо от Apple или Google.

Мы используем console.log для копирования и сохраняем эти ключи для следующих шагов. Перейдите в режим разработки и скопируйте в консоль следующие значения:

Tokens

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

  1. Выполните следующую команду в корне проекта:
amplify notification console
  1. Консоль приложения будет автоматически открыта в браузере.
  2. Выберите Test messaging в левой боковой панели:

Test messaging

  1. В разделе Channel , выберите Push notifications.

  2. Раздел Destinations выглядит следующим образом: Destinations

  3. Destination type определяет, хотите ли вы использовать Endpoint IDs или Device Tokens(или Push token в предыдущих шагах) в следующем вводе текста.

  4. Вставьте токен, который хотите использовать, на основе Destination type.

  5. Если вы выбрали Endpoint IDs и использовали конечную точку, то Служба push-уведомлений может автоматически обнаружить ваше устройство. В противном случае, если вы использовали Device token, для IOS выберите APNS, а для Android - FCM.

  6. Вы можете заполнить раздел Message, как показано ниже, и нажать кнопку Send message. Destinations

  7. Вы получите сообщение об успехе, как показано ниже. Success Через пару секунд Вы увидите push-уведомление на своем устройстве: Push notification result

Done ✅#

Проблемы?#

Problem

Пишите в Discord или телеграмм чат, а также подписывайтесь на наши новости

JavaScript Camp

Ссылки:#

Amplify Docs

Setting up Android Push Notifications with AWS Amplify

Testing Push Notifications with AWS Amplify & CLI

Become a Patron!