React Native推送通知集成：Firebase与APNs完整配置-优快云博客

React Native推送通知集成：Firebase与APNs完整配置

【免费下载链接】react-native 一个用于构建原生移动应用程序的 JavaScript 库，可以用于构建 iOS 和 Android 应用程序，支持多种原生移动平台，如 iOS，Android，React Native 等。项目地址: https://gitcode.com/GitHub_Trending/re/react-native

引言：移动应用的推送通知痛点与解决方案

你是否曾为React Native应用的推送通知集成而头疼？在iOS和Android平台间切换配置，处理各种设备兼容性问题，还要确保消息送达率？本文将带你从零开始，完整实现Firebase Cloud Messaging（FCM， Firebase云消息传递）和Apple Push Notification service（APNs，苹果推送通知服务）的集成方案，解决跨平台推送通知的核心痛点。

读完本文后，你将能够：

理解React Native推送通知的工作原理
配置Firebase项目并集成到React Native应用
实现iOS平台的APNs证书配置与集成
编写跨平台的推送通知处理代码
测试并解决常见的推送通知问题

推送通知工作原理概述

跨平台推送通知架构

React Native应用的推送通知需要同时支持iOS和Android两大平台，其架构如下：

mermaid

关键技术组件

Firebase Cloud Messaging (FCM)：Google提供的跨平台消息传递解决方案，支持Android、iOS和Web平台
Apple Push Notification service (APNs)：Apple提供的iOS推送通知服务
React Native推送通知库：如@react-native-firebase/messaging和react-native-push-notification等第三方库
设备令牌(Token)：每个设备唯一的标识符，用于定向发送通知

准备工作与环境配置

开发环境要求

环境要求	版本
Node.js	16.x或更高
React Native	0.75或更高
Android Studio	4.0或更高
Xcode	12.0或更高
CocoaPods	1.10.0或更高

项目初始化

如果尚未创建React Native项目，请使用以下命令创建：

npx react-native init PushNotificationDemo --template @react-native-community/template
cd PushNotificationDemo

安装必要依赖

# 安装Firebase核心和消息传递模块
npm install @react-native-firebase/app @react-native-firebase/messaging --save

# 安装iOS推送通知权限处理库
npm install react-native-permissions --save

Firebase配置与集成

创建Firebase项目

访问Firebase控制台并创建新项目
点击"添加应用"，分别为Android和iOS平台创建应用

Android平台配置

1. 下载并配置google-services.json

在Firebase控制台中，为Android应用下载google-services.json文件
将文件复制到React Native项目的android/app/目录下

2. 配置Android Gradle文件

编辑android/build.gradle文件，添加Google服务插件：

buildscript {
    repositories {
        // ...其他仓库
        google()  // 添加Google仓库
    }
    dependencies {
        // ...其他依赖
        classpath 'com.google.gms:google-services:4.3.15'  // 添加Google服务插件
    }
}

编辑android/app/build.gradle文件，应用Google服务插件：

apply plugin: "com.android.application"
apply plugin: "com.google.gms.google-services"  // 添加此行

3. 配置AndroidManifest.xml

编辑android/app/src/main/AndroidManifest.xml文件，添加必要权限和服务：

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.POST_NOTIFICATIONS" />

<application ...>
    <!-- FCM服务配置 -->
    <service
        android:name="com.google.firebase.messaging.FirebaseMessagingService"
        android:exported="false">
        <intent-filter>
            <action android:name="com.google.firebase.MESSAGING_EVENT" />
        </intent-filter>
    </service>
    
    <!-- 自定义通知渠道 -->
    <meta-data
        android:name="com.google.firebase.messaging.default_notification_channel_id"
        android:value="@string/default_notification_channel_id" />
</application>

4. 创建通知渠道（Android O及以上）

在android/app/src/main/res/values/strings.xml中添加：

<string name="default_notification_channel_id">default_channel</string>
<string name="default_notification_channel_name">Default Channel</string>

在MainActivity.java或对应的Activity文件中创建通知渠道：

import android.app.NotificationChannel;
import android.app.NotificationManager;
import android.os.Build;
import android.os.Bundle;

public class MainActivity extends ReactActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        
        // 创建通知渠道（Android O及以上）
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
            NotificationChannel channel = new NotificationChannel(
                getString(R.string.default_notification_channel_id),
                getString(R.string.default_notification_channel_name),
                NotificationManager.IMPORTANCE_DEFAULT
            );
            NotificationManager notificationManager = getSystemService(NotificationManager.class);
            notificationManager.createNotificationChannel(channel);
        }
    }
}

iOS平台APNs配置

APNs证书配置

1. 创建APNs证书

登录Apple开发者中心
进入"Certificates, Identifiers & Profiles"
为你的应用创建推送通知证书（分为开发环境和生产环境）
下载并安装证书到你的Mac

2. 在Firebase中配置APNs

在Firebase控制台中，进入项目设置
选择"Cloud Messaging"选项卡
上传APNs认证密钥（.p8文件）或证书（.p12文件）
填写密钥ID、团队ID等信息

iOS项目配置

1. 配置Podfile

编辑ios/Podfile文件，添加Firebase依赖：

target 'PushNotificationDemo' do
  config = use_native_modules!
  
  use_react_native!(
    :path => config[:reactNativePath],
    :hermes_enabled => true
  )
  
  # 添加Firebase依赖
  pod 'Firebase/Messaging', :modular_headers => true
  
  # ...其他配置
end

安装Pods：

cd ios && pod install && cd ..

2. 配置Info.plist

编辑ios/PushNotificationDemo/Info.plist文件，添加推送通知权限：

<key>UIBackgroundModes</key>
<array>
    <string>remote-notification</string>
</array>
<key>NSUserNotificationUsageDescription</key>
<string>我们需要发送通知以保持您的应用更新</string>

3. 配置AppDelegate.m

编辑ios/PushNotificationDemo/AppDelegate.m文件，添加APNs注册代码：

#import "AppDelegate.h"
#import <Firebase.h>
#import <UserNotifications/UserNotifications.h>

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  // 初始化Firebase
  [FIRApp configure];
  
  // 请求推送通知权限
  UNUserNotificationCenter *center = [UNUserNotificationCenter currentNotificationCenter];
  center.delegate = self;
  [center requestAuthorizationWithOptions:(UNAuthorizationOptionAlert | UNAuthorizationOptionSound | UNAuthorizationOptionBadge)
                        completionHandler:^(BOOL granted, NSError * _Nullable error) {
    if (!error) {
      NSLog(@"请求通知权限成功");
      dispatch_async(dispatch_get_main_queue(), ^{
        [[UIApplication sharedApplication] registerForRemoteNotifications];
      });
    }
  }];
  
  // ...其他初始化代码
  
  return YES;
}

// 注册远程通知成功回调
- (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken {
  [FIRMessaging messaging].APNSToken = deviceToken;
  NSLog(@"设备令牌: %@", deviceToken);
}

// 注册远程通知失败回调
- (void)application:(UIApplication *)application didFailToRegisterForRemoteNotificationsWithError:(NSError *)error {
  NSLog(@"注册通知失败: %@", error.localizedDescription);
}

@end

React Native推送通知实现

1. 通知权限请求

创建src/services/notificationPermissions.js文件：

import { Platform } from 'react-native';
import messaging from '@react-native-firebase/messaging';
import { requestNotifications } from 'react-native-permissions';

// 请求推送通知权限
export async function requestNotificationPermission() {
  try {
    if (Platform.OS === 'ios') {
      // iOS平台请求权限
      const authStatus = await messaging().requestPermission();
      const enabled =
        authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
        authStatus === messaging.AuthorizationStatus.PROVISIONAL;
        
      if (enabled) {
        console.log('iOS通知权限已授予');
        return true;
      }
    } else {
      // Android平台请求权限
      const result = await requestNotifications(['alert', 'sound', 'badge']);
      return result.status === 'granted';
    }
    return false;
  } catch (error) {
    console.error('请求通知权限失败:', error);
    return false;
  }
}

// 获取设备令牌
export async function getDeviceToken() {
  try {
    const token = await messaging().getToken();
    if (token) {
      console.log('设备令牌:', token);
      return token;
    }
    return null;
  } catch (error) {
    console.error('获取设备令牌失败:', error);
    return null;
  }
}

2. 通知处理服务

创建src/services/notificationService.js文件：

import messaging from '@react-native-firebase/messaging';
import { Alert } from 'react-native';

// 处理前台通知
export function setupForegroundNotificationHandler() {
  return messaging().onMessage(async remoteMessage => {
    Alert.alert(
      remoteMessage.notification.title || '新通知',
      remoteMessage.notification.body || '您有一条新消息',
      [{ text: '确定' }]
    );
    console.log('前台收到通知:', remoteMessage);
  });
}

// 处理后台通知点击
export function setupBackgroundNotificationHandler() {
  messaging().onNotificationOpenedApp(remoteMessage => {
    console.log('从后台点击通知打开应用:', remoteMessage);
    // 可以在这里导航到特定页面
  });
  
  // 处理应用未启动时点击通知
  messaging()
    .getInitialNotification()
    .then(remoteMessage => {
      if (remoteMessage) {
        console.log('应用未启动时点击通知:', remoteMessage);
        // 可以在这里导航到特定页面
      }
    });
}

// 订阅主题
export async function subscribeToTopic(topic) {
  try {
    await messaging().subscribeToTopic(topic);
    console.log(`成功订阅主题: ${topic}`);
    return true;
  } catch (error) {
    console.error(`订阅主题失败: ${topic}`, error);
    return false;
  }
}

// 取消订阅主题
export async function unsubscribeFromTopic(topic) {
  try {
    await messaging().unsubscribeFromTopic(topic);
    console.log(`成功取消订阅主题: ${topic}`);
    return true;
  } catch (error) {
    console.error(`取消订阅主题失败: ${topic}`, error);
    return false;
  }
}

3. 应用集成示例

在App.js中集成推送通知服务：

import React, { useEffect, useState } from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
import { requestNotificationPermission, getDeviceToken } from './src/services/notificationPermissions';
import { 
  setupForegroundNotificationHandler, 
  setupBackgroundNotificationHandler,
  subscribeToTopic
} from './src/services/notificationService';

const App = () => {
  const [token, setToken] = useState('');
  const [permissionGranted, setPermissionGranted] = useState(false);
  
  useEffect(() => {
    // 请求通知权限
    const requestPermission = async () => {
      const granted = await requestNotificationPermission();
      setPermissionGranted(granted);
      
      if (granted) {
        // 获取设备令牌
        const deviceToken = await getDeviceToken();
        setToken(deviceToken || '获取令牌失败');
        
        // 订阅通知主题
        await subscribeToTopic('news');
      }
    };
    
    requestPermission();
    
    // 设置前台通知处理
    const unsubscribeForeground = setupForegroundNotificationHandler();
    
    // 设置后台通知处理
    setupBackgroundNotificationHandler();
    
    return () => {
      unsubscribeForeground();
    };
  }, []);
  
  return (
    <View style={styles.container}>
      <Text style={styles.title}>React Native推送通知示例</Text>
      <Text>权限状态: {permissionGranted ? '已授予' : '未授予'}</Text>
      <Text style={styles.tokenText}>设备令牌: {token}</Text>
      <Button 
        title="再次请求权限" 
        onPress={requestNotificationPermission} 
        style={styles.button}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
    marginBottom: 20,
  },
  tokenText: {
    marginTop: 10,
    marginBottom: 20,
    textAlign: 'center',
    fontSize: 12,
    color: '#666',
  },
  button: {
    marginTop: 20,
  },
});

export default App;

测试推送通知

发送测试通知

使用Firebase控制台发送测试通知

进入Firebase控制台，选择"Cloud Messaging"
点击"发送您的第一批消息"
填写通知标题和内容
选择目标（可以是单个设备令牌、主题或用户段）
点击"发送测试消息"

使用curl命令发送测试通知

对于Android设备：

curl -X POST "https://fcm.googleapis.com/fcm/send" \
  -H "Content-Type: application/json" \
  -H "Authorization: key=YOUR_SERVER_KEY" \
  -d '{
    "to": "DEVICE_TOKEN",
    "notification": {
      "title": "测试通知",
      "body": "这是一条来自curl的测试通知"
    },
    "data": {
      "type": "test",
      "customKey": "customValue"
    }
  }'

对于iOS设备，APNs请求示例：

curl -v -d '{"aps":{"alert":"测试通知","sound":"default"}}' \
  -H "apns-topic: com.your.bundleid" \
  -H "apns-push-type: alert" \
  -H "apns-priority: 10" \
  --http2 \
  --cert /path/to/cert.pem:cert_password \
  https://api.sandbox.push.apple.com/3/device/DEVICE_TOKEN

常见测试场景

测试场景	预期结果
应用在前台	显示Alert对话框
应用在后台	显示系统通知栏通知
应用未启动	点击通知后启动应用并处理通知
设备离线	设备上线后接收通知
通知包含自定义数据	应用能正确解析并处理自定义数据

常见问题与解决方案

1. 通知无法送达

可能原因：

设备令牌获取失败或已过期
证书或密钥配置错误
网络连接问题
应用被用户禁用通知权限

解决方案：

检查设备令牌是否正确获取
重新生成并配置证书/密钥
确保设备网络连接正常
检查应用通知权限设置

2. iOS通知在后台不显示

可能原因：

APNs证书配置错误
Info.plist中未配置UIBackgroundModes
通知 payload 格式不正确

解决方案：

// 确保AppDelegate实现了UNUserNotificationCenterDelegate
- (void)userNotificationCenter:(UNUserNotificationCenter *)center 
       willPresentNotification:(UNNotification *)notification 
         withCompletionHandler:(void (^)(UNNotificationPresentationOptions))completionHandler {
  completionHandler(UNNotificationPresentationOptionAlert | UNNotificationPresentationOptionSound);
}

3. Android通知图标显示为默认图标

解决方案： 在AndroidManifest.xml中配置自定义通知图标：

<meta-data
  android:name="com.google.firebase.messaging.default_notification_icon"
  android:resource="@mipmap/ic_notification" />
<meta-data
  android:name="com.google.firebase.messaging.default_notification_color"
  android:resource="@color/notification_color" />

高级功能与最佳实践

1. 通知数据处理

对于包含自定义数据的通知，建议在应用中统一处理：

// 处理通知数据的统一方法
function handleNotificationData(data) {
  if (!data) return;
  
  switch(data.type) {
    case 'news':
      // 处理新闻类型通知
      navigateToNewsDetail(data.newsId);
      break;
    case 'message':
      // 处理消息类型通知
      navigateToChat(data.chatId);
      break;
    case 'reminder':
      // 处理提醒类型通知
      showReminderDialog(data.reminderContent);
      break;
    default:
      console.log('未知通知类型:', data.type);
  }
}

2. 推送通知分析

集成Firebase Analytics跟踪通知效果：

import analytics from '@react-native-firebase/analytics';

// 跟踪通知打开事件
async function trackNotificationOpen(notificationData) {
  await analytics().logEvent('notification_open', {
    notification_type: notificationData.type,
    notification_id: notificationData.id,
    source: notificationData.source,
  });
}

3. 最佳实践总结

权限请求时机：在用户完成关键操作后请求通知权限，提高授权率
通知频率控制：避免频繁发送通知，提供通知频率设置
个性化通知：根据用户行为和偏好发送相关通知
深度链接支持：点击通知直接打开相关内容页面
测试覆盖：确保覆盖各种设备状态和系统版本的测试
错误监控：实现通知相关错误的日志记录和监控

总结与展望

本文详细介绍了React Native应用集成Firebase Cloud Messaging和Apple Push Notification service的完整流程，从环境配置到代码实现，再到测试和问题解决。通过本文的指南，你应该能够为你的React Native应用构建一个可靠、高效的跨平台推送通知系统。

随着移动应用开发的发展，推送通知技术也在不断演进。未来，我们可以期待更多创新功能，如富媒体通知、交互式通知和更智能的通知管理。作为开发者，我们需要持续关注这些变化，并将最佳实践应用到我们的项目中。

希望本文对你有所帮助！如果你有任何问题或建议，请在评论区留言。别忘了点赞、收藏和关注，获取更多React Native开发教程！

下一篇预告：《React Native离线数据同步最佳实践》

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考