Expo 推送通知教程：4 步把第一条通知发到真机，含排错清单

Expo 推送通知教程4 步把第一条通知发到真机含排错清单【免费下载链接】expoAn open-source framework for making universal native apps with React. Expo runs on Android, iOS, and the web.项目地址: https://gitcode.com/GitHub_Trending/ex/expo想让离开的用户还能收到消息Expo 的推送能力是一条很顺的路expo-notifications库统一了 Android 和 iOS 的权限、令牌和事件 APIExpo Push Service 则替你把消息转交给 FCM 和 APNsFirebase Cloud Messaging / Apple Push Notification service两家厂商的官方推送通道你不需要自己对接任何原生推送协议。这篇教程围绕把一条真实通知发出去并确认到达来推进按 准备 → 运行 → 验证 → 排错 的顺序走一遍适合第一次接触 Expo 推送、手上有一个 Expo 项目的开发者。 准备装两个库加一个插件推送功能依赖两样东西expo-notifications负责客户端侧的权限和令牌逻辑expo-constants用来读取项目配置里的projectId。在项目根目录执行npx expo install expo-notifications expo-constants装完后在app.json里注册配置插件它会自动处理原生工程里的推送相关设置{ expo: { plugins: [expo-notifications] } }改完配置后用npx expo prebuild重新生成原生工程或直接用 EAS Build 构建。 运行拿到权限和令牌发出第一条通知推送链路里最关键的一步是拿到ExpoPushToken——Expo 为每台设备生成的地址服务端凭它找到用户。先在真机上请求通知权限再换取令牌import * as Notifications from expo-notifications; import Constants from expo-constants; async function getPushToken() { const { status } await Notifications.getPermissionsAsync(); if (status ! granted) { const r await Notifications.requestPermissionsAsync(); if (r.status ! granted) return null; // 用户拒绝 } // projectId 来自 EAS 项目配置令牌靠它关联到你的项目 const projectId Constants.easConfig?.projectId; return (await Notifications.getExpoPushTokenAsync({ projectId })).data; }把打印出的令牌贴到 Expo 推送工具里就能直接发测试消息。如果你有服务端用一条 HTTP 请求也能发to填令牌title和body填展示文案curl -X POST https://exp.host/--/api/v2/push/send \ -H Content-Type: application/json \ -d {to:ExponentPushToken[xxx],title:测试,body:第一条通知}响应里返回一张推送票据push ticketstatus为ok表示 Expo 已收到这条消息id留着验证阶段要用。✅ 验证怎么确认通知真的到了发出去了和设备收到了是两回事中间隔着 FCM/APNs 的投递环节。确认方法有两层看票据和回执。发送后拿票据id去查推送回执push receipt它是 Expo 把消息交给 FCM/APNs 后的结果记录curl -X POST https://exp.host/--/api/v2/push/getReceipts \ -H Content-Type: application/json \ -d {ids:[票据ID]}回执status为ok表示厂商通道已接收。建议发送 15 分钟后再查回执 24 小时后会被清除。在应用里监听事件。前台收到通知和点击通知是两件事分别对应两个监听器注册在useEffect里、卸载时移除const received Notifications.addNotificationReceivedListener(n { console.log(前台收到:, n.request.content); }); const response Notifications.addNotificationResponseReceivedListener(r { console.log(点击通知:, r.notification.request.content.data); });content.data是你在消息体里塞的自定义数据做点击后跳转到对应页面就靠它。 调优控制前台通知的表现默认行为可能不是你想要的SDK 58 之前应用在屏幕前foregrounded时收到的通知不会弹横幅SDK 58 起默认会展示。用setNotificationHandler可以精确控制是否响铃、弹横幅、入列表、加角标Notifications.setNotificationHandler({ handleNotification: async () ({ shouldPlaySound: false, // 前台收到时不响铃 shouldShowBanner: true, shouldShowList: true, shouldSetBadge: true, }), });另外两个常见调优点Android 通知渠道。Android 8.0 必须指定渠道发送时通过channelId字段引用渠道要在应用内用setNotificationChannelAsync先建好否则消息不会展示。点击跳转。在 response 监听器里读data.screen之类的字段调路由navigate到目标页面即推送深链。 排错通知不来的四个高频原因遇到问题先别怀疑代码按这个顺序过一遍用了 Expo Go 或模拟器。SDK 53 起 Expo Go 不再支持推送必须构建开发版development build或正式版在真机上测。凭据没配。Android 需要在 EAS 上传 FCM 凭据google-services.json FCM v1 服务账号密钥iOS 需要推送密钥。开发时能收到、发布后收不到基本都是这里漏了。用eas credentials检查。回执里报了DeviceNotRegistered。说明用户卸载了应用或撤销了权限该令牌已失效服务端应停发并清理记录不是你的 bug。iOS 取令牌特别慢。这是 Apple 侧的已知现象不代表出错。检查设备网络换 Wi-Fi 重试必要时重启设备。完整的问题清单和每个错误码的含义在 docs/pages/push-notifications/faq.mdx 里都有对应条目排错时直接查。下一步克隆仓库git clone https://gitcode.com/GitHub_Trending/ex/expo参考 docs/pages/push-notifications/push-notifications-setup.mdx 完成凭据配置。用apps/notification-tester/这个现成的测试应用跑一遍它在仓库里就是给expo-notifications做联调用的。给自己定个验收标准真机上收到横幅、票据和回执都是ok、点击能带数据跳转这三条都过就算接入完成。【免费下载链接】expoAn open-source framework for making universal native apps with React. Expo runs on Android, iOS, and the web.项目地址: https://gitcode.com/GitHub_Trending/ex/expo创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考