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

17 мин

push уведомления для react native на android введение этот гид научит вас, как использовать parse для отправки push уведомлений в ваше приложение react native на android вы настроите firebase и сконфигурируете ваше приложение back4app для их отправки через панель управления и функции cloud code в любое время вы можете получить доступ к полному проекту android, созданному с помощью этого руководства, в наших репозиториях на github репозиторий примера на javascript https //github com/templates back4app/react native js push notifications репозиторий примера на typescript https //github com/templates back4app/react native ts push notifications предварительные требования чтобы завершить это руководство, вам потребуется приложение react native, созданное и подключенное к back4app https //www back4app com/docs/react native/parse sdk/react native sdk понимание того, как развернуть облачную функцию https //www back4app com/docs/get started/cloud functions на back4app активная учетная запись в google, чтобы вы могли использовать google firebase цель отправка push уведомлений из parse в приложение react native на android с использованием панели управления back4app и функций cloud code 1 настройка firebase firebase является наиболее используемым поставщиком услуг для отправки и получения push уведомлений на android в настоящее время его используют широкий круг компаний вместе с другими различными инструментами давайте начнем с создания проекта firebase для вашего приложения, следуя шагам 1 и 2 из этой документации https //firebase google com/docs/android/setup#console после создания вашего приложения и перед выходом из консоли firebase убедитесь, что вы скачали и сохранили файл google services json, а также перейдите в настройки проекта, на вкладке “cloud messaging” и получите следующие ключи ключ сервера; id отправителя 2 включение push уведомлений на back4app чтобы связать ваш проект firebase с back4app и включить отправку push уведомлений через вашу панель управления и cloud code, выполните следующие шаги перейдите на сайт back4app https //www back4app com/ , войдите в систему, найдите ваше приложение и нажмите на \настройки сервера\ найдите блок “android push notification” и нажмите на \настройки\ > \изменить\ блок “android push notification” выглядит так 3\ добавьте ключ firebase \server key\ в поле \api key\ и \sender id\ в поле \gcm sender id\ 4\ сохраните это, и вы закончили 3 установка и настройка зависимостей в вашем проекте 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\ в соответствии с библиотекой документация https //github com/zo0r/react native push notification убедитесь, что вы также добавили в файл \androidmanifest xml\ \meta data\ с идентификатором канала уведомлений по умолчанию для вашего приложения (давайте используем \guidechannel\ в качестве нашего примера) вы можете добавить имя непосредственно в директиву или включить его в файл \strings xml\ также поместите файл \google services json\ вашего проекта в каталог \android/app\ 1 \<meta data 2 android\ name="com google firebase messaging default notification channel id" 3 android\ value="guidechannel" /> 4 \<! or > 5 \<meta data 6 android\ name="com google firebase messaging default notification channel id" 7 android\ value="@string/default notification channel id" /> на следующем шаге мы узнаем, как использовать эту библиотеку и комбинировать ее с parse 4 обработка push уведомлений давайте создадим файл с новыми методами, связанными с push уведомлениями, под названием \pushnotificationmethods js\ (или \pushnotificationmethods tsx\ ) и добавим следующую функцию, которая отвечает за инициализацию \react native push notification\ , создание канала уведомлений и настройку parse для распознавания конфигурации push на нашем устройстве javascript 1 import pushnotification from 'react native push notification'; 2 import parse from 'parse/react native'; 3	 4 const channelid = 'guidechannel'; 5	 6 export async function configurepushnotifications() { 7 // initialize pushnotification 8 await pushnotification configure({ 9 // (required) called when a remote is received or opened, or local notification is opened 10 onnotification function (notification) { 11 // process the notification 12 console log('notification ', notification); 13 // if notification is remote and has data, trigger local notification to show popup 14 // this is needed for parse sent notifications because firebase doesn't trigger popup 15 // notifications with data by itself 16 if ( 17 notification data !== undefined && 18 notification data data !== undefined 19 ) { 20 try { 21 // notification data comes as a stringified json, so parsing is needed 22 const notificationdata = json parse(notification data data); 23 // json parse notifications from the dashboard and cloud code 24 // should contain the default `title` and `message` parameters 25 let title = 'notification title'; 26 if (notificationdata title !== undefined) { 27 title = notificationdata title; 28 } 29 let message = 'noticiation message'; 30 if (notificationdata message !== undefined) { 31 message = notificationdata message; 32 } 33 // text parse notifications from the dashboard only have an `alert` parameter 34 if (notificationdata alert !== undefined) { 35 message = notificationdata alert; 36 } 37 pushnotification localnotification({ 38 channelid channelid, 39 title title, 40 message message, 41 }); 42 } catch (error) { 43 console log(`error triggering local notification ${error}`); 44 } 45 } 46 }, 47	 48 onregister async function (token) { 49 console log(`registered with device token ${token token}`); 50 let devicetoken = token token; 51	 52 // create the notification channel, required for android notifications 53 await pushnotification createchannel({ 54 channelid channelid, 55 channelname 'guide channel', 56 }); 57 console log('notification channel created!'); 58	 59 // create a parse installation, that will link our application's push notification 60 // to the parse server 61 try { 62 const installationid = await parse getinstallationid(); 63 const installation = new parse installation(); 64 // make sure to change any needed value from the following 65 installation set('devicetype', 'android'); 66 installation set('gcmsenderid', 'your gcm sender id'); 67 installation set('pushtype', 'gcm'); 68 installation set('appidentifier', 'your app identifier(package name)'); 69 installation set('parseversion', '3 2 0'); 70 installation set('appname', 'back4appguidepushnotifications'); 71 installation set('appversion', '1 0'); 72 installation set('localeidentifier', 'pt br'); 73 installation set('badge', 0); // set initial notification badge number 74 installation set('timezone', 'america/sao paulo'); 75 installation set('installationid', installationid); 76 installation set('channels', \[channelid]); 77 installation set('devicetoken', devicetoken); 78 await installation save(); 79 console log(`created new parse installation ${installation}`); 80 } catch (error) { 81 console log(error message); 82 } 83 }, 84 popinitialnotification true, 85 requestpermissions true, 86 }); 87 }1 import pushnotification from 'react native push notification'; 2 import parse from 'parse/react native'; 3	 4 const channelid string = 'guidechannel'; 5	 6 export async function configurepushnotifications() { 7 // initialize pushnotification 8 await pushnotification configure({ 9 // (required) called when a remote is received or opened, or local notification is opened 10 onnotification function (notification object) { 11 // process the notification 12 console log('notification ', notification); 13 // if notification is remote and has data, trigger local notification to show popup 14 // this is needed for parse sent notifications because firebase doesn't trigger popup 15 // notifications with data by itself 16 if ( 17 notification data !== undefined && 18 notification data data !== undefined 19 ) { 20 try { 21 // notification data comes as a stringified json, so parsing is needed 22 const notificationdata = json parse(notification data data); 23 // json parse notifications from the dashboard and cloud code 24 // should contain the default `title` and `message` parameters 25 let title string = 'notification title'; 26 if (notificationdata title !== undefined) { 27 title = notificationdata title; 28 } 29 let message string = 'noticiation message'; 30 if (notificationdata message !== undefined) { 31 message = notificationdata message; 32 } 33 // text parse notifications from the dashboard only have an `alert` parameter 34 if (notificationdata alert !== undefined) { 35 message = notificationdata alert; 36 } 37 pushnotification localnotification({ 38 channelid channelid, 39 title title, 40 message message, 41 }); 42 } catch (error any) { 43 console log(`error triggering local notification ${error}`); 44 } 45 } 46 }, 47	 48 onregister async function (token {os string; token string}) { 49 console log(`registered with device token ${token token}`); 50 let devicetoken string = token token; 51	 52 // create the notification channel, required for android notifications 53 await pushnotification createchannel({ 54 channelid channelid, 55 channelname 'guide channel', 56 }); 57 console log('notification channel created!'); 58	 59 // create a parse installation, that will link our application's push notification 60 // to the parse server 61 try { 62 const installationid = await parse getinstallationid(); 63 const installation = new parse installation(); 64 // make sure to change any needed value from the following 65 installation set('devicetype', 'android'); 66 installation set('gcmsenderid', 'your gcm sender id'); 67 installation set('pushtype', 'gcm'); 68 installation set('appidentifier', 'your app identifier(package name)'); 69 installation set('parseversion', '3 2 0'); 70 installation set('appname', 'back4appguidepushnotifications'); 71 installation set('appversion', '1 0'); 72 installation set('localeidentifier', 'pt br'); 73 installation set('badge', 0); // set initial notification badge number 74 installation set('timezone', 'america/sao paulo'); 75 installation set('installationid', installationid); 76 installation set('channels', \[channelid]); 77 installation set('devicetoken', devicetoken); 78 await installation save(); 79 console log(`created new parse installation ${installation}`); 80 } catch (error) { 81 console log(error message); 82 } 83 }, 84 popinitialnotification true, 85 requestpermissions true, 86 }); 87 } документация с открытым исходным кодом больше информации о \parse installation\ классе можно найти здесь https //docs parseplatform org/js/guide/#push notifications обратите внимание, что обработчик событий \onnotification\ имеет код, который вызывает локальное уведомление в приложении после получения удаленного parse требует этот код, потому что firebase сам по себе не вызывает всплывающие уведомления с данными больше об этом и типах уведомлений android можно прочитать здесь https //firebase google com/docs/cloud messaging/concept options#notifications and data messages вызовите этот \configurepushnotifications\ метод в вашем \app js\ (или \app tsx\ ) файле после инициализации parse и перед объявлением вашего \app\ контента app js 1 // other imports 2 // 3 import {configurepushnotifications} from ' /src/pushnotificationmethods'; 4	 5 // your parse initialization configuration goes here 6 // 7	 8 // initialize pushnotifications 9 configurepushnotifications(); соберите и запустите приложение теперь вы можете увидеть \установку\ в таблице на панели управления back4app вашего приложения с записью, соответствующей вашему приложению 5 отправка push уведомлений через панель управления теперь мы готовы отправить первое push уведомление в наше приложение следуйте приведенным ниже шагам, чтобы отправить push сообщение через панель управления back4app перейдите на сайт back4app https //www back4app com/ , войдите в систему, найдите свое приложение и нажмите на \панель управления\ нажмите на \push\ > \отправить новое push уведомление\ и создайте аудиторию для вашего push уведомления 3\ напишите ваше сообщение и посмотрите предварительный просмотр, нажав на опцию \android\ 4\ если вы уже просмотрели push уведомление и хотите его отправить, нажмите на \отправить push\ вы можете изучить другие варианты для push уведомлений на \parse dashboard\ там также можно посмотреть на \прошлые push уведомления\ которые вы отправили и на \аудитории\ которые вы создали для них 6 отправка push уведомлений через cloud code используя руководство по началу работы с облачными функциями https //www back4app com/docs/get started/cloud functions , вы можете отделить повторно используемые методы от вашего фронтенда и получить полный контроль над всеми вашими ресурсами бэкенда через мастер ключ давайте используем функции облачного кода для отправки push сообщения сначала создайте облачную функцию под названием \sendpush\ которая вызывает метод \parse push send\ существует два способа выбрать, какие пользователи получат уведомление запрос класса \parse installation\ или через названия каналов уведомлений в android приложениях чаще используют каналы для различения пользователей, поэтому давайте используем это убедитесь, что вы развернули эту функцию на back4app перед тем, как продолжить документация с открытым исходным кодом пожалуйста, проверьте документацию с открытым исходным кодом https //docs parseplatform org/js/guide/#sending options для получения дополнительной информации о методе \send\ 1 parse cloud define('sendpush', async (request) => { 2 try { 3 await parse push send({ 4 channels \[ 'guidechannel' ], 5 data { 6 message 'test message', 7 title 'back4app guide notification' 8 } 9 }, { usemasterkey true }); 10 return true; 11 } catch (error) { 12 return `error ${error}` 13 } 14 }); теперь давайте вызовем функцию из приложения react native добавьте эту функцию в \pushnotificationmethods js\ (или \pushnotificationmethods tsx\ ) файл и вызовите ее в кнопке на главном экране вашего приложения 1 export async function sendnotification() { 2 try { 3 await parse cloud run('sendpush'); 4 console log('success!'); 5 } catch (error any) { 6 console log(`error ${error}`); 7 } 8 } обратите внимание, что этот случай, когда пользователь может сам инициировать отправку push уведомления, не является распространенным, мы использовали его здесь только для того, чтобы показать, как просто интегрировать отправку push уведомлений с parse заключение в конце этого руководства вы узнали, как отправлять push уведомления с помощью parse в ваше приложение react native на android в следующем руководстве вы узнаете, как отправлять их на ios