尧图建网站 尧图建网站 YAOTU WEB BUILD 免费咨询
ARTICLE DETAIL

资讯详情

深耕网站建设与建站编程的一线实战洞察。

Expo 推送通知 4 步跑通,别再反复踩坑

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 推送通知装依赖、拿令牌、配凭据、发出一条真实通知手机通知栏弹出来才算完。全程不写一行原生代码四步走完就能验证。 先花 2 分钟搞清楚这几件事这些词后文会反复出现先混个脸熟。推送令牌ExpoPushToken每台真机向系统注册后拿到的一串字符串相当于设备的门牌号。推送就是按这张牌寄到你手机上的丢了就找不到这台设备。通知权限iOS 和 Android 都必须让用户手动点允许。没给权限令牌拿不到后面的代码全白写。通知渠道Android 8 的专属概念决定通知响不响、弹不弹、震不震。不建渠道通知大概率静默躺在通知中心。推送网关你不用自己对接苹果和谷歌的推送服务器。Expo 做了中间人你把一个 JSON 发给它剩下的路由它来管。 跟着做一遍从零跑通推送通知1. 安装依赖声明插件先装三个库expo-notifications负责通知本身expo-device判断是不是真机expo-constants读项目配置。npx expo install expo-notifications expo-device expo-constants再在app.json里声明插件它会替你改好两端的原生配置{ expo: { plugins: [expo-notifications] } }做对了长什么样重新npx expo start应用正常启动控制台没有红色报错。2. 请求权限拿到推送令牌先请求系统权限这是唯一会弹窗的一步代码就几行import * as Notifications from expo-notifications; const { status } await Notifications.getPermissionsAsync(); if (status ! granted) { await Notifications.requestPermissionsAsync(); }权限到手后再建渠道、取令牌。渠道建一次就行令牌每次启动都可以取// Android 8 必须先建通知渠道 if (Platform.OS android) { await Notifications.setNotificationChannelAsync(default, { name: default, importance: Notifications.AndroidImportance.MAX, }); } const token await Notifications.getExpoPushTokenAsync(); console.log(token.data);做对了长什么样控制台打印出一串ExponentPushToken[...]。把它完整抄下来下一步发通知要用。3. 配置推送凭据令牌只是门牌号真正把通知递进门的钥匙在 EAS 那边按平台分开配Android在 Firebase 里建项目导出google-services.json用eas credentials把 FCM 凭据挂到你的项目上。iOS在 Apple Developer 后台开推送能力生成 APNs 密钥交给 EAS 保管。做对了长什么样EAS 项目里通知凭据显示已配置。这一步细节比想象中多卡住了直接翻 docs/pages/push-notifications/push-notifications-setup.mdx两种凭据的坑它都写了。4. 发送一条推送通知最简单的验证方式拿令牌直接 POST 给 Expo 的推送接口不写后端也能跑通整条链路。curl -H Content-Type: application/json \ -d { to: ExponentPushToken[xxxxxxxx], sound: default, title: Hello Expo!, body: 这是你的第一条推送通知, data: { screen: home } } \ https://exp.host/--/api/v2/push/send做对了长什么样手机通知栏弹出标题和正文。data里的字段不会显示但点击通知时会原样透传给你的监听器后面做页面跳转就靠它。 它到底是怎么送到手机上的把整条链路摊开只有四段你的 App 把令牌交给后端后端把 JSON 发给 Expo 推送服务Expo 转交 FCMAndroid或 APNsiOS最后由系统通知栏弹出来。你的代码只碰头尾中间全是托管的。payload 里真正要关心的就这几个字段{ to: ExponentPushToken[...], // 发给哪台设备 title: Hello Expo!, // 通知栏标题 body: 第一条推送通知, // 通知栏正文 data: { screen: home } // 透传数据点击通知时能拿到 }如果 App 正在前台通知不会只躺在系统层。加一个addNotificationReceivedListener通知一到回调就触发你可以自己决定是弹个提示还是直接更新界面。三个平台差异不大一张表看完平台推送通道你要额外做的事AndroidFCM建通知渠道iOSAPNs配 APNs 密钥Web不支持远程推送只能用本地通知⚠️ 你大概率会踩的这几个坑模拟器里什么都不会发生不是代码的问题。模拟器没有系统级推送注册Device.isDevice返回false令牌也拿不到。换真机这是唯一解。令牌拿到了发出去却 400大概率是凭据没配。Expo 收到 JSON 后要拿你的 FCM/APNs 凭据去投递凭据缺失、或和项目对不上它会直接拒绝并给出错误码。Android 通知来了但不响不弹先查渠道。importance设低了、或者渠道压根没建通知会哑着进通知中心看起来像没收到。用户点了不允许之后再也不弹授权框系统对同一应用的权限请求只弹一次。要么引导用户去系统设置里手动打开要么接受这个事实。Expo Go 里能收到自己打包的 App 收不到令牌和包名、环境是绑定的。换了构建方式旧的ExponentPushToken直接作废重新走一遍取令牌流程。✅ 下一步跑npx expo start连上真机确认控制台能打出令牌打开 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),仅供参考
返回列表