终极指南如何在T3 Turbo项目中快速集成FCM与APNs推送服务【免费下载链接】create-t3-turboClean and simple starter repo using the T3 Stack along with Expo React Native项目地址: https://gitcode.com/GitHub_Trending/cr/create-t3-turboT3 Turbo是一个基于T3 Stack构建的全栈应用模板结合了Expo React Native实现跨平台移动开发。本文将详细介绍如何在T3 Turbo项目中集成Firebase Cloud Messaging(FCM)和Apple Push Notification service(APNs)为移动应用添加高效可靠的推送通知功能。T3 Turbo项目概览T3 Turbo项目采用Monorepo架构通过Turbo构建工具实现高效开发。项目包含多个应用和共享包其中Expo应用负责移动端实现API包提供后端服务支持。T3 Turbo项目的深色主题Logo采用紫色T3字样设计推送服务集成准备工作在开始集成推送服务前需要准备以下开发环境和配置开发环境要求Node.js 18 和pnpm包管理器Expo CLI 6.0Firebase账号和项目Apple Developer账号(用于APNs配置)项目克隆与安装git clone https://gitcode.com/GitHub_Trending/cr/create-t3-turbo cd create-t3-turbo pnpm install配置FCM推送服务1. 添加Firebase到Expo项目首先安装Expo Firebase相关依赖cd apps/expo pnpm add expo-firebase-messaging expo-notifications2. 配置Firebase项目在Firebase控制台创建项目后下载google-services.json文件放置在Expo项目根目录apps/expo/google-services.json3. 实现FCM初始化代码创建推送服务初始化文件apps/expo/src/utils/push-notifications.ts添加以下代码import * as Notifications from expo-notifications; import * as Device from expo-device; import { Platform } from react-native; // 配置通知处理 Notifications.setNotificationHandler({ handleNotification: async () ({ shouldShowAlert: true, shouldPlaySound: true, shouldSetBadge: true, }), }); // 获取设备推送令牌 export async function registerForPushNotificationsAsync() { let token; if (Device.isDevice) { const { status: existingStatus } await Notifications.getPermissionsAsync(); let finalStatus existingStatus; if (existingStatus ! granted) { const { status } await Notifications.requestPermissionsAsync(); finalStatus status; } if (finalStatus ! granted) { alert(无法获取推送权限!); return; } token await Notifications.getExpoPushTokenAsync({ projectId: YOUR_FIREBASE_PROJECT_ID, }); } else { alert(必须在物理设备上测试推送通知); } if (Platform.OS android) { Notifications.setNotificationChannelAsync(default, { name: default, importance: Notifications.AndroidImportance.MAX, vibrationPattern: [0, 250, 250, 250], lightColor: #FF231F7C, }); } return token; }配置APNs推送服务1. 生成APNs认证密钥在Apple Developer控制台创建APNs认证密钥下载.p8文件并记录以下信息Key IDTeam IDBundle ID2. 配置Expo APNs设置在app.config.ts中添加APNs配置export default { expo: { // ...其他配置 ios: { pushNotificationClientCertificate: ./apns-cert.p12, usesIcloudStorage: false, bundleIdentifier: com.yourcompany.yourapp, }, // ...其他配置 }, };后端推送服务实现1. 添加推送服务依赖在API包中安装推送相关依赖cd packages/api pnpm add expo-server-sdk2. 创建推送通知发送函数在packages/api/src/router/post.ts中添加推送通知功能import { Expo } from expo-server-sdk; // 初始化Expo SDK const expo new Expo({ accessToken: process.env.EXPO_ACCESS_TOKEN }); // 发送推送通知函数 export async function sendPushNotification( tokens: string[], title: string, body: string ) { const messages []; for (const token of tokens) { if (!Expo.isExpoPushToken(token)) { console.error(推送令牌 ${token} 无效); continue; } messages.push({ to: token, sound: default, title, body, data: { data: goes here }, }); } const chunks expo.chunkPushNotifications(messages); for (const chunk of chunks) { try { const receipts await expo.sendPushNotificationsAsync(chunk); console.log(receipts); } catch (error) { console.error(发送推送通知失败:, error); } } }前端推送接收实现在apps/expo/src/app/_layout.tsx中添加推送通知监听import { registerForPushNotificationsAsync } from ../utils/push-notifications; import * as Notifications from expo-notifications; import { useEffect } from react; export default function Layout() { useEffect(() { // 注册推送通知 registerForPushNotificationsAsync().then(token { if (token) { console.log(推送令牌:, token); // 将令牌发送到后端保存 // api.savePushToken(token); } }); // 监听前台通知 const subscription Notifications.addNotificationReceivedListener(notification { console.log(收到通知:, notification); }); // 监听通知点击 const responseSubscription Notifications.addNotificationResponseReceivedListener(response { console.log(通知被点击:, response); // 处理通知点击事件 }); return () { subscription.remove(); responseSubscription.remove(); }; }, []); return ( // ...布局组件 ); }测试推送通知功能1. 运行Expo应用cd apps/expo pnpm start2. 发送测试通知可以使用Expo的推送通知工具发送测试通知npx expo push:send --to expo-push-token --title 测试通知 --body 这是一条测试推送T3 Turbo项目的浅色主题Logo适合在亮色背景下使用常见问题解决推送权限问题确保在app.json中配置了必要的权限{ expo: { ios: { infoPlist: { UIBackgroundModes: [remote-notification] } }, android: { permissions: [RECEIVE_BOOT_COMPLETED] } } }令牌获取失败确保在物理设备上测试模拟器无法获取推送令牌。通知不显示检查设备通知设置确保应用通知权限已开启。总结通过本文的步骤你已经成功在T3 Turbo项目中集成了FCM和APNs推送服务。推送通知功能可以显著提升用户 engagement建议进一步实现以下功能基于用户偏好的通知设置通知分类和优先级管理推送分析和效果跟踪T3 Turbo的模块化架构使得添加新功能变得简单你可以在现有代码基础上轻松扩展推送功能。【免费下载链接】create-t3-turboClean and simple starter repo using the T3 Stack along with Expo React Native项目地址: https://gitcode.com/GitHub_Trending/cr/create-t3-turbo创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考