ARTICLE DETAIL

资讯详情

深耕网站建设与运营推广的一线实战洞察。

Expo 推送通知实操指南:从权限到点击回传

Expo 推送通知实操指南:从权限到点击回传 Expo 推送通知实操指南从权限到点击回传【免费下载链接】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/expoExpo 的expo-notifications库为 React Native 应用提供跨平台推送通知方案它封装了 Android 的 FCM 与 iOS 的 APNs让你用一套 API 收发通知。想给 App 加一条提醒不必自己对接推送服务装好库、拿到令牌就能发出第一条测试推送。环境准备npx expo install expo-notifications expo-constantsexpo-notifications负责权限、令牌和事件监听expo-constants负责读取项目配置里的projectId。再在app.json的plugins数组中加入expo-notifications插件会自动写入两端所需的原生配置。让最小推送跑起来权限、令牌与测试发送在拿推送令牌ExpoPushToken相当于设备在 Expo 推送服务里的唯一地址之前必须完成两件事拿到用户授权、找到项目projectId。仓库里的示例 apps/notification-tester/src/registerForNotifications.ts 就是这个流程的完整实现核心逻辑如下import Constants from expo-constants; import { getPermissionsAsync, requestPermissionsAsync, getExpoPushTokenAsync } from expo-notifications; async function registerForPushNotificationsAsync() { let { status } await getPermissionsAsync(); if (status ! granted) { ({ status } await requestPermissionsAsync()); } if (status ! granted) { throw new Error(notification permission denied); } const projectId Constants.expoConfig?.extra?.eas?.projectId ?? Constants.easConfig?.projectId; const token (await getExpoPushTokenAsync({ projectId })).data; return token; }应用启动后在useEffect里调用它把令牌显示在界面上方便测试。注意令牌必须绑定projectId生成两端配置里的 projectId 不一致会导致后续发送被拒。发送测试通知只需要向 Expo 推送服务发一个 POST 请求无需自建服务端await fetch(https://exp.host/--/api/v2/push/send, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify({ to: expoPushToken, title: Original Title, body: And here is the body!, data: { someData: goes here }, }), });data是自定义数据字段后续可以从通知对象里原样读回是实现深度链接的入口。生产环境要把令牌上传到你自己的后端并入库而不是只存在 App 本地。平台差异补齐Android 渠道与 iOS 凭据Android 8.0 起通知必须挂在渠道channel通知的分类容器下不建渠道推送可能不显示。在注册前调用setNotificationChannelAsync创建默认渠道if (Platform.OS android) { await Notifications.setNotificationChannelAsync(default, { name: default, importance: Notifications.AndroidImportance.MAX, vibrationPattern: [0, 250, 250, 250], lightColor: #FF231F7C, }); }凭据两端也各不相同Android 需要 FCM v1 凭据google-services.jsoniOS 需要 APNs 密钥通常通过eas credentials上传到 EAS 项目构建时自动写入。另外两点容易忽略Android 上令牌可能随系统重启或配置变更而更新用addPushTokenListener监听新令牌并回传后端。iOS 上用户拒绝权限弹窗后无法再发推送denied状态要单独处理引导用户去系统设置里手动开启。getDevicePushTokenAsync返回的是直连 FCM/APNs 的原始设备令牌走 Expo 推送服务时请用ExpoPushToken两者不通用。前台行为控制一个 Handler 与两个监听器App 在前台时通知默认不弹横幅展示行为由setNotificationHandler决定Notifications.setNotificationHandler({ handleNotification: async () ({ shouldShowBanner: true, shouldShowList: true, shouldPlaySound: false, shouldSetBadge: true, }), });两个监听器分工不同addNotificationReceivedListener只在前台收到通知时触发addNotificationResponseReceivedListener在用户点击通知时触发且前后台、冷启动都有效const received Notifications.addNotificationReceivedListener(n { console.log(received, n.request.content.data); }); const response Notifications.addNotificationResponseReceivedListener(r { const data r.notification.request.content.data; if (data?.screen) { navigation.navigate(data.screen); } }); return () { received.remove(); response.remove(); };完整的事件对象结构和监听器写法可参考文档 docs/pages/push-notifications/receiving-notifications.mdx。批量发送与送达确认不想写服务端代码时可用 Expo 账号控制台里的 Notifications 工具直接向指定令牌发推送。接口本身支持一次提交最多 100 条消息数组只要属于同一个项目能显著减少请求次数。发送后服务会先返回 push ticket接收凭证真正投递到 FCM/APNs 之后可再查 push receipt送达回执确认结果。回执约 15 分钟后可用24 小时后清除。如果回执里出现DeviceNotRegistered说明设备已卸载或关闭权限应停止向该令牌发送直到用户重新注册。⚠️ 踩坑排错五类常见现象令牌为空、注册失败 → 模拟器缺少 Google Play 服务 → 换物理设备或给 Android 模拟器装上 Play 服务。发送返回 400 →to不是有效令牌或 payload 里的 projectId 与令牌不匹配 → 确认令牌由当前项目的 projectId 生成。前台收到通知却不弹横幅 → handler 默认不展示 → 用setNotificationHandler显式声明shouldShowBanner: true。Android 通知不显示 → 8.0 未创建通知渠道 → 先setNotificationChannelAsync建渠道再发推送。发送看似成功但设备收不到 → 凭据未配置或过期 → 检查 EAS 项目里的 FCM/APNs 凭据并重新构建。收尾整条链路可以浓缩成三件事权限是门槛令牌是地址监听器是回传。把这三件跑通后自定义声音、角标和深度链接都是在此基础上叠加。更多细节见官方文档 docs/pages/push-notifications/库源码在 packages/expo-notifications/。【免费下载链接】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),仅供参考
返回列表