首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在Firebase中跟踪推送通知(使用react-native-fcm)

Firebase是一种由Google提供的云计算平台,它提供了一系列的工具和服务,用于开发和托管移动应用、网站和后端服务。其中,Firebase Cloud Messaging(FCM)是Firebase平台的一项功能,用于实现推送通知功能。

在使用Firebase中跟踪推送通知时,可以借助react-native-fcm这个库来简化开发过程。react-native-fcm是一个用于React Native应用的Firebase Cloud Messaging库,它提供了一些API和方法,用于处理推送通知的注册、接收和处理。

具体步骤如下:

  1. 首先,确保已经在Firebase控制台中创建了项目,并且已经集成了Firebase SDK到React Native应用中。
  2. 安装react-native-fcm库,可以使用npm或者yarn进行安装。
代码语言:txt
复制

npm install react-native-fcm --save

代码语言:txt
复制
  1. 配置Android平台:
  • android/app/build.gradle文件中添加以下依赖:
代码语言:txt
复制
 ```
代码语言:txt
复制
 dependencies {
代码语言:txt
复制
     // ...
代码语言:txt
复制
     implementation project(':react-native-fcm')
代码语言:txt
复制
 }
代码语言:txt
复制
 ```
  • android/settings.gradle文件中添加以下内容:
代码语言:txt
复制
 ```
代码语言:txt
复制
 include ':react-native-fcm'
代码语言:txt
复制
 project(':react-native-fcm').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-fcm/android')
代码语言:txt
复制
 ```
  • android/app/src/main/java/com/{yourAppName}/MainApplication.java文件中添加以下内容:
代码语言:txt
复制
 ```java
代码语言:txt
复制
 import com.evollu.react.fcm.FIRMessagingPackage; // 添加这行
代码语言:txt
复制
 public class MainApplication extends Application implements ReactApplication {
代码语言:txt
复制
     // ...
代码语言:txt
复制
     @Override
代码语言:txt
复制
     protected List<ReactPackage> getPackages() {
代码语言:txt
复制
         return Arrays.<ReactPackage>asList(
代码语言:txt
复制
             // ...
代码语言:txt
复制
             new FIRMessagingPackage() // 添加这行
代码语言:txt
复制
         );
代码语言:txt
复制
     }
代码语言:txt
复制
 }
代码语言:txt
复制
 ```
  • android/app/src/main/AndroidManifest.xml文件中添加以下内容:
代码语言:txt
复制
 ```xml
代码语言:txt
复制
 <service
代码语言:txt
复制
     android:name="com.evollu.react.fcm.MessagingService"
代码语言:txt
复制
     android:enabled="true"
代码语言:txt
复制
     android:exported="true">
代码语言:txt
复制
     <intent-filter>
代码语言:txt
复制
         <action android:name="com.google.firebase.MESSAGING_EVENT" />
代码语言:txt
复制
     </intent-filter>
代码语言:txt
复制
 </service>
代码语言:txt
复制
 ```
  1. 配置iOS平台:
  • 在Xcode中打开项目,找到AppDelegate.m文件,在文件头部添加以下内容:
代码语言:txt
复制
 ```objective-c
代码语言:txt
复制
 #import "RNFIRMessaging.h" // 添加这行
代码语言:txt
复制
 ```
  • AppDelegate.m文件中添加以下内容:
代码语言:txt
复制
 ```objective-c
代码语言:txt
复制
 // 添加这段代码
代码语言:txt
复制
 - (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo fetchCompletionHandler:(void (^)(UIBackgroundFetchResult))completionHandler {
     [[NSNotificationCenter defaultCenter] postNotificationName:FCMNotificationReceived object:self userInfo:userInfo];
     completionHandler(UIBackgroundFetchResultNoData);
 }
 ```
  • AppDelegate.m文件中的didFinishLaunchingWithOptions方法中添加以下内容:
代码语言:txt
复制
 ```objective-c
代码语言:txt
复制
 // 添加这段代码
代码语言:txt
复制
 [[UNUserNotificationCenter currentNotificationCenter] setDelegate:self];
代码语言:txt
复制
 [FIRApp configure];
代码语言:txt
复制
 [[RNFIRMessaging instance] setShouldEstablishDirectChannel:YES];
代码语言:txt
复制
 ```
  • AppDelegate.m文件中的didRegisterForRemoteNotificationsWithDeviceToken方法中添加以下内容:
代码语言:txt
复制
 ```objective-c
代码语言:txt
复制
 // 添加这段代码
代码语言:txt
复制
 [[RNFIRMessaging instance] setAPNSToken:deviceToken];
代码语言:txt
复制
 ```
  1. 在React Native代码中使用react-native-fcm库提供的API来注册、接收和处理推送通知。
  • 导入react-native-fcm库:
代码语言:txt
复制
 ```javascript
代码语言:txt
复制
 import FCM from 'react-native-fcm';
代码语言:txt
复制
 ```
  • 注册推送通知:
代码语言:txt
复制
 ```javascript
代码语言:txt
复制
 FCM.requestPermissions(); // 请求推送通知权限
代码语言:txt
复制
 FCM.getFCMToken().then(token => {
代码语言:txt
复制
     // 在这里可以获取到设备的FCM令牌
代码语言:txt
复制
 });
代码语言:txt
复制
 FCM.subscribeToTopic('topic'); // 订阅主题
代码语言:txt
复制
 ```
  • 接收和处理推送通知:
代码语言:txt
复制
 ```javascript
代码语言:txt
复制
 FCM.on(FCMEvent.Notification, async (notif) => {
代码语言:txt
复制
     // 在这里处理接收到的推送通知
代码语言:txt
复制
 });
代码语言:txt
复制
 ```

以上是使用react-native-fcm库在Firebase中跟踪推送通知的基本步骤。通过这个库,可以方便地实现推送通知功能,并且可以根据具体的业务需求进行个性化定制。

推荐的腾讯云相关产品:腾讯云移动推送(TPNS)。腾讯云移动推送是腾讯云提供的一项推送服务,可以帮助开发者实现移动应用的消息推送功能。它具有高可靠性、高并发、低延迟的特点,支持多种推送方式和多种推送场景。您可以通过以下链接了解更多关于腾讯云移动推送的信息:腾讯云移动推送

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

React应用实现Web推送通知

custom-sw.js'const swUrl =`$ {process.env.PUBLIC_URL} / $ {swFileName}`; 现在让我们创建的一个服务人员的公共文件夹,将听取推事件和显示通知...event.notification.close(); event.waitUntil( clients.openWindow(href) ); }); 现在,您喜欢的浏览器启用启用...如果我们决定保留它们并只添加我们的推送功能,则需要对构建过程进行一些修改。CRA中有用于服务人员构建的工作箱。而且,即使您的目的只是添加一些自定义代码,也没有内置的方法可以对其进行修改。...首先,添加一个新的depenendecy: yarn add cra-append-sw 之后,我们需要在package.json扩展build-script,在其中添加一个新命令,该命令main进程之后执行...如果您想使用户烦恼很多次,请首先显示带有订阅要约的自定义对话框。并且只有在用户同意的情况下,才显示真实的。

3.1K30

如何使用 OpenTracing TCM 实现异步消息调用跟踪

背景 在上一篇文章《Istio 最佳实践系列:如何实现方法级调用跟踪,我们通过一个网上商店的示例程序学习了如何使用 OpenTracing Istio 服务网格传递分布式调用跟踪的上下文,以及如何将方法级的调用信息加入到...本篇文章,我将继续利用 eshop demo 程序来探讨如何通过 OpenTracing 将 Kafka 异步消息也纳入到 Istio 的分布式调用跟踪。...eshop 微服务调用 inventory,billing,delivery 服务后,发送了一个 kafka 消息通知,consumer 接收到通知后调用 notification 服务的REST接口向用户发送购买成功的邮件通知...然后打开 TCM 的界面查看生成的分布式调用跟踪信息。 ? 从图中可以看到,调用链增加了两个 Span,分布对应于Kafka消息发送和接收的两个操作。...对于 JAVA 应用程序,我们可以使用 OpenTracing Instrumentation 来代替应用编码传递分布式跟踪的相关http header,以减少对业务代码的影响;我们还可以将方法级的调用跟踪

2.6K40
  • 使用KanikoKubernetes集群快速构建推送容器镜像

    kaniko 执行器镜像负责从 Dockerfile 构建镜像并将其推送到注册表,其流程大致如下: 首先在执行者图像,我们提取基础镜像的文件系统(Dockerfile 的 FROM 镜像)。...执行命令之前 kaniko 会检查层的缓存,如果存在 kaniko将拉取并提取缓存层,而不是执行命令。如果没有 kaniko将执行命令,然后将新创建的层推送到缓存。...小试牛刀之在Kubernetes集群构建并发布镜像 描述: 此处我们准备一个K8S集群中使用kaniko提供的镜像,按照提供的Dockerfile指令进行镜像构建,并上传到 docker hub 仓库...小试牛刀之在Docker中使用kaniko构建并发布镜像 描述:前面说到kaniko的出现实际是为了没有docker环境的情况之下,按照 Dockerfile 文件的指令进行镜像构建,不过此处还是简单的介绍一下...步骤 05.当然我们也可以安装有docker环境中使用上下文使用标准输入,并采用docker进行创建kaniko-executor容器,从标准输入接收dockerfile文件并进行镜像构建与推送

    3.9K20

    APP消息推送方案调研

    由于通知栏消息的低功耗和高到达率特点,推送服务更推荐您使用通知栏消息。...使用GCM推送服务的whatsapp即使后台程序和服务都关闭掉,也依然可以第一时间接收到新消息的推送(实测国内whatsapp也的确可以在后台关闭的情况下正常通过GCM接受实时消息)。...Android平台使用GCM的情况下就需要将自己的服务器或是第三方推送服务提供商的服务器与设备建立一条长连接,通过长连接进行推送。...hl=zh-cn#send-messages-to-multiple-devicesFirebase Admin SDK中发送消息时使用的registrationTokens是设备端生成的Firebase...获取Firebase实例ID:应用使用Firebase实例ID服务来获取一个唯一的标识符。这个服务会处理令牌的生成和刷新。

    25910

    构建冷链管理物联网解决方案

    使用Cloud IoT Core,Cloud Pub / Sub,Cloud Functions,BigQuery,Firebase和Google Cloud Storage,就可以单个GCP项目中构建完整的解决方案...这是通过使用Cloud Functions处理通过Cloud IoT Core的数据并将其转发到Firebase实时数据库来实现的。...托管Google Cloud Storage的UI只需侦听Firebase密钥,并在收到新消息时自动进行更新。 警示 Cloud Pub/Sub允许Web应用将推送通知发送到设备。...当冷藏箱的温度开始升高到最佳温度以上时,可以货物损坏之前通知驾驶员将其送去维修。或者,当延迟装运时,调度员可以重新安排卡车的路线,并通知接收者,以便他们管理卡车到仓库的交接。...可以Data Studio轻松地将BigQuery设置为数据源,从而使可视化车队统计信息变得容易。 使用BigQuery,可以很容易地为特定发货、特定客户发货或整个车队生成审核跟踪

    6.9K00

    集成推送那点事-友盟Mob-FlutterFCM

    gradle 也就是 app 下的 gradle 添加对此依赖: // 友盟推送 apply from: 'UMeng_Push.gradle' 1.2 初始化友盟推送并设置通知栏点击动作 Application...设置冷却时间 避免一分钟内出现多条通知而被替换 pushAgent.muteDurationSeconds = 600 } 1.3 离线推送支持 Application 对应初始化厂商通道即可...} 很多时候我们都希望,即使用户当前未使用 App,或者说当前的 App 处于被杀死的状态,后台推送消息依然想被前台接收。...若使用一键清理,应用的channel进程被清除,将接收不到推送。通过接入托管弹窗功能,可有效防止以上情况,增加推送消息的送达率。...3.3 FCM 消息处理 app build 完善下依赖: // FCM implementation 'com.google.firebase:firebase-analytics:17.4.4

    11.4K41

    Firebase Remote Config

    应用在获取服务器端值时所使用的逻辑与获取应用内默认值时相同,因此无需编写大量代码 如需替换应用内默认值,您可以使用 Firebase 控制台或 Remote Config 后端 API 来创建与应用中使用的参数同名的参数...如果没有条件满足,则读取 Firebase 控制台设置的默认值 如果没有条件满足,且 Firebase 控制台没有设置默认值,则读不到任何参数 APP ,参数由 get 方法根据以下优先级列表返回...框,当收到回调或通知时取消 loading 框 使用此策略,建议添加超时。...务必设置应用内默认参数值,确保应用始终按预期运行 实时传播 Remote Config 更新 与远程推送相结合 步骤 APP 订阅主题(以主题的形式给部分用户发送远程通知,如果需求不区分用户群,直接发全部用户的远程通知即可...服务器推送通知,携带信息包含提示让用户更新 Remote Config 状态的信息 客户端设置 Remote Config 状态 接收到推送通知后,设置本地现有 Remote Config 为旧版

    59510

    FCM---Android系统级推送---你还在用第三方推送

    如果您希望在后台进行接收应用通知之外的任何消息处理,则必须添加此服务。要在前台应用接收通知、接收数据负载以及发送上游消息等,您必须扩展此服务。...这些服务器从一个应用服务器获取消息,并将其发送至设备上运行的客户端应用。Google 为 HTTP 和 XMPP 提供连接服务器。 2、一台应用服务器,您必须在您的环境实现它。...您可以发送带有预定义字段的通知消息或自定义数据消息;请参阅消息负载通知和数据,了解关于负载支持的详细信息。本页的示例用于说明如何通过 HTTP协议发送数据消息。...通知 要发送通知,可设置 notification 键并针对通知消息的用户可见部分设置必要的预定义键选项集。 例如,这是 IM 应用的 JSON 格式的通知消息。...数据包的 notification 键包含通知

    12.7K30

    Android Firebase 服务简介

    早在2014年,谷歌收购了Firebase,这主要是一种面向应用程序开发人员的数据库。Firebase基本上向广大的应用程序开发人员提供不同的服务,比如存储、消息传递、通知和身份验证等服务。... Firebase console ,可通过项目获取测试结果,包括日志、视频和屏幕截图。...三、增长 通知Firebase Notifications) 细分受众,轻松管理推送信息 索引(Firebase App Indexing) Firebase App Indexing(其前身为 Google...,有针对性地开展广告活动,使用 Firebase Analytics 目标设备吸引您的用户群 三、FirebaseAndroid的应用 打开最新的Android studio可以看到系统为我们集成了...首先Android要使用Firebase,Android需安装Google Repository,然后点击Tools > Firebase打开Assistant窗口,选择展开的功能列表的一项功能(例如

    22.7K90

    Google无视用户隐私设置,暗中收集Android位置数据

    据谷歌发言人的说法,在过去的11个月里,谷歌用来管理安卓手机上推送通知的系统,已经包含了基站地址数据。...Google发言人在一封电子邮件中表示:“今年一月,我们就开始考虑使用Cell ID来进一步提高消息推送速度。...尽管关于单个基站的位置信息只能提供移动设备实际位置的近似值,但是相关公司可以使用多个基站进行多点定位,使用此方法时,城市精度会极大提高,因为城市里的基站更加密集。...,且默认情况下Firebase云消息服务是安卓手机上自动运行的。...Google可以使用精确的位置来跟踪和判断用户,例如,判断使用安卓手机或运行Google应用的用户是否已经涉足特定的商店,如果是,就推送广告。 相关阅读:实时追踪上百万个手机是种怎样的体验

    1.8K60

    做什么样的软件系列之Firebase

    让app开发者把精力集中app开发 写一个应用如果是app,很少是单机应用,需要后台开发,但是app开发者时常没有这样的精力。...我使用firebase的时候发现公司后端开发开发的很多功能和firebase是基本重合的。登陆注册,数据统计,存储,接口开发,等等。firebase涵盖了大部分app与后端的基础功能。...firebase其实就是这样一个引路人,通过firebase的功能我们能熟悉一个前端或一个后端开发的工作。用户认证模块,数据存储模块,通知推送模块,广告模块,数据统计模块 崩溃收集模块,云控模块。...通过firebase熟悉app开发,后端开发 在学习的过程可以找一些开源的baas平台源码验证自己的想法和学习。...firebase现在存在的模块都有那些意义? 如何开发firebase现在存在的这些模块? 如何更好的改进firebase的这些模块? 。。。。

    4.4K40

    2017——国外SDK发展趋势

    增长排名前 100 的 SDK 包括了提供推送通知服务的 OneSignal、用于移动后端的 Realm 和应用程序性能管理平台 New Relic。...另外,Firebase、HockeyApp 和 Facebook 是可以免费使用的。...例如,你可以应用嵌入 Vungle、Chartboost 和 AdColony,然后通过 AdMob 中介来选择收入最多的那个广告。...Urban Airship 早在 2009 年就推出了推送通知 SDK,开发者大量采用推送通知却是在数年之后。尽管 beacon 的增长比预期慢,但或许它的发展轨迹会与推送通知类似。...作为开发者,或许可以考虑应用程序嵌入协同位置(incorporating location),因为你的同僚们很快也会这么做,越多人使用这项技术,就会有越多的人会习惯于这种使用体验。 4.

    6.2K60

    SSE(Server-sent events)技术web端消息推送和实时聊天使用

    是基于http协议,和WebSocket的全双工通道(web端和服务端相互通信)相比,SSE只是单通道(服务端主动推送数据到web端),但正是由于此特性,不需要客户端频繁发送消息给服务端,客户端却需要实时或频繁显示服务端数据的业务场景可以使用...web端消息推送功能,由于传统的http协议需要客户端主动发送请求,服务端才会响应;基本的ajax轮寻技术便是如此,但是此方法需要前端不停的发送ajax请求给后端服务,无论后端是否更新都要执行相应的查询...SSE,浏览器发送一个请求给服务端,通过响应头中的Content-Type:text/event-stream;等 向客户端证明这是一个长连接,发送的是流数据,这时客户端不会关闭连接,一直等待服务端发送数据...官方给出的flask_sse 文档,使用 gunicorn(wsgi协议的一个容器,和uWSGI一样的功能) + gevent 作为异步功能的服务器。...https://github.com/Rgcsh/sse_chait 坑点: 1.uWSGI配置时,sse_chait.ini配置文件,socket参数是给搭建nginx+uWSGI服务时用的,http

    5.1K90

    我们能用云函数做什么?

    Firebase以独特的方式使用云函数来满足其独特需求,典型运用的领域: 当发生了一些新奇有趣的事情通知用户 执行实时的数据库清理和维护 云上执行密集的任务,而不是本地的应用程序上 与第三方的服务和...一、当发生了一些新奇有趣的事情通知用户 开发人员可以使用云函数来保持与用户之间的联系和获取最新的有关应用程序的相关信息。 比如,一些社交网站或应用上(如微博)。...在这样的程序,由实时数据库触发的写入功能以存储新的关注者可以创建Firebase的云消息通知,让用户知道他们的粉丝数又增加了。...下面是它的工作原理图: 该函数在对实时的数据库路径写入了相关信息,存储粉丝 该函数通过向FCM(Google的推送服务)发送消息 FCM向用户的设备发送通知消息 YingJoy 其它通知的用例 向订阅...YingJoy 其他实时数据库清理和维护用例 从实时数据库清除已删除用户的账户信息 限制数据库的子节点数 跟踪实时数据库列表的元素数量 将文本转换为表情符号 管理数据库记录的计算元数据 三、云上执行密集的任务

    16.8K40

    FireBase 亲密接触

    其旨在为移动和Web应用提供后端云服务,包括云端数据/文件存储、账户管理、消息推送、社交媒体整合等。国内比较出名的厂商有友盟、BMob等,国外就 Firebase 名气比较大。...Crash Reporting:我们发布应用之后接收关于稳定性问题的可操作信息。 Notifications:轻松管理通知活动。安排和发送消息,以便在最适当的时间吸引合适的用户。...App Indexing:通过 Google 搜索结果显示相关应用内内容,帮助用户发现和再次使用您的应用。...使用与宣传相结合,以增加吸引率和留存率。 AdWords:将 AdWords 自动链接至您在 Firebase Analytics 定义的用户区段。改进广告目标并优化您的广告系列效果。...包名可以 Modile 目录下的 build.gradle 中找到 ? 我们可以使用 gradle 来获取获取签名,双击有变选项卡的 signingReport 生成签名。 ?

    15.9K00

    Firebase In-App Messaging 应用内消息

    什么是应用内消息 借助 Firebase In-App Messaging,可以向应用的活跃用户发送有针对性、且符合情景的消息来鼓励他们使用关键应用功能,从而吸引这些用户。...iOS、Android、flutter 相关处理,详情可见 In-App Messaging 用途 通过 Firebase 控制台可以修改消息的样式、定位和推送时间 Firebase In-App Messaging...Snip20230915_21.png 定位特定用户 根据特定受众群体的行为、语言、互动度等信息来定位消息 Snip20230915_23.png 宣传活动的名称:用于宣传活动报告,不会显示消息...宣传活动说明:用于宣传活动报告,不会显示消息 可以定义多维度多角度的受众群体 应用内消息还支持多语言 Snip20230915_24.png 时间安排 Snip20230915_25.png 定义事件范围...使用链接处理程序 可以使用 Firebase Dynamic Links。

    37910

    iOS-UITextField 全面解析iOSUITextField 使用全面解析UITextField的代理方法通知UITextField storyboard 设置属性

    iOSUITextField 使用全面解析 建议收藏,用到的时候来这里一查就都明白了 //初始化textfield并设置位置及大小 UITextField *text = [[UITextField...//这对于想要加入撤销选项的应用程序特别有用 //可以跟踪字段内所做的最后一次修改,也可以对所有编辑做日志记录,用作审计用途。...UITextField派生自UIControl,所以UIControl类通知系统文本字段也可以使用。...因为文本字段要使用键盘输入文字,所以下面这些事件发生时,也会发送动作通知 UIKeyboardWillShowNotification  //键盘显示之前发送 UIKeyboardDidShowNotification...2、Placeholder : 可以文本框显示灰色的字,用于提示用户应该在这个文本框输入什么内容。当这个文本框输入了数据时,用于提示的灰色的字将会自动消失。

    7.2K60

    【移动开发】市面上主流「移动推送服务」的体验比较

    个推同样整合了多种服务,包括推送、统计、用户画像、短信等,但奇怪的是个推不同服务之间应用是割裂的,比如说推送服务创建的应用在其他服务不可见。...,在这些厂商下的手机推送更加可靠; 支持添加通知样式,添加样式后,只需要通过样式 ID 即可使用对应的样式来进行推送。...); 初始化或者启动推送; 腾讯的移动开发平台这方面的体验会更好(其实也是和 firebase 的交互更加一致): 控制台上创建应用。...开发文档 推送服务具体可以参见这里 功能介绍上,极光、友盟、个推基本上都是糅杂一个文档,看起来稍微有点费力,这里腾讯移动开发平台上的推送文档按照功能点对文档进行了拆解,将如快速入门、推送消息等功能拆分到不同的文档...当然,极光、友盟和个推各自的控制台也有自己的特点,风格也各不相同: 极光: 极光.jpg 友盟: 转存.jpg 个推: 奇怪的是个推不同服务之间应用是割裂的,比如说推送服务创建的应用在其他服务不可见

    8.5K70
    领券