React-native-onesignal: ¿Cómo obtener la notificación inicial?

Tengo el mismo problema, y ​​parece que muchos otros también tienen este problema. Algunos problemas relacionados/duplicados que encontré incluyen https://github.com/geektimecoil/react-native-onesignal/issues/206 , https://github.com/geektimecoil/react-native-onesignal/issues/195 , https://github.com/geektimecoil/react-native-onesignal/issues/191 , https://github.com/geektimecoil/react-native-onesignal/issues/336 , https://github.com/geektimecoil/ react-native-onesignal/issues/334 , https://github.com/geektimecoil/react-native-onesignal/issues/264 , https://github.com/geektimecoil/react-native-onesignal/issues/279.

Todos estos problemas parecen estar relacionados con el problema de que no se llama al detector de eventos opened cuando toca una notificación automática para abrir la aplicación y la aplicación no se está ejecutando en ese momento. Por lo que he leído en esos problemas y las pruebas que he realizado, parece que la causa de este problema es que el registro del detector de eventos se retrasa de alguna manera (es decir OneSignal.addEventListener('opened', this.onOpened); se llama un poco después del la propia aplicación está cargada). Esto podría deberse a que tiene este código dentro de un componente de React (por ejemplo, en las funciones constructor o componentWillMount o componentDidMount ), o porque no se llama hasta después de configurar/rehidratar su tienda Redux, etc. Y debido a este retraso, el evento en sí (que se abrió una notificación) es activado por react-native-onesignal antes de que se registre el detector de eventos, y en este punto se ha perdido el evento y tiene no hay manera de saber que sucedió. Como nota al margen, este mismo problema afecta a otros detectores de eventos, por ejemplo, el detector de eventos ids .

Si mueve este código para que suceda lo antes posible, parece que el detector de eventos se registrará antes de que se dispare el evento y, como tal, se llamará a su función de controlador de eventos. Por ejemplo, debe mover el código de registro del detector de eventos a su archivo index.ios.js , o al principio de su archivo App.js en el caso de que su archivo index.ios.js simplemente esté importando el componente App y registrarlo (a través AppRegistry.registerComponent ).

Una vez que haya configurado esto, ahora puede capturar el evento de que se abrió una notificación y depende de usted cómo lo maneja, lo que dependerá de cómo esté configurada su aplicación (por ejemplo, si está usando Redux, o si está usando redux-persist, etc.).

Mi solución actual es guardar la notificación en una variable definida en el nivel superior de mi archivo App.js (antes incluso de declarar mi componente App ), y luego, una vez que haya completado la inicialización de mi tienda Redux (que incluye esperar la rehidratación de mi tienda por redux-persist), envío acciones con la notificación como carga útil (si se abrió una notificación), y luego también elimino mis oyentes de eventos de nivel superior y agrego un nuevo evento oyentes en mi propio componente App (estos oyentes de eventos simplemente envían acciones a mi tienda Redux con la notificación, ID de dispositivo, etc. como la carga útil de la acción).

Esta solución obviamente es muy complicada, y probablemente haya algunos casos extremos en los que esto no funcionaría como se supone que debe hacerlo. Pero hasta que se implemente una solución adecuada en react-native-onesignal, esta parece ser una solución decente.

Creo que lo que debe suceder es que react-native-onesignal se actualice para que espere hasta que haya configurado sus controladores de eventos antes de que dispare los eventos. Una posible solución podría ser que cuando ocurren eventos (como el evento opened ), los eventos se colocan en una cola y react-native-onesignal verifica si hay un detector de eventos correspondiente actualmente registrado. Si no lo hay, deja el evento en la cola. Luego, tan pronto como se registra el detector de eventos, los eventos que recibiría este detector de eventos se activan y eliminan de la cola. De esa manera, puede agregar los detectores de eventos en la aplicación en cualquier momento (por ejemplo, después de esperar a que su tienda Redux esté configurada y rehidratada, lo que podría ser 1-2 segundos después de que se haya cargado la aplicación), y luego tan pronto como los detectores de eventos están registrados, las funciones del controlador de eventos se llamarán y recibirán los eventos que ocurrieron (como el evento de que se abrió una notificación).

Otra solución posible, al menos para detectar específicamente que la aplicación se abrió porque el usuario tocó una notificación automática, sería hacer algo similar a getInitialNotification() desde PushNotificationIOS como sugirió, donde puede llame a esa función en cualquier momento y devolverá la notificación automática que el usuario tocó para abrir la aplicación (o null si esto no ocurrió). Pero incluso si esto se implementara en react-native-onesignal, no haría nada para resolver este problema que afecta a los demás detectores de eventos (por ejemplo, el detector de eventos ids ).

Por lo tanto, creo que realmente debe haber una solución que aborde este problema central de los eventos que se activan antes de que se registre cualquier detector de eventos correspondiente, lo que lleva a que la aplicación pase por alto el evento.

Hola @jordanmkoncz , ¿puedes compartir el código del archivo al que enviaste las acciones? Tengo la misma configuración nativa de reacción que usted (redux-persist, etc.)

@ccoeder seguro, aquí está mi archivo App.js actual.

import React, { Component } from 'react';
import { Provider } from 'react-redux';
import OneSignal from 'react-native-onesignal';
import isNil from 'lodash/isNil';
import configureStore from '../redux/configureStore';
import {
  pushNotificationIdsReceived,
  pushNotificationOpened,
  pushNotificationReceived,
  pushNotificationRegistered,
} from '../redux/actionCreators';
import AppNavigator from './AppNavigator';
import Blank from './Blank';

let openedPushNotificationResult = null;
let receivedPushNotification = null;
let receivedNotificationUserInfo = null;
let receivedIds = null;

const onOpened = openResult => {
  openedPushNotificationResult = openResult;
};

const onReceived = notification => {
  receivedPushNotification = notification;
};

const onRegistered = notificationUserInfo => {
  receivedNotificationUserInfo = notificationUserInfo;
};

const onIds = ids => {
  receivedIds = ids;
};

OneSignal.addEventListener('opened', onOpened);
OneSignal.addEventListener('received', onReceived);
OneSignal.addEventListener('registered', onRegistered);
OneSignal.addEventListener('ids', onIds);

class App extends Component {
  constructor() {
    super();

    this.state = {
      isStoreInitialised: false,
    };

    this.store = null;

    this.onOpened = this.onOpened.bind(this);
    this.onReceived = this.onReceived.bind(this);
    this.onRegistered = this.onRegistered.bind(this);
    this.onIds = this.onIds.bind(this);
  }

  componentDidMount() {
    this.store = configureStore(store => {
      if (!isNil(openedPushNotificationResult)) {
        store.dispatch(pushNotificationOpened(openedPushNotificationResult));
      }

      if (!isNil(receivedPushNotification)) {
        store.dispatch(pushNotificationReceived(receivedPushNotification));
      }

      if (!isNil(receivedNotificationUserInfo)) {
        store.dispatch(pushNotificationRegistered(receivedNotificationUserInfo));
      }

      if (!isNil(receivedIds)) {
        store.dispatch(pushNotificationIdsReceived(receivedIds));
      }

      OneSignal.addEventListener('opened', this.onOpened);
      OneSignal.addEventListener('received', this.onReceived);
      OneSignal.addEventListener('registered', this.onRegistered);
      OneSignal.addEventListener('ids', this.onIds);

      OneSignal.removeEventListener('opened', onOpened);
      OneSignal.removeEventListener('received', onReceived);
      OneSignal.removeEventListener('registered', onRegistered);
      OneSignal.removeEventListener('ids', onIds);

      this.setState({ isStoreInitialised: true });
    });
  }

  componentWillUnmount() {
    OneSignal.removeEventListener('opened', this.onOpened);
    OneSignal.removeEventListener('received', this.onReceived);
    OneSignal.removeEventListener('registered', this.onRegistered);
    OneSignal.removeEventListener('ids', this.onIds);
    OneSignal.removeEventListener('opened', onOpened);
    OneSignal.removeEventListener('received', onReceived);
    OneSignal.removeEventListener('registered', onRegistered);
    OneSignal.removeEventListener('ids', onIds);
  }

  onOpened(openResult) {
    this.store.dispatch(pushNotificationOpened(openResult));
  }

  onReceived(notification) {
    this.store.dispatch(pushNotificationReceived(notification));
  }

  onRegistered(notificationUserInfo) {
    this.store.dispatch(pushNotificationRegistered(notificationUserInfo));
  }

  onIds(ids) {
    this.store.dispatch(pushNotificationIdsReceived(ids));
  }

  render() {
    if (!this.state.isStoreInitialised) {
      return <Blank />;
    }

    return (
      <Provider store={this.store}>
        <AppNavigator />
      </Provider>
    );
  }
}

export default App;

Nota: configureStore es una función que crea mi tienda Redux (es decir, llama a createStore() ), luego configura redux-persist (es decir, llama a persistStore() ). configureStore toma una función de devolución de llamada como parámetro, y en la devolución de llamada onComplete de la función persistStore llamo a la función de devolución de llamada pasada a configureStore y paso la tienda object como un parámetro para esta devolución de llamada. Finalmente, configureStore devuelve el objeto de la tienda.

Básicamente, espero hasta que mi tienda se haya configurado y rehidratado, y luego envío acciones basadas en los eventos recibidos por mis oyentes de eventos iniciales, luego agrego los nuevos oyentes de eventos y elimino los oyentes de eventos iniciales.

@jordanmkoncz Gracias por compartir su código. Al principio pensé que tenía el mismo error que tú, pero me di cuenta de que mi problema está relacionado con la notificación silenciosa. Necesito tomar medidas si la notificación llega mientras la aplicación está cerrada. Supongo que sus códigos no funcionan para mí.

No te preocupes @ccoeder. Sí, el problema de tomar medidas en una notificación mientras la aplicación está cerrada es diferente. Este problema se relaciona específicamente con la detección en la aplicación de que el usuario tocó una notificación para abrir la aplicación, en el momento en que se inicia la aplicación (cuando anteriormente no se estaba ejecutando en absoluto).

Mire cómo funciona react-native-fcm, hay un método llamado getInitialNotification

@jordanmkoncz Gracias por tu publicación.

Tuve el problema similar. cuando la aplicación recibió la notificación automática, la pantalla navega a la pantalla deseada.
pero cuando abre la notificación, no funciona para la función de navegación.
ejemplo:
componenteMontará() {
OneSignal.addEventListener('recibido', this._onReceived);
OneSignal.addEventListener('abierto', this._onOpened);
}
componenteSeDesmontará() {
OneSignal.removeEventListener('received', this.__onReceived);
OneSignal.removeEventListener('abierto', this._onOpened);
}
_onReceived(notificación) {
console.log('Notificación recibida: ', notificación); // Trabajando bien
this.props.navigator.push({ pushSreen, passProps : { params } }); // Trabajando bien
}
_onAbierto(resultadoabierto) {
console.log('Cuerpo de notificación: ', openResult.notification.payload.body); // Trabajando bien
this.props.navigator.push({ pushSreen, passProps : { params } }); // no funciona
}

¿Qué piensas sobre esto? Si me puede ayudar, espero por favor responder aquí. Gracias

Hmm... Tengo mi componente PushNotificationHelper como hijo de mi Redux Provider , que se procesa solo después de que el store se haya rehidratado.

componentWillMount() {
    AppState.addEventListener("change", this.handleAppStateChange);
    OneSignal.configure({
      onNotificationOpened: this.handleOpenNotification
    });
    OneSignal.addEventListener("received", this.onReceived);
    OneSignal.addEventListener("opened", this.onOpened);
    OneSignal.addEventListener("registered", this.onRegistered);
    OneSignal.addEventListener("ids", this.onIds);

    if (!IOS) {
      OneSignal.inFocusDisplaying(0);
    }
  }

  componentWillUnmount() {
    AppState.removeEventListener("change", this.handleAppStateChange);
    OneSignal.removeEventListener("received", this.onReceived);
    OneSignal.removeEventListener("opened", this.onOpened);
    OneSignal.removeEventListener("registered", this.onRegistered);
    OneSignal.removeEventListener("ids", this.onIds);
  }

handleOpenNotification = (message, data, isActive) => {
    console.log("Notification", message, data, isActive);

    if (isActive) {
      // touchable banner displaying info from push notification
    } else {
      // act on data received from push notification
    }
  };

onReceived = notification => {
    console.log("Notification received: ", notification);
  };

onOpened = openResult => {
    console.log("Message: ", openResult.notification.payload.body);
    console.log("Data: ", openResult.notification.payload.additionalData);
    console.log("isActive: ", openResult.notification.isAppInFocus);
    console.log("openResult: ", openResult);
  };

Incluso si mi aplicación está cerrada, no en un estado de aplicación de background , sino completamente cerrada, si toco una notificación automática, se llama al método onOpened con el openResult objeto y datos asociados, y soy libre de dispatch reducir las acciones apropiadamente.

@wkoutre eso es interesante, ¿podría publicar qué versiones de react-native , react-native-onesignal etc. está usando actualmente? ¿Has probado esto tanto en iOS como en Android? ¿Ha realizado pruebas exhaustivas para abrir la aplicación tocando una notificación de inserción, con la aplicación completamente cerrada en el momento en que se tocó la notificación de inserción, y encontró que su método onOpened se llama el 100 % del tiempo?

¿Podría hacer algunas pruebas para ver si todavía funciona el 100% del tiempo si retrasa artificialmente la carga de su PushNotificationHelper aún más, por ejemplo, al tener un setTimeout con un retraso de unos 5 segundos, después de lo cual ¿Cambiar algo en el estado para permitir que se monte PushNotificationHelper y registrar sus detectores de eventos con OneSignal?

@jordanmkoncz

"react-native": "0.50.4"
"react-native-onesignal": "^3.0.7"

Lo he probado tanto en iOS como en Android, sí. En ambos, el 100% del tiempo:

• la aplicación está completamente cerrada
• se recibe notificación push
• la notificación push está tocada
• cargas de aplicaciones
• onOpened se llama con datos de la notificación push y openResult.notification.isAppInFocus === false

Haré los setTimeout y me pondré en contacto contigo.

EDIT1: No cambié absolutamente nada, y ahora falla en Android el 100% del tiempo.

EDIT2: Hacer el retraso setTimeout causó que onOpened no se disparara en la carga de la aplicación al tocar una notificación automática. Sin embargo, moví todo a los métodos de ciclo de vida de App.js -- mi componente raíz está registrado en index.ios.js y index.android.js -- y onOpened se llama 100% del tiempo iOS, y ~50% del tiempo en Android.

No estoy seguro de por qué Android es inconsistente, pero obviamente es un problema. En Android, cuando la aplicación está completamente cerrada y aparece una notificación, el depurador se borra y todo en mi App.js se carga hasta que creo la clase en sí.

const IOSX = HEIGHT === 812 && PLATFORM === "ios";

const wrapperStyle = [Styles.flex1];
if (IOSX) wrapperStyle.push(Styles.backgroundDarkGray);

let SPLASH_TIME;

console.log(`Change to TRUE below to reset store state`);

const PURGE = DEV ? false : false;

if (DEV) SPLASH_TIME = 4000;
else SPLASH_TIME = 4000;

// const composeEnhancers = composeWithDevTools({
//   realtime: true,
//   port: 8000
// });

const composeEnhancers =
  typeof window === "object" &&
  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ &&
  DEV
    ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
        // Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...
      })
    : compose;

const middlewares = [ReduxThunk];

// debugging tooling
// if (DEV) {
//   // add logger
// middlewares.push(logger)

//   // middlewares = [...middlewares, logger];
//   middlewares = [...middlewares];

// replace these transient reducers when they've been created

export const store = createStore(
  Reducers,
  {},
  composeEnhancers(
    applyAppStateListener(),
    applyMiddleware(...middlewares),
    autoRehydrate()
  )
);

// if (module.hot) {
//   // Enable hot module replacement for reducers
//   module.hot.accept(() => {
//     const nextRootReducer = require("./reducers/index").default;
//     store.replaceReducer(nextRootReducer);
//   });
// }

console.log(`right before APP`);

// Debugger logs everything before this line.

export default class App extends Component {
    ...
}

@jordanmkoncz Curioso si ha probado esta biblioteca: https://github.com/wix/react-native-notifications

Muy bien, tengo una solución alternativa que funciona el 100 % del tiempo tanto en iOS como en Android.

En mi App.js pero antes de declarar mi componente App, tengo:

const handleOnOpened = openResult => {
  store.dispatch(setInitialNotification(openResult));
};

OneSignal.configure({});
OneSignal.addEventListener("opened", handleOnOpened);

... donde setInitialNotification es un creador de acciones.

Luego, cuando mi aplicación (ahora montada) termina de rehidratarse, llamo:

this.setState({ rehydrated: true }, () => {
          OneSignal.removeEventListener("opened", handleOnOpened);
        });

Mi aplicación, envuelta con un redux Provider , luego se devuelve en el método render , con un aspecto similar a...

<Provider store={store}>
        <IphoneXAwareView style={wrapperStyle}>
          <StatusBar hidden={false} barStyle="light-content" />
          <MyAlert />
          <Loading />
          <ConnectedAppWithNavigationState />
          <PushNotificationHelper />
        </IphoneXAwareView>
      </Provider>

A partir de ahí, el componente PushNotificationHelper se encarga de escuchar y gestionar todas las notificaciones automáticas.

@bhoop Han pasado un par de meses, así que no estoy seguro de si todavía estás buscando una solución, pero... si es así, pruébalo.

@wkoutre ¿Podría configurar un PR con actualizaciones del archivo Léame que incluya esta solución para redux?

@avishayil Claro. esta tarde me pongo a ello

Avishayil PR hecho.

Estoy enfrentando un problema que suena así. Cuando se abre la aplicación, funciona correctamente en todas las devoluciones de llamada, cuando la aplicación también está en segundo plano. Pero, si recibo un empujón, el ícono de mi aplicación aumenta +1, y el sistema muestra su banner con contenido de notificación PERO si ignoro el banner y abro la aplicación por el ícono (no por el banner de notificación) se ignora la devolución de llamada =[ cómo maneja esto ?

• aplicación de separación de exposición
• reaccionar 16.3.1
• una señal 3.2.5
• exposición 27.0.1

@brunoandradebr este es el comportamiento esperado. Abrir la aplicación desde el icono de la aplicación nunca tiene en cuenta ninguna notificación que hayas recibido. Simplemente abre la aplicación.

Si desea cambiar el comportamiento de su aplicación cuando se inicia en función de si el usuario recibió una notificación, deberá verificarlo usted mismo en el inicio.

No es verdad. Cuando abro la aplicación por ícono cuando la aplicación se ejecuta en segundo plano, maneja la notificación automática como se desea. Solo cuando lo elimino de la memoria (deslizar), luego abro por ícono, no pasa nada. Estaba investigando y creo que XCode detiene la aplicación y cierra el enlace lib de oonesignal.

@brunoandradebr Podría estar malinterpretando el problema que está teniendo y a qué devolución de llamada se refiere.
Si la aplicación se ejecuta en segundo plano, es capaz de gestionar eventos received . Pero si la aplicación se cierra, no puede escuchar ningún evento. La única forma en que una notificación puede interactuar con una aplicación (al menos para iOS) es interactuando con la notificación de alguna manera.

Cuando elimino la aplicación y tengo una notificación, si abro la aplicación por ícono, la aplicación no puede manejar eventos de devolución de llamada, PERO si la aplicación se ejecuta en segundo plano y abro por ícono, las devoluciones de llamada se activan como se esperaba. Entendido ?

@brunoandradebr Creo que lo entendí, y si no me equivoco, ese es el comportamiento que describí en mi comentario anterior. En cualquier caso, siento que esto está fuera de tema y si cree que tiene un problema con esto, debe abrir un problema separado en el repositorio.

@jordanmkoncz Parece que tienes una muy buena comprensión de los problemas de reacción de una sola señal nativa. Las versiones que estoy usando react-native-onesignal: ^3.2.8 y react-native: 0.56.0. Pude implementar el manejo de notificaciones en segundo plano y en primer plano, pero ahora me encuentro con un problema cuando se cierra la aplicación y se toca una notificación. La aplicación solo muestra una pantalla blanca en blanco que no desaparece a menos que la cierre y la reinicie. No estoy seguro de cómo manejar esta situación ya que no puedo encontrar ninguna documentación en el sitio web de OneSignal. Es frustrante porque pasé tiempo aprendiendo e implementando esta biblioteca y ahora no estoy seguro de si podrá manejar este caso de uso extremadamente importante. Leí una posible solución para esto anterior que implementa los detectores de eventos en index.js, pero estoy usando la navegación de reacción y necesito obtener una referencia de mi navegador principal que se declara en App.js para navegar a una pantalla de pila anidada. Realmente agradecería cualquier consejo que uno tenga para lidiar con este problema y cómo lo resolvieron. Gracias por adelantado.