React-native-onesignal: Bagaimana cara mendapatkan notifikasi awal?

Saya memiliki masalah yang sama, dan sepertinya banyak orang lain juga mengalami masalah ini. Beberapa masalah terkait/duplikat yang saya temukan termasuk 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.

Semua masalah ini tampaknya tentang masalah pendengar acara opened yang tidak dipanggil saat Anda mengetuk pemberitahuan push untuk membuka aplikasi dan aplikasi tidak berjalan pada saat itu. Dari apa yang saya baca di masalah tersebut dan pengujian yang saya lakukan, sepertinya penyebab masalah ini adalah pendaftaran pendengar acara yang tertunda dengan cara apa pun (yaitu OneSignal.addEventListener('opened', this.onOpened); dipanggil sedikit setelah aplikasi itu sendiri dimuat). Ini bisa jadi karena Anda memiliki kode ini di dalam komponen React (misalnya dalam fungsi constructor atau componentWillMount atau componentDidMount ), atau karena tidak dipanggil sampai Anda mengkonfigurasi/rehidrasi toko Redux Anda, dll. Dan karena penundaan ini, acara itu sendiri (pemberitahuan dibuka) dipecat oleh react-native-onesignal sebelum pendengar acara terdaftar, dan pada titik ini Anda telah melewatkan acara dan memiliki tidak ada cara untuk mengetahui bahwa itu terjadi. Sebagai catatan tambahan, masalah yang sama ini memengaruhi pendengar acara lain, misalnya pendengar acara ids .

Jika Anda memindahkan kode ini sehingga terjadi sedini mungkin, tampaknya event listener akan didaftarkan sebelum event tersebut diaktifkan dan dengan demikian fungsi event handler Anda akan dipanggil. Misalnya, Anda harus memindahkan kode pendaftaran pendengar acara ke file index.ios.js Anda, atau di awal file App.js Anda jika file index.ios.js Anda hanya mengimpor komponen App dan mendaftarkannya (melalui AppRegistry.registerComponent ).

Setelah Anda menyiapkan ini, Anda sekarang dapat merekam peristiwa saat notifikasi dibuka dan terserah Anda bagaimana Anda menanganinya, yang akan bergantung pada bagaimana aplikasi Anda disiapkan (misalnya apakah Anda menggunakan Redux, atau apakah Anda menggunakan redux-persist, dll.).

Solusi saya saat ini adalah menyimpan pemberitahuan ke variabel yang ditentukan di tingkat atas file App.js saya sendiri (bahkan sebelum saya mendeklarasikan komponen App saya), dan kemudian setelah saya menyelesaikan inisialisasi toko Redux saya (termasuk menunggu rehidrasi toko saya oleh redux-bertahan), saya mengirimkan tindakan dengan pemberitahuan sebagai muatan (jika ada pemberitahuan dibuka), dan kemudian saya juga menghapus pendengar acara tingkat atas saya dan menambahkan acara baru pendengar pada komponen App saya sendiri (pendengar acara ini juga hanya mengirimkan tindakan ke toko Redux saya dengan pemberitahuan, ID perangkat, dll. sebagai muatan tindakan).

Solusi ini jelas sangat hacky, dan mungkin ada beberapa kasus Edge di mana ini tidak akan berfungsi sebagaimana mestinya. Tetapi sampai solusi yang tepat diimplementasikan dalam react-native-onesignal, ini tampaknya merupakan solusi yang layak.

Saya pikir apa yang perlu terjadi adalah agar react-native-onesignal diperbarui sehingga menunggu hingga Anda mengatur event handler Anda sebelum menjalankan event. Salah satu solusi yang mungkin adalah ketika peristiwa terjadi (seperti peristiwa opened ), peristiwa tersebut dimasukkan ke dalam antrian, dan react-native-onesignal kemudian memeriksa apakah ada pendengar acara terkait yang saat ini terdaftar. Jika tidak ada, itu meninggalkan acara dalam antrian. Kemudian, segera setelah pendengar acara terdaftar, acara yang akan diterima oleh pendengar acara ini dipecat dan dihapus dari antrian. Dengan begitu, Anda dapat menambahkan pendengar acara di aplikasi kapan saja (misalnya setelah menunggu toko Redux Anda dikonfigurasi dan direhidrasi, yang berpotensi 1-2 detik setelah aplikasi itu sendiri dimuat), dan kemudian segera setelah pendengar acara terdaftar, fungsi pengendali acara Anda akan dipanggil dan menerima peristiwa yang terjadi (seperti peristiwa bahwa pemberitahuan dibuka).

Solusi lain yang mungkin, setidaknya untuk secara khusus mendeteksi bahwa aplikasi dibuka karena pengguna mengetuk pemberitahuan push, adalah melakukan sesuatu yang mirip dengan getInitialNotification() dari PushNotificationIOS seperti yang Anda sarankan, di mana Anda bisa panggil fungsi itu kapan saja dan itu akan mengembalikan pemberitahuan push yang diketuk pengguna untuk membuka aplikasi (atau null jika ini tidak terjadi). Tetapi bahkan jika ini diimplementasikan dalam react-native-onesignal, itu tidak akan melakukan apa pun untuk menyelesaikan masalah ini yang memengaruhi pendengar acara lainnya (misalnya pendengar acara ids ).

Jadi saya pikir benar-benar perlu ada solusi yang mengatasi masalah inti peristiwa yang dipicu sebelum pendengar acara yang sesuai didaftarkan, yang menyebabkan acara terlewatkan oleh aplikasi.

Hai @jordanmkoncz , dapatkah Anda membagikan kode file tempat Anda mengirim tindakan? Saya memiliki pengaturan asli reaksi yang sama seperti Anda (redux-bertahan dll.)

@ccoeder yakin, ini file App.js saya saat ini.

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;

Catatan: configureStore adalah fungsi yang membuat toko Redux saya (yaitu memanggil createStore() ), kemudian mengatur redux-persist (yaitu memanggil persistStore() ). configureStore mengambil fungsi panggilan balik sebagai parameter, dan dalam panggilan balik onComplete dari fungsi persistStore saya memanggil fungsi panggilan balik yang diteruskan ke configureStore dan meneruskan toko objek sebagai parameter untuk panggilan balik ini. Terakhir, configureStore mengembalikan objek toko.

Jadi pada dasarnya, saya menunggu hingga toko saya disiapkan dan direhidrasi, lalu saya mengirimkan tindakan berdasarkan peristiwa yang diterima oleh pendengar acara awal saya, lalu menambahkan pendengar acara baru dan menghapus pendengar acara awal.

@jordanmkoncz Terima kasih telah membagikan kode Anda. Pada awalnya saya pikir saya memiliki kesalahan yang sama seperti Anda, tetapi saya menyadari bahwa masalah saya terkait dengan pemberitahuan diam. Saya perlu mengambil tindakan jika pemberitahuan datang saat aplikasi ditutup. Saya kira kode Anda tidak berfungsi untuk saya.

Jangan khawatir @ccoeder. Ya masalah benar-benar mengambil tindakan pada pemberitahuan saat aplikasi ditutup adalah masalah yang berbeda. Masalah ini secara khusus berkaitan dengan pendeteksian di aplikasi bahwa pengguna mengetuk pemberitahuan untuk membuka aplikasi, pada saat aplikasi diluncurkan (saat sebelumnya tidak berjalan sama sekali).

Lihatlah bagaimana reaksi-asli-fcm, ada metode yang disebut getInitialNotification

@jordanmkoncz Terima kasih atas kiriman Anda.

Saya memiliki masalah serupa. ketika Aplikasi menerima pemberitahuan push, layar menavigasi ke layar yang diinginkan.
tetapi ketika membuka notifikasi, itu tidak berfungsi untuk fungsi push navigasi.
contoh:
komponenWillMount() {
OneSignal.addEventListener('diterima', this._onReceived);
OneSignal.addEventListener('dibuka', this._onOpened);
}
componentWillUnmount() {
OneSignal.removeEventListener('diterima', this.__onReceived);
OneSignal.removeEventListener('dibuka', this._onOpened);
}
_onDiterima(pemberitahuan) {
console.log('Pemberitahuan diterima: ', pemberitahuan); // bekerja dengan baik
this.props.navigator.push({ pushSreen, passProps : { params } }); // bekerja dengan baik
}
_onOpened(openResult) {
console.log('Badan pemberitahuan: ', openResult.notification.payload.body); // bekerja dengan baik
this.props.navigator.push({ pushSreen, passProps : { params } }); // tidak berfungsi
}

Apa yang Anda pikirkan tentang ini? Jika Anda dapat membantu saya, harap balas di sini. Terima kasih

Hmm.. Saya memiliki komponen PushNotificationHelper sebagai turunan dari Redux Provider saya, yang dirender hanya setelah store direhidrasi.

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

Bahkan jika aplikasi saya jika ditutup -- tidak dalam background AppState, tetapi benar-benar tertutup -- jika saya mengetuk pemberitahuan push, metode onOpened dipanggil dengan openResult objek dan data terkait, dan saya bebas melakukan tindakan redux dispatch dengan tepat.

@wkoutre itu menarik, bisakah Anda memposting versi react-native , react-native-onesignal dll. yang sedang Anda gunakan? Sudahkah Anda menguji ini di iOS dan Android? Sudahkah Anda melakukan pengujian ekstensif untuk membuka aplikasi dengan mengetuk notifikasi push, dengan aplikasi ditutup sepenuhnya pada saat notifikasi push diketuk, dan menemukan bahwa metode onOpened Anda selalu dipanggil 100%?

Bisakah Anda melakukan beberapa pengujian untuk melihat apakah itu masih berfungsi 100% jika Anda secara artifisial menunda pemuatan PushNotificationHelper Anda lebih jauh, misalnya dengan memiliki setTimeout dengan penundaan sekitar 5 detik, setelah itu Anda ubah sesuatu dalam status untuk memungkinkan PushNotificationHelper dipasang dan mendaftarkan pendengar acaranya dengan OneSignal?

@jordanmkoncz

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

Saya sudah menguji di iOS dan Android, ya. Pada keduanya, 100% dari waktu:

• aplikasi benar-benar tertutup
• pemberitahuan push diterima
• pemberitahuan push disadap
• aplikasi dimuat
• onOpened dipanggil dengan data dari notifikasi push, dan openResult.notification.isAppInFocus === false

Saya akan melakukan setTimeout dan menghubungi Anda kembali.

EDIT1: Saya sama sekali tidak mengubah apa pun, dan sekarang gagal di Android 100% setiap saat.

EDIT2: Melakukan penundaan setTimeout menyebabkan onOpened tidak menyala saat memuat aplikasi dari mengetuk pemberitahuan push. Namun, saya memindahkan semuanya ke metode siklus hidup App.js -- komponen root saya terdaftar di index.ios.js dan index.android.js -- dan onOpened disebut 100% iOS waktu, dan ~ 50% dari waktu di Android.

Tidak yakin mengapa Android tidak konsisten, tetapi ini jelas merupakan masalah. Di Android, ketika aplikasi ditutup sepenuhnya dan pemberitahuan masuk, debugger akan dihapus dan semua yang ada di App.js dimuat hingga saya membuat kelas itu sendiri.

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 Penasaran apakah Anda sudah mencoba perpustakaan ini: https://github.com/wix/react-native-notifications

Baiklah, saya punya solusi yang berfungsi 100% di iOS dan Android.

Di App.js saya tetapi sebelum saya mendeklarasikan komponen Aplikasi saya, saya memiliki:

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

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

... di mana setInitialNotification adalah pembuat tindakan.

Kemudian, ketika Aplikasi saya (sekarang dipasang) selesai rehidrasi, saya menelepon:

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

Aplikasi Saya -- dibungkus dengan redux Provider -- kemudian dikembalikan dalam metode render , terlihat seperti...

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

Dari sana, komponen PushNotificationHelper menangani mendengarkan dan menangani semua pemberitahuan push.

@bhoop Sudah beberapa bulan, jadi tidak yakin apakah Anda masih mencari perbaikan tapi... jika demikian, cobalah ini.

@wkoutre Bisakah Anda mengatur PR dengan pembaruan ke file Readme yang menyertakan solusi ini untuk redux?

@avishayil Tentu saja. Aku akan mendapatkannya malam ini

avishayil PR dibuat.

Saya menghadapi masalah yang terdengar seperti ini. Saat aplikasi dibuka, itu berjalan ok semua panggilan balik, saat aplikasi juga di latar belakang. Tetapi, jika saya menerima dorongan, ikon aplikasi saya bertambah +1, dan sistem menampilkan spanduknya dengan konten pemberitahuan TETAPI jika saya mengabaikan spanduk dan membuka aplikasi dengan ikon (bukan dengan spanduk pemberitahuan) panggilan balik diabaikan =[ bagaimana caranya tangani ini ?

• aplikasi pelepasan expo
• bereaksi 16.3.1
• satu sinyal 3.2.5
• pameran 27.0.1

@brunoandradebr ini adalah perilaku yang diharapkan. Membuka aplikasi dari ikon aplikasi tidak pernah memperhitungkan pemberitahuan apa pun yang mungkin Anda terima. Itu hanya membuka aplikasi.

Jika Anda ingin mengubah perilaku aplikasi saat dimulai berdasarkan apakah pengguna menerima pemberitahuan, Anda harus memeriksanya sendiri saat peluncuran.

Itu tidak benar. Ketika saya membuka aplikasi dengan ikon saat aplikasi berjalan di latar belakang, itu menangani pemberitahuan push seperti yang diinginkan. Hanya ketika saya menghapusnya dari memori (swipe), lalu saya buka dengan ikon, tidak ada yang terjadi. Saya sedang menyelidiki dan saya pikir XCode menghentikan aplikasi dan menutup tautan lib sinyal.

@brunoandradebr Saya mungkin salah memahami masalah yang Anda alami, dan panggilan balik mana yang Anda maksud.
Jika aplikasi berjalan di latar belakang, ia mampu menangani peristiwa received . Tetapi jika aplikasi dimatikan, itu tidak dapat mendengarkan acara apa pun. Satu-satunya cara notifikasi dapat berinteraksi dengan aplikasi (setidaknya untuk iOS), adalah dengan berinteraksi dengan notifikasi dengan cara apa pun.

Ketika saya mematikan aplikasi dan memiliki pemberitahuan, jika saya membuka aplikasi dengan ikon, aplikasi tidak dapat menangani peristiwa panggilan balik, TETAPI jika aplikasi berjalan di latar belakang, dan saya membuka dengan ikon, panggilan balik menyala seperti yang diharapkan. Mengerti ?

@brunoandradebr Saya pikir saya mengerti, dan jika saya tidak salah, itulah perilaku yang saya jelaskan di komentar saya sebelumnya. Bagaimanapun, saya merasa ini di luar topik dan jika Anda merasa memiliki masalah dengan ini, Anda harus membuka masalah terpisah di repo.

@jordanmkoncz Anda tampaknya memiliki pemahaman yang sangat baik tentang masalah onesignal asli yang bereaksi. Versi yang saya gunakan react-native-onesignal: ^3.2.8 dan react-native: 0.56.0. Saya dapat menerapkan penanganan pemberitahuan di latar belakang dan latar depan, tetapi saya mengalami masalah sekarang ketika aplikasi ditutup dan pemberitahuan disadap. Aplikasi hanya menampilkan layar putih kosong yang tidak hilang kecuali Anda menutup dan memulai ulang. Saya tidak yakin bagaimana menangani situasi ini karena saya tidak dapat menemukan dokumentasi apa pun di situs web OneSignal. Ini membuat frustrasi karena saya menghabiskan waktu mempelajari dan mengimplementasikan perpustakaan ini dan sekarang saya tidak yakin apakah itu akan mampu menangani kasus penggunaan yang sangat penting ini. Saya membaca solusi yang mungkin untuk ini di atas yang mengimplementasikan pendengar acara di index.js tetapi saya menggunakan navigasi reaksi dan perlu mendapatkan referensi dari navigator utama saya yang dideklarasikan di App.js untuk menavigasi ke layar tumpukan bersarang. Saya akan sangat menghargai saran apa pun yang dimiliki seseorang dalam menangani masalah ini dan bagaimana mereka menyelesaikannya. Terima kasih sebelumnya.