React-native-onesignal: 最初の通知を受け取る方法は？

私も同じ問題を抱えていますが、他の多くの人もこの問題を抱えているようです。 私が見つけたいくつかの関連する/重複する問題には、 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。

これらの問題はすべて、プッシュ通知をタップしてアプリを開き、その時点でアプリが実行されていないときにopenedイベントリスナーが呼び出されないというこの問題に関連しているようです。 私がそれらの問題で読んだことと私が行ったテストから、この問題の原因はイベントリスナーの登録が何らかの形で遅れていることであるようです（つまり、 OneSignal.addEventListener('opened', this.onOpened);はアプリ自体が読み込まれます）。 これは、Reactコンポーネント内（たとえば、 constructorまたはcomponentWillMountまたはcomponentDidMount関数内）にこのコードがあるか、構成/再水和するまで呼び出されないことが原因である可能性がありますそして、この遅延のために、イベント自体（通知が開かれたこと）は、イベントリスナーが登録される前にreact-native-onesignalによって発生します。この時点で、イベントを見逃してしまいました。それが起こったことを知る方法はありません。 補足として、この同じ問題は他のイベントリスナー、たとえばidsイベントリスナーに影響します。

このコードをできるだけ早く発生するように移動すると、イベントが発生する前にイベントリスナーが登録され、イベントハンドラー関数が呼び出されるように見えます。 たとえば、イベントリスナー登録コードをindex.ios.jsファイルに移動するか、 index.ios.jsファイルが単にインポートしている場合はApp.jsファイルの先頭に移動する必要があります。 Appコンポーネントとそれを登録します（ AppRegistry.registerComponentを介して）。

これを設定すると、通知が開かれたイベントとその処理方法をキャプチャできるようになります。これは、アプリの設定方法（使用しているかどうかなど）によって異なります。 Redux、またはredux-persistなどを使用しているかどうか）。

私の現在の解決策は、 App.jsファイル自体のトップレベルで定義された変数に通知を保存し（ Appコンポーネントを宣言する前に）、初期化が完了したらReduxストア（redux-persistによるストアの再水和の待機を含む）、ペイロードとしての通知を使用してアクションをディスパッチし（通知が開かれた場合）、トップレベルのイベントリスナーを削除して新しいイベントを追加しますAppコンポーネント自体のリスナー（これらのイベントリスナーは、アクションペイロードとして通知やデバイスIDなどを使用してアクションをReduxストアにディスパッチするだけです）。

このソリューションは明らかに非常にハッキーであり、おそらくこれが想定どおりに機能しないエッジケースがいくつかあります。 しかし、react-native-onesignalに適切なソリューションが実装されるまで、これは適切な回避策のようです。

発生する必要があるのは、react-native-onesignalを更新して、イベントハンドラーを設定するまで待機してから、イベントを発生させることだと思います。 考えられる解決策の1つは、イベント（ openedイベントなど）が発生すると、イベントがキューに入れられ、react-native-onesignalが対応するイベントリスナーが現在登録されているかどうかを確認することです。 存在しない場合は、イベントをキューに残します。 次に、イベントリスナーが登録されるとすぐに、このイベントリスナーによって受信されるイベントが発生し、キューから削除されます。 そうすれば、いつでもアプリにイベントリスナーを追加できます（たとえば、Reduxストアが構成されて再水和されるのを待った後、アプリ自体が読み込まれてから1〜2秒後になる可能性があります）。イベントリスナーが登録されると、イベントハンドラー関数が呼び出され、発生したイベント（通知が開かれたイベントなど）を受信します。

少なくともユーザーがプッシュ通知をタップしたためにアプリが開かれたことを具体的に検出するための別の可能な解決策は、提案したようにPushNotificationIOS getInitialNotification()と同様のことを行うことです。その関数をいつでも呼び出すと、ユーザーがアプリを開くためにタップしたというプッシュ通知が返されます（これが発生しなかった場合はnull ）。 しかし、これがreact-native-onesignalで実装されたとしても、他のイベントリスナー（ idsイベントリスナーなど）に影響を与えるこの問題を解決するために何もしません。

したがって、対応するイベントリスナーが登録される前にイベントが発生し、アプリがイベントを見逃してしまうというこのコアの問題に対処するソリューションが本当に必要だと思います。

こんにちは@jordanmkoncz 、アクションをディスパッチしたファイルのコードを共有できますか？ 私はあなたと同じreact-nativeセットアップを持っています（redux-persistなど）

@ccoeder確かに、これが私の現在のApp.jsファイルです。

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;

注： configureStoreは、Reduxストアを作成し（つまり、 createStore()を呼び出す）、次にredux-persistを設定する（つまり、 persistStore()を呼び出す）関数です。 configureStoreはパラメーターとしてコールバック関数を取り、 persistStore関数のonCompleteコールバックで、$ configureStoreに渡されたコールバック関数を呼び出してストアを渡しますこのコールバックへのパラメータとしてのオブジェクト。 最後に、 configureStoreはストアオブジェクトを返します。

つまり、基本的には、ストアがセットアップされて再水和されるまで待ってから、最初のイベントリスナーが受信したイベントに基づいてアクションをディスパッチし、新しいイベントリスナーを追加して、最初のイベントリスナーを削除します。

@jordanmkonczコードを共有していただきありがとうございます。 最初はあなたと同じエラーだと思っていましたが、私の問題はサイレント通知に関連していることに気づきました。 アプリケーションが閉じている間に通知が届いた場合は、対処する必要があります。 あなたのコードは私には効かないと思います。

@ccoederの心配はありません。 ええ、アプリが閉じている間に通知に対して実際にアクションを実行するという問題は別の問題です。 この問題は、特に、アプリの起動時に（以前はまったく実行されていなかったときに）、ユーザーがアプリを開くための通知をタップしたことをアプリで検出することに関連しています。

react-native-fcmがどのように機能するかを見てみましょう。getInitialNotificationというメソッドがあります

@jordanmkoncz投稿ありがとうございます。

私も同様の問題を抱えていました。アプリがプッシュ通知を受信すると、画面は目的の画面に移動します。
ただし、通知を開くと、ナビゲーションプッシュ機能では機能しません。
例：
componentWillMount（）{
OneSignal.addEventListener（ 'received'、this._onReceived）;
OneSignal.addEventListener（ 'opened'、this._onOpened）;
}
componentWillUnmount（）{
OneSignal.removeEventListener（ 'received'、this .__ onReceived）;
OneSignal.removeEventListener（ 'opened'、this._onOpened）;
}
_onRecevied（notification）{
console.log（ '受信した通知：'、通知）; //うまく機能している
this.props.navigator.push（{pushSreen、passProps：{params}}）; //うまく機能している
}
_onOpened（openResult）{
console.log（ '通知本文：'、openResult.notification.payload.body）; //うまく機能している
this.props.navigator.push（{pushSreen、passProps：{params}}）; //機能しない
}

あなたはこのことについてどう思いますか？あなたが私を助けることができるならば、ここに返信してください。ありがとう

うーん.. PushNotificationHelperコンポーネントをRedux Providerの子として持っています。これは、 storeが再水和された後にのみレンダリングされます。

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);
  };

アプリが閉じていても（ background AppStateではなく、完全に閉じている）、プッシュ通知をタップすると、 onOpenedメソッドがopenResultで呼び出されます。オブジェクトと関連データ、そして私は適切にdispatch reduxアクションを自由に行うことができます。

@wkoutre興味深いですが、現在使用しているreact-native 、 react-native-onesignalなどのバージョンを投稿していただけますか？ iOSとAndroidの両方でこれをテストしましたか？ プッシュ通知をタップしてアプリを開くという広範なテストを行いました。プッシュ通知がタップされた時点でアプリは完全に閉じられており、 onOpenedメソッドが100％呼び出されていることがわかりましたか？

PushNotificationHelperの読み込みを人為的にさらに遅らせた場合、たとえば5秒のような遅延でsetTimeoutを設定した場合、それが100％の時間で機能するかどうかを確認するために、いくつかのテストを行うことができますか？ PushNotificationHelperをマウントできるように状態を変更し、そのイベントリスナーをOneSignalに登録しますか？

@jordanmkoncz

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

はい、iOSとAndroidの両方でテストしました。 両方で、100％の時間：

• アプリは完全に閉じています
• プッシュ通知を受信します
• プッシュ通知がタップされます
• アプリの読み込み
• onOpenedはプッシュ通知からのデータで呼び出され、 openResult.notification.isAppInFocus === false

setTimeoutを実行して、返信します。

編集1：私はまったく何も変更しませんでしたが、Androidでは100％失敗します。

EDIT2： setTimeoutの遅延を実行すると、プッシュ通知をタップすることによるアプリの読み込み時にonOpenedが起動しなくなりました。 ただし、すべてをApp.jsのライフサイクルメソッドに移動しました。ルートコンポーネントはindex.ios.jsとindex.android.jsに登録されており、 onOpenedは100％と呼ばれます。 iOSの場合、Androidの場合は約50％です。

Androidに一貫性がない理由はわかりませんが、明らかに問題です。 Androidでは、アプリが完全に閉じられて通知が届くと、デバッガーがクリアされ、クラス自体を作成するまでApp.jsのすべてが読み込まれます。

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このライブラリを試したことがあるかどうか興味があります： https ：//github.com/wix/react-native-notifications

了解しました。iOSとAndroidの両方で100％動作する回避策があります。

App.jsにありますが、アプリコンポーネントを宣言する前に、次のようになっています。

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

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

...ここで、 setInitialNotificationはアクションクリエーターです。

次に、（現在マウントされている）アプリの水分補給が終了したら、次のように呼び出します。

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

私のアプリ（redux Providerでラップされている）はrenderメソッドで返され、次のようになります...

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

そこから、 PushNotificationHelperコンポーネントは、すべてのプッシュ通知のリッスンと処理を処理します。

@bhoop数か月経ちましたので、まだ修正を探しているかどうかはわかりませんが...もしそうなら、これを試してみてください。

@wkoutreこのreduxの回避策を含むReadmeファイルの更新を含むPRを設定できますか？

@avishayilもちろんです。今晩までに到着します

avishayilPRが作成されました。

私はこのように聞こえる問題に直面しています。 アプリを開くと、アプリがバックグラウンドで実行されている場合でも、すべてのコールバックが正常に実行されます。 しかし、プッシュを受信すると、アプリアイコンが+1増加し、システムは通知コンテンツを含むバナーを表示しますが、バナーを無視して（通知バナーではなく）アイコンでアプリを開くと、コールバックは無視されます= [how to対応しろ ？

• エキスポデタッチアプリ
• 反応16.3.1
• onesignal 3.2.5
• エキスポ27.0.1

@brunoandradebrこれは予想される動作です。 アプリアイコンからアプリを開くと、受信した可能性のある通知が考慮されません。 アプリを開くだけです。

ユーザーが通知を受信したかどうかに基づいてアプリの起動時の動作を変更する場合は、起動時に自分で確認する必要があります。

それは真実ではない。 アプリがバックグラウンドで実行されているときにアイコンでアプリを開くと、必要に応じてプッシュ通知が処理されます。 メモリから削除（スワイプ）してからアイコンで開くと、何も起こりません。 調査中ですが、XCodeがアプリを停止し、oonesignallibリンクを閉じていると思います。

@brunoandradebr私はあなたが抱えている問題と、あなたが参照しているコールバックを誤解しているかもしれません。
アプリがバックグラウンドで実行されている場合、 receivedイベントを処理できます。 ただし、アプリが強制終了されると、イベントをリッスンできなくなります。 通知がアプリと対話できる唯一の方法（少なくともiOSの場合）は、何らかの方法で通知と対話することです。

アプリを強制終了して通知を受け取ったときに、アイコンでアプリを開くと、アプリはコールバックイベントを処理できませんが、アプリがバックグラウンドで実行されている場合、アイコンで開くと、期待どおりにコールバックが発生します。 とった ？

@brunoandradebr私はそれを理解したと思います、そして私が間違っていなければ、それは私の前のコメントで説明した振る舞いです。 いずれにせよ、これは話題から外れていると思います。これに問題があると思われる場合は、レポで別の問題を開く必要があります。

@jordanmkonczあなたはReactNativeOneSignalの問題を本当によく理解しているようです。 私が使用しているバージョンは、react-native-onesignal：^ 3.2.8およびreact-native：0.56.0です。 バックグラウンドとフォアグラウンドで通知の処理を実装できましたが、アプリを閉じて通知をタップすると問題が発生します。 アプリは、閉じて再起動しない限り消えない空白の白い画面のみを表示します。 OneSignalのWebサイトにドキュメントが見つからないため、この状況に対処する方法がわかりません。 このライブラリの学習と実装に時間を費やしたのでイライラしましたが、この非常に重要なユースケースを処理できるかどうかはわかりません。 index.jsにイベントリスナーを実装する上記の可能な回避策を読みましたが、reactナビゲーションを使用しており、ネストされたスタック画面に移動するには、App.jsで宣言されているメインナビゲーターから参照を取得する必要があります。 この問題に対処し、どのように解決したかについてアドバイスをいただければ幸いです。 前もって感謝します。