SuperAPI AI 工具集

cometchat-react-v7-push

前端与建站

查看项目

更新于 10-21 20:29

技能介绍

用途

本技能用于为 React 应用添加 Web 推送通知,基于 CometChat v7 SDK,通过 Firebase Cloud Messaging(FCM)实现,并借助 CometChatNotifications 完成推送令牌注册。适用于“添加推送通知”“Web 推送”“应用关闭时收到新消息提醒”“FCM 推送”等场景。非 Web 平台(Android、iOS、React Native、Flutter)的推送方式不同,不属于本技能范围。

主要能力

推送是外部集成,由 Firebase/FCM、Service Worker 以及 CometChat Dashboard 中的 FCM 提供方共同组成,不是 UI Kit 组件。本技能定位为“薄”技能:完整、最新的设置步骤以 CometChat 官方通知文档为准,技能本身只内置加固要点与经过验证的 SDK 符号。

内置的 SDK 符号(已对照已安装的 7.1.x SDK 验证):

import { CometChat, CometChatNotifications } from "@cometchat/chat-sdk-javascript";
// 登录后注册,使用 firebase getToken() 获取的 FCM 令牌:
await CometChatNotifications.registerPushToken(
  fcmToken,                                    // string — 来自 firebase messaging getToken({ vapidKey })
  CometChatNotifications.PushPlatforms.FCM_WEB,   // 枚举成员
  providerId                                   // 可选 — 你的 Dashboard FCM 提供方 id
);
// 登出时(在 CometChatUIKit.logout() 之前):
await CometChatNotifications.unregisterPushToken();

签名(来自已安装源码):registerPushToken(pushToken: string, platform: PushPlatforms, providerId?: string) · unregisterPushToken()。其余内容请从通知文档获取。

使用方式

前置条件:需先完成 cometchat-react-v7-core 的安装、凭据配置与 init→login→render 流程。本技能假定该流程已完成,推送注册发生在登录之后,使用同一个 SDK。

设置步骤以文档为准:通过 cometchat-react-v7-core/references/docs-map.md 获取 /notifications/push-overview、/notifications/web-push-notifications、/notifications/preferences 等文档,按其 Firebase 项目与 FCM 设置、firebase-messaging-sw.js Service Worker 以及客户端注册流程进行构建。若文档有误或缺少细节,应标记为文档缺口,而不是内置永久性变通方案。

Dashboard 前置条件:需在 CometChat Dashboard 中设置 FCM 提供方(它是发送方)。自托管 VAPID 或自定义 Webhook 不是 v7 Web 路径。请确认此项已完成,否则推送不会送达。

安装:npm i firebase@^10.3.1(FCM Web SDK)。CometChatNotifications 随已安装的 @cometchat/chat-sdk-javascript 提供,无需额外 CometChat 包。

加固要点

Service Worker 放置位置因打包工具而异。firebase-messaging-sw.js 必须从源根目录提供:Vite / CRA → public/firebase-messaging-sw.js(复制到 Web 根目录);Next.js → public/firebase-messaging-sw.js(App 或 Pages 路由);Astro → public/firebase-messaging-sw.js。放在 src/ 下或哈希资源路径下的 Service Worker 不会注册。需要 HTTPS(或 localhost)。

权限请求应在用户手势时触发,而非页面加载时。从点击/轻触事件调用 Notification.requestPermission(),否则浏览器会阻止或干扰。仅在权限授予后才调用 getToken()。

令牌生命周期应与登录/登出绑定。在 CometChatUIKit.login() 完成后调用 registerPushToken(...);在 CometChatUIKit.logout() 之前调用 unregisterPushToken()。令牌刷新时重新注册(onTokenRefresh/getToken 再次调用)。登出时跳过 unregister 会导致通知泄漏给错误用户。

iOS Web 推送仅限 PWA。在 iOS/iPadOS 上,Web 推送仅在已安装的 PWA(添加到主屏幕)中、iOS 16.4+ 上可用,普通 Safari 标签页中不可用。应告知用户,不要承诺 iOS Safari 标签页推送。

Dashboard FCM 提供方是发送方。v7 Web 不使用自托管 VAPID 服务器或 Webhook,需在 Dashboard 中配置提供方。

常见陷阱

Service Worker 不在源根目录 → 注册静默失败,无推送。页面加载时请求权限 → 被阻止或拒绝。登出时忘记 unregisterPushToken() → 跨用户泄漏。期望 iOS Safari 标签页推送。没有 Dashboard FCM 提供方 → 即使客户端代码正确也不会送达。

验证方式

仅支持静态验证:SDK 符号可解析、应用可编译、Service Worker 可注册(检查浏览器 Application → Service Workers)。实际送达是手动、依赖设备的检查(真实 HTTPS 源 + 已注册的 Service Worker + Dashboard FCM 提供方 + 已授予权限 → 在应用后台运行时发送消息)。这是唯一一个实际送达门槛本质上受外部阻塞的技能,不要仅凭构建成功就声称送达可用。

适用场景与限制

适用于 React Web 应用通过 CometChat v7 SDK 集成 FCM Web 推送。不适用于非 Web 平台推送。实际推送送达依赖 Firebase/FCM、Service Worker、Dashboard FCM 提供方与用户权限等多方条件,无法自动冒烟测试。iOS 上仅支持已安装 PWA。