Вы когда-нибудь задумывались об уведомлениях, которые мы получаем от установленных нами приложений? или Как Свигги или Зомато своими креативными уведомлениями провоцируют нас заказывать еду в 3 часа ночи? ?

Давайте углубимся в концепцию уведомлений!

Что такое уведомления?

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

Теперь может быть два типа уведомлений, как показано ниже -

Push-уведомление

Push-уведомления — это сообщения или оповещения, отправляемые с сервера приложению, когда приложение не работает активно на переднем плане. Они в основном используются для вовлечения пользователей путем отправки обновлений, напоминаний или персонализированного контента. Push-уведомления доставляются через службы операционной системы, такие как Apple Push Notification Service (APNs) для iOS или Firebase Cloud Messaging (FCM) для Android.

Как работает push-уведомление:

1. Регистрация: когда приложение устанавливается или впервые открывается, оно запрашивает уникальный токен устройства у службы push-уведомлений ОС (APN или FCM).
2. Связь с сервером: приложение отправляет этот токен на внутренний сервер приложения, который сохраняет его для будущего использования.
3. Отправка уведомлений: сервер отправляет полезную нагрузку уведомления (содержащую заголовок, сообщение, кнопки действий и т. д.) в службу push-уведомлений (APN/FCM) с токеном устройства.
4. Доставка: служба push-уведомлений доставляет сообщение на соответствующее устройство, даже если приложение не запущено.

Уведомление в приложении

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

Как работает уведомление в приложении:

1. Триггер по событию: когда внутри приложения происходит определенное событие (например, достижение пользователем контрольной точки или функция, требующая внимания), приложение может активировать уведомление внутри приложения.
2. Отображение: уведомление отображается в виде баннера, модального окна или всплывающего окна в пользовательском интерфейсе приложения, помогая пользователю или информируя его о событии.
3. Пользовательская логика: уведомления в приложении обрабатываются непосредственно кодом приложения и могут отображаться динамически в зависимости от внутреннего состояния или логики приложения.

Реализация в приложении React Native для Android:

Теперь, когда мы знаем об уведомлениях и их типах, пришло время реализовать эту функцию в вашем собственном нативном приложении React. Это руководство предназначено для реализации только push-уведомлений в собственном приложении React для Android. Если вы хотите использовать уведомления для iOS или в приложении, напишите комментарий, и я обязательно опубликую его!

Для начала мы будем использовать сторонний сервис под названием OneSignal. Недавно я наткнулся на эту платформу и был шокирован услугами, которые они предлагают.

О OneSignal:

OneSignal — это служба push-уведомлений, которая позволяет разработчикам приложений отправлять целевые уведомления пользователям на различных платформах, включая мобильные приложения, веб-сайты и электронную почту. Он поддерживает push-уведомления, уведомления в приложениях и веб-уведомления, предоставляя такие функции, как сегментация, автоматизация, A/B-тестирование и аналитика в реальном времени. OneSignal широко используется для повышения вовлеченности и удержания пользователей, предлагая простое в интеграции решение для отправки персонализированных сообщений. Их уровень бесплатного пользования включает 10 000 бесплатных рассылок по электронной почте в месяц, неограниченное количество мобильных push-отправок, рабочие процессы Journeys, соответствие GDPR, A/B-тестирование

Вернемся к руководству, поскольку мы уже знаем, что push-уведомления требуют обработки на стороне сервера через FCM (Firebase Cloud Messaging), поэтому необходимо выполнить несколько шагов:

1. Настройте проект Firebase (проигнорируйте первые два шага, если у вас уже есть проект Firebase):

   • Перейдите в консоль Firebase и войдите в свою учетную запись.
   • Создайте проект отсюда и следуйте инструкциям.
   • После создания проекта перейдите к настройкам проекта на боковой панели.
   • Перейдите к сервисным аккаунтам на панели, и это должно выглядеть так
   • Нажмите Сгенерировать новый закрытый ключ и будет загружен файл json, бережно сохраните его в безопасном месте, он понадобится нам при настройке OneSignal.

2. Настроить OneSignal

   • Перейдите в OneSignal и создайте учетную запись.
   • После создания учетной записи пройдите этапы настройки и создайте организацию, и теперь вы увидите страницу для добавления приложений.
   • На этой странице укажите название вашего приложения и выберите Google Android (FCM) для нашего случая. и нажмите Настроить платформу
   • Теперь вы будете перенаправлены на эту страницу, где мы будем использовать json-файл сервисной учетной записи, загруженный во время настройки Firebase. Загрузите json, а затем Сохранить и продолжить
   • На следующей странице выберите React Native/Expo в качестве целевого SDK, а затем снова Сохранить и продолжить
   • На следующем экране вы увидите свой Идентификатор приложения, это конфиденциальный идентификатор, и используя этот идентификатор, любой может вызвать уведомление в вашем приложении, поэтому будьте осторожны с этим секретом.

Мы закончили настройку в Firebase и OneSignal, теперь осталось только немного Кофе с кодом

Добавьте OneSignal в свое приложение и настройте его.

• Шаг 1. Добавьте OneSignal в свое приложение, сначала выполнив эту команду.

                       npm i react-native-onesignal

• Шаг 2. В index.js, App.tsx или App.js, в зависимости от того, что является корнем вашего проекта, импортируйте OneSignal.

             import { OneSignal } from 'react-native-onesignal';

и вы должны добавить этот фрагмент кода для инициализации OneSignal

                    OneSignal.initialize('YOUR_APP_ID');

Вы можете обернуть это внутри хука useEffect для плавной интеграции и подключения к OneSignal.

При этом устройство будет инициализировано с использованием уникального идентификатора OneSignal, и вы сможете проверить это в подписках на боковой панели. Каждое инициализируемое устройство будет идентифицировано этим уникальным OneSignal ID и вы можете установить его вручную, если у вас уже есть пользователи с собственными уникальными идентификаторами, используя этот фрагмент кода:

                         OneSignal.login(userId)

Как только пользователь успешно подпишется, он отобразится на панели управления следующим образом

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

• Шаг 3. Добавьте этот фрагмент кода в файл android\app\build.gradle.

dependencies{
...
implementation('com.onesignal:OneSignal:[3.15.4, 3.99.99]')
...
}

• Шаг 4. В Android для предоставления необходимых разрешений для push-уведомлений в android\app\src\main\AndroidManifest.xml добавьте

прямо перед тегом приложения. Однако разрешение INTERNET не является обязательным, поскольку оно может быть включено по умолчанию.

Бум? Описаны все шаги по реализации push-уведомлений, и вы можете отправить тестовое уведомление из самой панели OneSignal.

Попробуйте сами, а если есть сомнения, оставьте комментарий ниже. Следуйте за более подробными руководствами!

Ссылки:
https://documentation.onesignal.com/docs/react-native-sdk-setup
https://documentation.onesignal.com/reference/push-notification
https://medium.com/tribalscale/mobile-push-notifications-implementation-in-react-native-with-one-signal-4e810dddd350

Удачного программирования!?‍?