Android上的React Native Push通知集成指南

15 分

android上的react native推送通知介绍本指南将教您如何使用parse向您的react native应用程序发送推送通知。您将设置firebase并配置您的back4app应用程序，通过仪表板和cloud code函数发送通知。您可以随时访问我们github仓库中使用本教程构建的完整android项目 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 了解如何在back4app上部署云函数 https //www back4app com/docs/get started/cloud functions 一个活跃的google账户，以便您可以使用google firebase。目标从 parse 向 android 上的 react native 应用程序发送推送通知，使用 back4app 的仪表板和云代码功能。 1 设置 firebase firebase 是在 android 上发送和接收推送通知最常用的服务提供商。如今，许多公司都在使用它，以及其他各种工具。让我们按照此文档 https //firebase google com/docs/android/setup#console 的第 1 和第 2 步为您的应用创建一个 firebase 项目。创建应用后，在退出 firebase 控制台之前，请确保下载并保存文件 google services json，并转到项目设置，在“云消息传递”选项卡上检索以下密钥：服务器密钥；发送者 id。 2 在 back4app 上启用推送通知要将您的 firebase 项目与 back4app 连接并通过您的仪表板和云代码启用推送通知，请按照以下步骤操作：访问 back4app 网站 https //www back4app com/ , 登录，找到您的应用并点击 \服务器设置\ 找到“android 推送通知”块并点击 \设置\ > \编辑\ 。 “android 推送通知”块看起来是这样的 3\ 将 firebase \服务器密钥\ 添加到 \api 密钥\ 字段，并将 \发送者 id\ 添加到 \gcm 发送者 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\ ，包含你应用程序的默认通知通道 id（我们以 \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 处理推送通知让我们创建一个与推送通知相关的新方法文件，名为 \pushnotificationmethods js\ （或 \pushnotificationmethods tsx\ )，并添加以下函数，该函数负责初始化 \react native push notification\ ，创建通知通道，并设置 parse 以识别我们设备的推送配置： 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 通过仪表板发送推送通知我们现在准备向我们的应用程序发送第一个推送通知。请按照以下步骤通过 back4app 的仪表板发送推送消息：访问 back4app 网站 https //www back4app com/ , 登录，找到您的应用程序并点击 \仪表板\ 点击 \推送\ > \发送新推送\ 并为您的推送通知创建受众 3\ 写下您的消息，并通过点击 \android\ 选项查看预览 4\ 如果您已经查看了推送通知并且想要发送它，请点击 \发送推送\ 您可以在 \parse dashboard\ 中探索推送通知的其他选项。在那里，您还可以查看 \过去的推送\ 您发送的和您为其创建的 \受众\ 6 通过云代码发送推送通知使用云函数入门指南 https //www back4app com/docs/get started/cloud functions , 您可以将可重用的方法从前端分离，并通过主密钥完全控制所有后端资源。让我们使用云代码函数发送推送消息。首先，创建一个名为 \sendpush\ 的云函数，该函数调用 \parse push send\ 方法。选择哪些用户将接收通知有两种方法：查询 \parse installation\ 类或通过通知频道名称。在android应用中，使用频道来区分用户更为常见，因此我们使用它。在继续之前，请确保在back4app上部署此函数。开源文档请查看开源文档 https //docs parseplatform org/js/guide/#sending options 以获取有关 \发送\ 方法的更多详细信息。 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 } 请注意，允许用户自己触发推送通知的情况并不常见，我们在这里使用它只是为了展示如何简单地将推送通知发送与 parse 集成。结论在本指南的最后，您学习了如何使用 parse 向您的 android 上的 react native 应用程序发送推送通知。在下一个指南中，您将学习如何在 ios 上发送它们。