Silent iOS Push Notification with React Native when app is in background

Question

I have a React Native app where I am trying to get a silent iOS push notification sent to a handler in JavaScript.

The behaviour I am seeing is that the didReceiveRemoteNotification function in AppDelegate gets called but my handler in JavaScript doesn't get called unless the app is in the foreground or has only been closed recently.

The thing I am confused about is clearly the app is being woken up and having it's didReceiveRemoteNotification function called, but then the call to [RCTPushNotificationManager didReceiveRemoteNotification:notification] doesn't seem to do anything.

Also, if I open the app after a notification has been received, then I see the React Native handler is called at that point.

My didReceiveRemoteNotification function looks like this:

- (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)notification
{
  NSLog(@"didReceiveRemoteNotification");

  [RCTPushNotificationManager didReceiveRemoteNotification:notification];
}

In the Root component of my React Native app I have this:

componentDidMount() {
    AppState.addEventListener('change', this.handleAppStateChange);

    PushNotificationIOS.addEventListener('notification', (notification) => {
        console.log("notification recieved");
    })
}
handleAppStateChange(currentAppState) {
    console.log(currentAppState);
}

I am sending a push notification using AWS SNS with the following message:

{
"APNS_SANDBOX":"{\"aps\":{\"content-available\":\"1\"}}"
}

Here is the log from XCode:

2016-04-20 10:38:01.255 [info][tid:com.facebook.React.JavaScript] inactive
2016-04-20 10:38:01.986 [info][tid:com.facebook.React.JavaScript] background
2016-04-20 10:38:17.279 test[4056:1383261] didReceiveRemoteNotification
2016-04-20 10:38:17.284 [info][tid:com.facebook.React.JavaScript] notification recieved
2016-04-20 10:44:56.330 test[4056:1383261] didReceiveRemoteNotification
2016-04-20 10:44:56.332 [info][tid:com.facebook.React.JavaScript] notification recieved
2016-04-20 10:46:07.091 test[4056:1383261] didReceiveRemoteNotification
2016-04-20 10:49:30.039 [info][tid:com.facebook.React.JavaScript] notification recieved
2016-04-20 10:49:30.639 [info][tid:com.facebook.React.JavaScript] active

In this log, 3 push notifications where sent. The ones received at 10:38 and 10:44 both called JavaScript correctly. However, the one received at 10:46 didn't call the handler in JavaScript until I opened the app at 10:49.

Is there anything I can do to ensure the call to my React Native code occurs even with app not running?

Answer 1

In order for notifications to hit your app in the background you need to also define a fetchCompletionHandler, with a completion handler function like below. The aps:{content-available:1} payload should wake up you application and trigger this code in your AppDelegate, and in turn hit your JavaScript in RN.

// fetch notifications in the background and foreground
-(void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)notification 
fetchCompletionHandler:(void (^)(UIBackgroundFetchResult))completionHandler {

[RCTPushNotificationManager didReceiveRemoteNotification:notification];
completionHandler(UIBackgroundFetchResultNewData);
NSLog(@"Notification Body %@", notification);

}