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:

¿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.json en android/app/, como indica RNFB.
  • iOS: agrega GoogleService-Info.plist, activa Push Notifications y Background Modes > Remote notifications. RNFB pide use_frameworks! :linkage => :static en el Podfile.

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

  1. En Xcode: File > New > Target > Notification Service Extension.
  2. Reemplaza su NotificationService.swift por node_modules/@daertech/pushhub-react-native/ios/NotificationService/NotificationService.swift.
  3. 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.