React Native
SDK oficial @daertech/pushhub-react-native sobre @react-native-firebase/messaging, o integración por REST.
El SDK oficial @daertech/pushhub-react-native funciona con React Native 0.76 o superior, con la nueva arquitectura. Se apoya en @react-native-firebase/messaging y agrega:
- registro del dispositivo, con cola sin conexión;
- canal de Android;
- notificaciones con la app abierta en Android, con imagen y botones, sin Notifee;
- aperturas y clics reportados, incluido el botón tocado en iOS, que RNFB no informa;
- usuarios, tags y topics.
El token es de FCM en ambas plataformas. Necesitas:
- la credencial de Firebase en PushHub;
- la llave APNs dentro de Firebase (iOS vía FCM).
¿Usas Expo? Ver Expo.
Instalación
npm install @daertech/pushhub-react-native @react-native-firebase/app @react-native-firebase/messaging
cd ios && pod install
- Android: agrega
google-services.jsonenandroid/app/, como indica RNFB. - iOS: agrega
GoogleService-Info.plist, activa Push Notifications y Background Modes > Remote notifications. RNFB pideuse_frameworks! :linkage => :staticen elPodfile.
Uso
import { PushHub } from '@daertech/pushhub-react-native';
// Fuera de los componentes, una sola vez al arrancar
PushHub.init({
appKey: 'pk_live_TU_LLAVE_PUBLICA', // solo la llave PUBLICA
androidChannel: { id: 'general', name: 'Avisos generales' },
});
PushHub.onNotificationOpened((n) => {
// n.deepLink, n.actionId (botón tocado), n.data (tus datos)
if (n.deepLink) Linking.openURL(n.deepLink);
});
// Pide el permiso cuando el usuario entienda para qué (en Android 13+ pide POST_NOTIFICATIONS)
const estado = await PushHub.requestPermission();
PushHub.identify('cliente-123'); // al iniciar sesión
PushHub.setTags({ plan: 'gold' });
PushHub.subscribe('ofertas');
PushHub.logout(); // al cerrar sesión
Puedes suscribirte a onNotificationOpened antes de init. Si la app se abrió desde una notificación, la apertura se entrega igual.
Las llamadas no esperan red: se guardan en una cola persistente. Se envían cuando hay token y conexión, y se reintentan al volver a la app.
Opciones de init
| Opción | Por defecto | Descripción |
|---|---|---|
appKey |
— | Llave pública pk_live_… o pk_test_…. El SDK rechaza llaves secretas. |
appId |
— | Solo si la llave no está limitada a una app. |
autoRegister |
false |
Pedir el permiso al iniciar. |
foregroundDisplay |
true |
Mostrar las notificaciones con la app abierta. |
androidChannel |
— | Canal que el SDK crea; debe coincidir con el canal por defecto de la app en PushHub. |
iosNotificationServiceExtension |
false |
La app incluye la extensión (ver abajo). |
debug |
false |
Logs en la consola. |
En iOS, las notificaciones con la app abierta las muestra el sistema según messaging_ios_foreground_presentation_options en firebase.json, de RNFB.
Dispositivo de prueba
await PushHub.pairTestDevice('483920'); // código de 6 dígitos de la sección Dispositivos
Imágenes y botones en iOS
- En Xcode: File > New > Target > Notification Service Extension.
- Reemplaza su
NotificationService.swiftpornode_modules/@daertech/pushhub-react-native/ios/NotificationService/NotificationService.swift. - Inicia el SDK con
iosNotificationServiceExtension: true.
Con Expo, el plugin del SDK hace estos pasos solo.
Installation ID de Firebase
Si activas el modo Installation ID de Firebase en la app, el SDK lo detecta y registra el FID en lugar del token de registro, sin cambios en tu código. Ver Installation ID de Firebase.
Lo que el SDK reporta
| Evento | Cuándo |
|---|---|
received |
La notificación llega con la app abierta. |
opened |
El usuario toca la notificación. |
clicked |
El usuario toca un botón (incluye actionId). |
permission_granted / permission_denied |
Cambia el permiso. |
Sin SDK (REST)
import { getMessaging, getToken } from '@react-native-firebase/messaging';
const token = await getToken(getMessaging());
await fetch('https://api.pushhub.daertec.com/v1/devices', {
method: 'POST',
headers: { Authorization: 'Bearer pk_live_TU_LLAVE_PUBLICA', 'Content-Type': 'application/json' },
body: JSON.stringify({ token, platform: Platform.OS, provider: 'fcm', framework: 'react_native' }),
});
El id del envío llega en data._phid y el enlace en data.deepLink. Repórtalo a /v1/events al abrir.