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

OneSignal и Push API вашего браузера

Мобильный push-API дает мобильным приложениям возможность получать сообщения с сервера независимо от того, находится ли приложение на переднем плане. Это позволяет вам доставлять асинхронные уведомления и обновления пользователям, которые подписались, что приводит к лучшему взаимодействию со своевременным новым контентом.

В этом руководстве рассказывается, как интегрировать новый React Native Expo OneSignal Plugin, чтобы добавить мобильные push-уведомления в ваше приложение, используя наш стандартный процесс установки. Первая часть этого руководства посвящена процессу настройки OneSignal. Во второй части этого руководства рассказывается, как интегрировать OneSignal с React с помощью нашего пакета npm.

Обзор руководства

Для этого руководства требуются базовые знания React Native (Expo). Я использую Expo CLI для создания своего проекта и NodeJS версии 14.16. Дополнительный ответ

Дополнительные ресурсы по настройке:

Часть 1. Настройка учетной записи OneSignal

Для начала войдите в свою учетную запись OneSignal или создайте бесплатную учетную запись. Затем нажмите синюю кнопку под названием _ Новое приложение/веб-сайт _, чтобы настроить свою учетную запись OneSignal в соответствии с вашим приложением или веб-сайтом.

Введите название вашего приложения или веб-сайта. Выберите _ Google Android _ в качестве платформы.

Нажмите синюю кнопку под названием _ Далее: Настройте свою платформу _.

Конфигурация Google Android FCM

Пришло время настроить ваше приложение для Android с помощью ключа Firebase Server. Все приложения Android требуют этот ключ и идентификатор сервера для отправки push-уведомлений. Если у вас нет ключей API сервера Firebase, ознакомьтесь с нашей документацией, чтобы узнать, как сгенерировать ключ API сервера Firebase.

Теперь выберите целевой SDK. Далее в этом руководстве мы расскажем вам, как получить первого пользователя и отправить первое тестовое уведомление.

На следующем появившемся экране вы увидите свой идентификатор приложения — скопируйте этот идентификатор приложения, потому что вы будете использовать его внутри своего приложения Expo. НЕ НАЖИМАЙТЕ кнопку Проверить подписанных пользователей или Готово.

Часть 2. Настройка push-уведомлений в React Native Expo

Создайте свое приложение React Native

Внутри вашего терминала выполните следующие команды, чтобы создать новый проект React, используя Create.

Приложение Экспо:

expo init onesignal-rn-expo

При появлении запроса выберите любой из параметров в разделе Управляемый рабочий процесс. В моем случае я выбрал первый вариант, пустой.

cd onesignal-rn-expo
expo start

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

Установите плагин OneSignal Expo

В папке вашего проекта откройте терминал и выполните следующую команду, чтобы установить пакет OneSignal Expo Plugin.

expo install onesignal-expo-plugin

После установки плагина signal-expo установите плагин react-native-onesignal, выполнив следующую команду.

yarn add react-native-onesignal

Несмотря на то, что onesignal-expo-plugin определяет react-native-onesignal как зависимость, и она помещается в node_module, это обеспечит сборку нативных частей.

Если вы забыли выполнить следующую команду после сборки проекта, вы можете исправить это, запустив expo prebuild — clean. Это должно удалить android и ios и сделать чистую нативную сборку, а затем запустить пряжу add react-native-onesignal.

Настроить плагин

Внутри файла app.json/app.config.js добавьте плагин в массив плагинов:

App.json

{
    "plugins": [
    	[
    		"onesignal-expo-plugin",
    		{
            	"mode": "development",
            	"devTeam": "91SW8A37CR"
            }
    	]
    ]
}

or

App.config.js

export default {
...
    plugins: [
        [
            "onesignal-expo-plugin",
            {
                mode: process.env.NODE_ENV || "development",
                devTeam: "91SW8A37CR"
            }
        ]
    ]
};

Опции плагина:

  • mode: используется для настройки права APNs environment.
  • "development"
  • "production"
  • devTeam: *необязательный* — используется для настройки Apple Team ID. Вы можете найти свой Apple Team ID, запустив expo credentials:manager.

Пример:

{
    "extra": {
    	"oneSignalAppId": "<YOUR APP ID HERE>"
	}
}

Затем вы можете получить доступ к значению для передачи функции setAppId:

import OneSignal from 'react-native-onesignal';
import Constants from "expo-constants";
OneSignal.setAppId(Constants.manifest.extra.oneSignalAppId);

Либо передайте идентификатор приложения OneSignal непосредственно в функцию:

OneSignal.setAppId("YOUR-ONESIGNAL-APP-ID");

Запустите и создайте свое приложение

expo prebuild
# Build your native iOS project
$ expo run:ios
# Build your native Android project
expo run:android

Отправляйте push-уведомления на устройства Android

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

После подключения к устройству и включения режима разработчика запустите приложение на своем устройстве, выбрав свое устройство в качестве целевого устройства. В моем примере я запускаю приложение на Google Pixel 5.

Как только вы откроете приложение на своем устройстве, оно автоматически подпишется на уведомление. Теперь ваше устройство сможет получать уведомления, отправленные OneSignal.

Чтобы завершить процесс настройки, вернитесь на панель инструментов OneSignal к точке, на которой вы остановились ранее. Нажмите на _ Проверить подписанных пользователей _, и появится зеленое сообщение, как на изображении ниже.

Нажмите на кнопку _ Готово _.

Отправьте свое первое уведомление

Пришло время отправить ваше первое push-уведомление! Для этого войдите в свою учетную запись OneSignal и перейдите на вкладку _ Dashboard _. На странице панели инструментов нажмите синюю кнопку с надписью _ New Push _.

Примечание. Уведомления включены на устройствах Android по умолчанию. Если вы отключили свои уведомления, обязательно включите их снова.

Вы будете перенаправлены в новое окно, которое позволит вам настроить push-уведомление. В разделе _ Аудитория _ убедитесь, что выбран параметр _ Отправить пользователям с подпиской _. Затем создайте свое сообщение, добавив заголовок сообщения, содержание и изображение. Поскольку это первое уведомление, которое получат ваши подписчики, вы можете создать простое приветственное сообщение, чтобы подтвердить, что они подписались, и усилить ценность уведомлений.

В разделе _ Расписание доставки _ выберите _ Немедленно _ и _ Отправить всем одновременно _, чтобы отправить всем вашим текущим push-подписчикам. Если вы только что закончили настройку своей учетной записи OneSignal, скорее всего, вы первый и единственный подписчик. Если ваше приложение или веб-сайт активно посещаются, а другие пользователи уже включили получение push-уведомлений, вы можете выбрать Отправить в определенные сегменты, чтобы протестировать свое сообщение на определенной аудитории. Когда вы будете готовы отправить сообщение, нажмите синюю кнопку _ Проверить и отправить _ в нижней части экрана.

Появится небольшое всплывающее окно, чтобы вы могли просмотреть свое сообщение. Когда вы будете удовлетворены, нажмите синюю кнопку _ Отправить сообщение _. Вы должны получить push-уведомление на своем устройстве! 🚀

Теперь вы можете продолжать расширять свой код, чтобы использовать различные функции OneSignal SDK в приложении Expo, минуя переменную OneSignal для разных компонентов.

Чтобы узнать больше о подключаемом модуле OneSignal Expo, посетите нашу документацию по React Native (Expo) push SDK.

Присоединяйтесь к нашему сообществу разработчиков

Чтобы быть в курсе последних обновлений продуктов и инноваций, подписывайтесь на OneSignal Developers Twitter и присоединяйтесь к нашему Discord серверу. Узнайте больше о сообществе разработчиков OneSignal и о том, как оставаться на связи, перейдя по ссылке ниже.

›› Узнайте о сообществе разработчиков OneSignal

Добавить файл

Обновить секретную сутьОтмена