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이 업데이트되어야 한다고 생각합니다. 한 가지 가능한 솔루션은 이벤트가 발생하면(예: opened 이벤트) 이벤트가 대기열에 들어가고 react-native-onesignal이 현재 등록된 해당 이벤트 리스너가 있는지 확인하는 것입니다. 없는 경우 대기열에 이벤트를 남겨둡니다. 그런 다음 이벤트 리스너가 등록되자마자 이 이벤트 리스너가 수신할 이벤트가 시작되고 큐에서 제거됩니다. 그렇게 하면 앱에 이벤트 리스너를 언제든지 추가할 수 있습니다(예: Redux 스토어가 구성되고 재수화되기를 기다린 후, 앱 자체가 로드된 후 1-2초가 될 수 있음). 이벤트 리스너가 등록되면 이벤트 핸들러 함수가 호출되고 발생한 이벤트(예: 알림이 열린 이벤트)를 수신합니다.

사용자가 푸시 알림을 탭했기 때문에 앱이 열렸음을 적어도 감지하기 위한 또 다른 가능한 솔루션은 제안한 대로 getInitialNotification() from PushNotificationIOS 와 유사한 작업을 수행하는 것입니다. 언제든지 해당 기능을 호출하면 사용자가 앱을 열기 위해 탭한 푸시 알림을 반환합니다(또는 이것이 발생하지 않은 경우 null ). 그러나 이것이 react-native-onesignal에서 구현되더라도 다른 이벤트 리스너(예: ids 이벤트 리스너)에 영향을 미치는 이 문제를 해결하기 위해 아무 것도 하지 않습니다.

따라서 해당 이벤트 리스너가 등록되기 전에 발생하는 이벤트의 핵심 문제를 해결하여 앱에서 이벤트를 놓치는 문제를 해결하는 솔루션이 정말로 필요하다고 생각합니다.

@jordanmkoncz님 , 안녕하세요, 작업을 보낸 파일의 코드를 공유할 수 있습니까? 나는 당신과 같은 반응 네이티브 설정을 가지고 있습니다 (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('수신', this._onReceived);
OneSignal.addEventListener('열림', this._onOpened);
}
componentWillUnmount() {
OneSignal.removeEventListener('수신', this.__onReceived);
OneSignal.removeEventListener('열림', this._onOpened);
}
_onReceived(알림) {
console.log('알림 수신: ', 알림); // 잘 작동
this.props.navigator.push({ pushSreen, passProps : { 매개변수 } }); // 잘 작동
}
_onOpened(오픈 결과) {
console.log('알림 본문: ', openResult.notification.payload.body); // 잘 작동
this.props.navigator.push({ pushSreen, passProps : { 매개변수 } }); // 작동 안함
}

이에 대해 어떻게 생각하세요? 당신이 나를 도울 수 있다면 여기에 회신 바랍니다. 감사 해요

흠.. Redux Provider 의 자식으로 PushNotificationHelper 구성 요소가 있습니다. 이 구성 요소는 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을 갖는 경우, 그 후 PushNotificationHelper 가 마운트되고 이벤트 리스너를 OneSignal에 등록할 수 있도록 상태를 변경하시겠습니까?

@jordanmkoncz

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

iOS와 Android 모두에서 테스트했습니다. 예. 둘 다 100%:

• 앱이 완전히 닫혔습니다
• 푸시 알림이 수신됨
• 푸시 알림이 도청됨
• 앱 로드
• onOpened 는 푸시 알림의 데이터로 호출되고 openResult.notification.isAppInFocus === false

setTimeout 하고 다시 연락드리겠습니다.

EDIT1: 저는 아무것도 변경하지 않았으며 이제는 Android에서 100% 실패합니다.

EDIT2: setTimeout 지연을 수행하면 푸시 알림을 탭하여 앱 로드 시 onOpened 가 실행되지 않습니다. 그러나 모든 것을 App.js 의 수명 주기 메서드로 옮겼습니다 -- index.ios.js 및 index.android.js 에 등록된 루트 구성 요소 -- 그리고 onOpened 는 100%라고 합니다. iOS의 경우 시간의 ~50%, 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 물론이죠. 오늘 저녁까지 도착하겠습니다

아비샤일 PR이 만들어졌습니다.

나는 이런 소리가 나는 문제에 직면해 있다. 앱이 열리면 앱이 백그라운드에 있을 때도 모든 콜백이 정상적으로 실행됩니다. 그러나 푸시를 받으면 내 앱 아이콘이 +1 증가하고 시스템은 알림 콘텐츠가 있는 배너를 표시하지만 배너를 무시하고 아이콘(알림 배너가 아님)으로 앱을 열면 콜백이 무시됩니다. =[ 방법 이것을 처리?

• 엑스포 분리 앱
• 반응 16.3.1
• 원시그널 3.2.5
• 엑스포 27.0.1

@brunoandradebr 이것은 예상되는 동작입니다. 앱 아이콘에서 앱을 열면 수신한 알림이 고려되지 않습니다. 그것은 단지 앱을 엽니 다.

사용자가 알림을 수신했는지 여부에 따라 앱이 시작될 때의 동작을 변경하려면 시작 시 직접 확인해야 합니다.

그것은 사실이 아닙니다. 앱이 백그라운드에서 실행 중일 때 아이콘으로 앱을 열면 원하는 대로 푸시 알림을 처리합니다. 메모리에서 제거(스와이프)한 다음 아이콘으로 열면 아무 일도 일어나지 않습니다. 조사 중이었고 XCode가 앱을 중지하고 oonesignal lib 링크를 닫는다고 생각합니다.

@brunoandradebr 귀하가 겪고 있는 문제와 어떤 콜백을 언급하고 있는지 오해할 수 있습니다.
앱이 백그라운드에서 실행되는 경우 received 이벤트를 처리할 수 있습니다. 그러나 앱이 종료되면 어떤 이벤트도 수신할 수 없습니다. 알림이 앱과 상호 작용할 수 있는 유일한 방법(최소한 iOS의 경우)은 어떤 방식으로든 알림과 상호 작용하는 것입니다.

앱을 종료하고 알림이 있을 때 아이콘으로 앱을 열면 앱이 콜백 이벤트를 처리할 수 없지만 앱이 백그라운드에서 실행 중이고 아이콘으로 열면 예상대로 콜백이 실행됩니다. 알았어요 ?

@brunoandradebr 나는 그것을 얻었다고 생각하고, 내가 틀리지 않다면 그것은 내가 이전 코멘트에서 설명한 행동입니다. 어쨌든, 나는 이것이 주제에서 벗어났다고 생각하며 이것에 문제가 있다고 생각되면 repo에서 별도의 문제를 열어야 합니다.

@jordanmkoncz 반응 네이티브 onesignal 문제에 대해 정말 잘 이해하고 있는 것 같습니다. 내가 사용하는 버전은 react-native-onesignal: ^3.2.8 및 react-native: 0.56.0입니다. 백그라운드 및 포그라운드에서 처리 알림을 구현할 수 있었지만 지금 앱이 닫히고 알림을 탭할 때 문제가 발생합니다. 앱을 닫고 다시 시작하지 않는 한 사라지지 않는 빈 흰색 화면만 앱에 표시됩니다. OneSignal의 웹사이트에서 문서를 찾을 수 없기 때문에 이 상황을 처리하는 방법을 잘 모르겠습니다. 이 라이브러리를 배우고 구현하는 데 시간을 보냈기 때문에 실망스럽습니다. 이제 이 라이브러리가 이 매우 중요한 사용 사례를 처리할 수 있을지 확신할 수 없습니다. 위에서 index.js에서 이벤트 리스너를 구현하는 가능한 해결 방법을 읽었지만 반응 탐색을 사용하고 있으며 중첩된 스택 화면으로 이동하려면 App.js에 선언된 기본 탐색기에서 참조를 가져와야 합니다. 이 문제와 해결 방법에 대해 조언을 주시면 정말 감사하겠습니다. 미리 감사드립니다.