使用Leancloud实现React Native App的消息推送(Push Notification)- iOS篇

前言

React Native现在是越来越火,一套代码同时构建iOS、Android两种应用真的是太爽了,而且有了ES6和React的加成开发效率出奇的高。 虽然坑奇多无比但是还是阻挡不了市场对它的热爱。但是使用React Native也并非总是那么舒服,尤其涉及到需要用objective-c或者java实现某些原生功能的时候,让广大前端出生没有原生App开发经验的同学们苦不堪言,但是没有办法,硬着头皮写下去总比丢工作强。所以React Native开发者们真的是痛并快乐着,爽并纠结着。然而能力就是在这个过程中快速提高的,所以大家加油,现在只不过是黎明前的黑暗!

今天要分享的是我在React Native开发过程中征服的一个小小领域:消息推送。

其实做手机App就绕不开消息推送,没有消息推送的App就像一个没有漂亮前台的公司(就像我们公司,嘿嘿),让人没有进去看看的欲望。。怎么可能火呢。

说正经的,虽然我做完React Native版的消息推送之后发现其实也并不难,但是一路上踩过大大小小的坑、尝试过无数的解决方案,到最终大功告成还是有点小成就感的(笨人获得满足感相对比较容易)。实现React Native App的消息推送可预见的难点在于:

  1. 在众多的第三方推送服务提供商中选择哪一个最合适
  2. 需要同时实现Android和IOS两个系统的推送,需要对两个系统的推送机制都非常熟悉
  3. 哪些部分需要用原生实现,哪些需要用js实现,如何实现桥接
  4. 如何实现App在后台或者关闭(inactive)状态下的推送,又如何实现App打开(active)状态下的消息推送

结下来我就针对以上的难点,并结合实际的项目来详细分析如何实现消息推送。

选择服务提供商

市场上的推送服务提供商有很多,比如友盟、极光推送、Leancloud、个推、环信、融云等等。这么多的选择我们不可能都用过,所以应该从哪些方面去考量呢?

  1. 首先,必须支持React Native。为了验证这些第三方服务是否支持React Native,没有特别好的办法,我只能一个个的看他们的官网文档。如果文档里面都没有提到React Native那么果断放弃(有些厂商都不提供文档搜索功能,那也不建议选择,以后出问题都不好找)。
  2. 推送服务要稳定、可靠、快速,这一点不太好判断,因为大家都说自己可靠快速,所以需要实际使用后才能判断。
  3. 文档完善、清晰、准确、更新及时,能提供官方的React Native推送Demo。
  4. 价格合理(我们还是要想办法为公司省点钱滴)。

下面是我整理的一些主流的推送服务提供商的对比,可能不是那么完善和客观,欢迎纠错,没有提到的厂商不好意思啦。。

服务商 React Native支持否 文档质量 官方Demo 价格
友盟 差,放弃 未调查 未调查
极光 缺少 Demo 价格
Leancloud iOS 价格
腾讯信鸽 否(未找到相关文档) / / /
阿里云推送 否(未找到相关文档) / / /
百度云推送 否(未找到相关文档) / / /
网易云信 缺少 Demo 价格
云巴 否(未找到相关文档) / / /
个推 缺少 Demo 价格
环信 否(只支持IM) / / /
融云 否(未找到相关文档) / / /

以上所有的厂商里面只有4家是支持React Native消息推送的,BAT跟商量好了似的都不支持,难道集体看衰React Native吗?在仅有的4家厂商中,文档方面只有Leancloud一家是我觉得文档质量比较好的,其他厂商都缺少接入React Native的相关文档。个推只有一个小Demo,而且Demo的文档也很简陋,所以先排除。极光的Demo应该是做的最好的,star数最多,Demo文档看起来也写的挺好的,虽然没有明码标价,但是免费版貌似就够用了,推送次数没有上限,二十万条/秒的推送速度也够用了,做一般应用应该足够了。网易的Demo看起来也挺完善,文档也说的过去,关键是价格太贵啦,商用版1800/月。。为了只做一个推送不值得,放弃!最后Leancloud是我个人比较喜欢的,因为之前有项目用到过,不管是文档、SDK的易用性、服务的可靠性和速度还是网站的审美都可以算得上同行中的佼佼者,而且商用版30/天的价格也可以接收(30/天包含了除推送外其他更多的功能和服务)。所以总结下来,只有极光推送和Leancloud值得一用(欢迎极光和Leancloud联系我打赏,嘿嘿),由于我的个人偏好,最终选择了使用Leancloud。

消息推送概念普及

我们在实现具体项目之前还是有必要了解一下消息推送的相应机制和基本概念的,这里我就不赘述了,欢迎阅读Leancloud的 消息推送服务总览

接入Leancloud

首先我们创建一个React Native项目(本文Demo地址):

react-native init LeancloudPushDemo

并在Leancloud创建一个同名应用,开发版就好:

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
使用 `react-native-push-notification` 时,可以通过设置 `channelId` 属性来指定 Android 平台通知的渠道 ID。渠道 ID 的作用是将通知分组,使用户可以根据需要选择接收或屏蔽不同类型的通知。 要设置 `channelId` 属性,需要先创建一个通知渠道。可以使用 `PushNotification.createChannel()` 方法创建一个新的通知渠道,并指定渠道的名称、描述和其他属性。例如: ``` PushNotification.createChannel( { channelId: "my-channel-id", // 渠道 ID channelName: "My Notification Channel", // 渠道名称 channelDescription: "A channel to categorise my notifications", // 渠道描述 playSound: true, // 是否播放通知声音 soundName: "default", // 通知声音文件名称 importance: 4, // 渠道重要性(0-4) vibrate: true, // 是否震动 }, (created) => console.log(`Channel created: ${created}`) // 回调函数,用于输出渠道是否创建成功 ); ``` 在上面的示例中,我们创建了一个名为 "My Notification Channel" 的通知渠道,并设置了渠道 ID、描述、是否播放声音、声音文件名称、重要性和是否震动等属性。 创建通知渠道后,就可以在发送本地通知使用 `channelId` 属性来指定通知渠道了。例如: ``` PushNotification.localNotification({ channelId: "my-channel-id", // 指定通知渠道 ID title: "My Notification Title", message: "My Notification Message", date: new Date(Date.now() + 60 * 1000), allowWhileIdle: true, }); ``` 在上面的示例中,我们在发送本地通知使用 `channelId` 属性来指定通知渠道 ID。这样,通知就会被分配到指定的通知渠道中,便于用户管理和控制。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值