iOS Background Notification troubleshooting

[aslanon]

Issue

Hello, notifications run while the app is on the foregound, but I didn't receive any messages when the app is in the background or killed.

There are a lot of documentation but I can't solve this problem.
What am I doing wrong?

---

Project Files

Javascript

Click To Expand

package.json:

  "dependencies": {
    "@react-native-community/push-notification-ios": "^1.1.0",
    "@react-native-firebase/app": "^6.4.0-rc4",
    "@react-native-firebase/messaging": "^6.4.0-rc4",
    "react": "16.9.0",
    "react-native": "0.61.5",
    "react-native-push-notification": "^3.1.9",
  }

iOS

Click To Expand

ios/Podfile:

• I'm not using Pods
• I'm using Pods and my Podfile looks like:

platform :ios, '10.0'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

target 'Myapp' do
  # Pods for Myapp
  pod 'FBLazyVector', :path => "../node_modules/react-native/Libraries/FBLazyVector"
  pod 'FBReactNativeSpec', :path => "../node_modules/react-native/Libraries/FBReactNativeSpec"
  pod 'RCTRequired', :path => "../node_modules/react-native/Libraries/RCTRequired"
  pod 'RCTTypeSafety', :path => "../node_modules/react-native/Libraries/TypeSafety"
  pod 'React', :path => '../node_modules/react-native/'
  pod 'React-Core', :path => '../node_modules/react-native/'
  pod 'React-CoreModules', :path => '../node_modules/react-native/React/CoreModules'
  pod 'React-Core/DevSupport', :path => '../node_modules/react-native/'
  pod 'React-RCTActionSheet', :path => '../node_modules/react-native/Libraries/ActionSheetIOS'
  pod 'React-RCTAnimation', :path => '../node_modules/react-native/Libraries/NativeAnimation'
  pod 'React-RCTBlob', :path => '../node_modules/react-native/Libraries/Blob'
  pod 'React-RCTImage', :path => '../node_modules/react-native/Libraries/Image'
  pod 'React-RCTLinking', :path => '../node_modules/react-native/Libraries/LinkingIOS'
  pod 'React-RCTNetwork', :path => '../node_modules/react-native/Libraries/Network'
  pod 'React-RCTSettings', :path => '../node_modules/react-native/Libraries/Settings'
  pod 'React-RCTText', :path => '../node_modules/react-native/Libraries/Text'
  pod 'React-RCTVibration', :path => '../node_modules/react-native/Libraries/Vibration'
  pod 'React-Core/RCTWebSocket', :path => '../node_modules/react-native/'

  pod 'React-cxxreact', :path => '../node_modules/react-native/ReactCommon/cxxreact'
  pod 'React-jsi', :path => '../node_modules/react-native/ReactCommon/jsi'
  pod 'React-jsiexecutor', :path => '../node_modules/react-native/ReactCommon/jsiexecutor'
  pod 'React-jsinspector', :path => '../node_modules/react-native/ReactCommon/jsinspector'
  pod 'ReactCommon/jscallinvoker', :path => "../node_modules/react-native/ReactCommon"
  pod 'ReactCommon/turbomodule/core', :path => "../node_modules/react-native/ReactCommon"
  pod 'Yoga', :path => '../node_modules/react-native/ReactCommon/yoga'

  pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
  pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
  pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
  
  pod 'react-native-orientation', :path => '../node_modules/react-native-orientation'

  target 'MyappTests' do
    inherit! :search_paths
    # Pods for testing
  end

  use_native_modules!
end

target 'Myapp-tvOS' do
  # Pods for Myapp-tvOS

  target 'Myapp-tvOSTests' do
    inherit! :search_paths
    # Pods for testing
  end

end

AppDelegate.m:

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

#import "AppDelegate.h"

#import <React/RCTBridge.h>
#import <React/RCTBundleURLProvider.h> 
#import <React/RCTRootView.h>

#import <Firebase.h>
#import <RNCPushNotificationIOS.h>
#import <UserNotifications/UserNotifications.h>

#import "Orientation.h" 

@implementation AppDelegate



// Required to register for notifications
- (void)application:(UIApplication *)application didRegisterUserNotificationSettings:(UIUserNotificationSettings *)notificationSettings
{
 [RNCPushNotificationIOS didRegisterUserNotificationSettings:notificationSettings];
}
// Required for the register event.

- (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken
{
 [RNCPushNotificationIOS didRegisterForRemoteNotificationsWithDeviceToken:deviceToken];
}
// Required for the notification event. You must call the completion handler after handling the remote notification.
- (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo
fetchCompletionHandler:(void (^)(UIBackgroundFetchResult))completionHandler
{
  [RNCPushNotificationIOS didReceiveRemoteNotification:userInfo fetchCompletionHandler:completionHandler];
}
// Required for the registrationError event.
- (void)application:(UIApplication *)application didFailToRegisterForRemoteNotificationsWithError:(NSError *)error
{
 [RNCPushNotificationIOS didFailToRegisterForRemoteNotificationsWithError:error];
}
 
// Required for the localNotification event.
- (void)application:(UIApplication *)application didReceiveLocalNotification:(UILocalNotification *)notification
{
 [RNCPushNotificationIOS didReceiveLocalNotification:notification];
}




- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{

 
   RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                                   moduleName:@"Myapp"
                                            initialProperties:nil];

  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [UIViewController new];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];

  [FIRApp configure];

  UNUserNotificationCenter *center = [UNUserNotificationCenter currentNotificationCenter];
  center.delegate = self;

  return YES;
}


- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
#if DEBUG
  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
#else
  return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif
}

@end

---

Environment

Click To Expand

react-native info output:

info Fetching system and libraries information...
System:
    OS: macOS 10.15.1
    CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
    Memory: 2.36 GB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.13.0 - /usr/local/bin/node
    Yarn: 1.19.1 - /usr/local/bin/yarn
    npm: 6.12.0 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
  IDEs:
    Xcode: 11.3.1/11C504 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.9.0 => 16.9.0
    react-native: 0.61.5 => 0.61.5
  npmGlobalPackages:
    react-native-cli: 2.0.1

• Platform that you're experiencing the issue on:
  • [x ] iOS
  • Android
  • [ x] iOS but have not tested behavior on Android
  • Android but have not tested behavior on iOS
  • Both
• react-native-firebase version you're using that has this issue:
  • none // because I removed when I use to 6.4.0-rc4
• Firebase module(s) you're using that has the issue:
  • e.g. Instance ID
• Are you using TypeScript?
  • N

---

Think react-native-firebase is great? Please consider supporting all of the project maintainers and contributors by donating via our Open Collective where all contributors can submit expenses. [Learn More]

• 👉 Check out React Native Firebase and Invertase on Twitter for updates on the library.

[Ehesp]

Can you show some code please?

[Salakar]

Also are you testing on a real device, background/quit states only work on a real device and not on the simulator. @Ehesp do we actually mention this on the docs anywhere btw?

[Ehesp]

I think so, may need making more obvious...

[aslanon]

I am testing on a real device.

App.js

import React, {useEffect, useState} from 'react';
import {Alert} from 'react-native';

import messaging from '@react-native-firebase/messaging';
import firebase from '@react-native-firebase/app';
import PushNotification from 'react-native-push-notification';
import PushNotificationIOS from '@react-native-community/push-notification-ios';


const App = () => {
  useEffect(() => {
    registerAppWithFCM();
    requestPermission();

    messaging().onNotificationOpenedApp(remoteMessage => {
      console.log(
        'Notification caused app to open from background state:',
        remoteMessage.notification,
      );
      Alert.alert(
        'Notification caused app to open from background state:',
        JSON.stringify(remoteMessage),
      );
    });

    // Check whether an initial notification is available
    messaging()
      .getInitialNotification()
      .then(remoteMessage => {
        if (remoteMessage) {
          console.log(
            'Notification caused app to open from quit state:',
            remoteMessage.notification,
          );
          Alert.alert(
            'Notification caused app to open from quit state:',
            JSON.stringify(remoteMessage),
          );
        }
      });

    const unsubscribe = messaging().onMessage(async remoteMessage => {
      Alert.alert('A new FCM message arrived!', JSON.stringify(remoteMessage));

      PushNotification.localNotification({
        title: 'notification.title',
        message: 'notification.body!',
      });
    });

    return unsubscribe;
  }, []);

  async function registerAppWithFCM() {
    await messaging().registerDeviceForRemoteMessages();
  }

  async function requestPermission() {
    const granted = await messaging().requestPermission({
      alert: true,
      announcement: false,
      badge: true,
      carPlay: true,
      provisional: false,
      sound: true,
    });
    if (granted) {
      const fcmToken = await messaging().getToken();
      console.log(fcmToken);
      console.log('User granted messaging permissions!');
    } else {
      console.log('User declined messaging permissions :(');
    }
  }

  return (
   <View></View>
  );
};

export default App;

index.js

/**
 * @format
 */

import React from 'react';
import {AppRegistry, Alert} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

import messaging from '@react-native-firebase/messaging';

messaging().setBackgroundMessageHandler(async remoteMessage => {
  console.log('Message handled in the background!', remoteMessage);
  Alert.alert('BACKGROUND', JSON.stringify(remoteMessage));
});

function HeadlessCheck({isHeadless}) {
  if (isHeadless) {
    // App has been launched in the background by iOS, ignore
    return null;
  }
  return <App />;
}

AppRegistry.registerComponent(appName, () => HeadlessCheck);

[Ehesp]

How are you checking whether the background events are working? You're doing an alert, however there's no app to trigger an alert in the background?

[gmertk]

Just passing by as I was looking through notification issues.

Correct me if I'm wrong but this looks sketchy:

    registerAppWithFCM();
    requestPermission();

According to docs, requestPermission must be called once the the app has registered with FCM. Since both of your functions are async, you might ask for permissions before registerAppWithFCM resolves.

Not sure if this would break anything. Maybe others shed some light on this.

[ixuz]

I experience similar issue after upgrading to this version 6.4.0-rc4, somehow my App successfully obtains an FCM token from the Firebase Messaging SDK, but the application itself is not visible in the iOS Notification settings page.

My hunch is that the Firebase Messaging SDK somehow fails to register the App for push notifications, but returns an fcm token anyway. 😕

[ngregrichardson]

I'm having the same issue. I receive notifications in the foreground, but the code from onMessage isn't called until the app is brought to the foreground again after receiving a notification in the background. I am on the same version numbers and am also on a real device. I am following this order:

1. await registerDeviceForRemoteMessages
2. hasPermission/requestPermission
3. setup onTokenRefresh
4. setBackgroundMessageHandler

[Ehesp]

@aslanon looking at your AppDelegate file, you've got loads of other methods which are calling RNCPushNotificationIOS. I suspect this will be causing some problems. Try to remove these and see if things work.

Also as @gmertk pointed out, your code is going to be subject to race conditions, and also you're not catching any errors.

@ixuz Is the request for permissions popup showing? No notifications option is nothing to do with whether remote ones can be received, that means the permissions request was never triggered.

[ixuz]

@aslanon looking at your AppDelegate file, you've got loads of other methods which are calling RNCPushNotificationIOS. I suspect this will be causing some problems. Try to remove these and see if things work.

Also as @gmertk pointed out, your code is going to be subject to race conditions, and also you're not catching any errors.

@ixuz Is the request for permissions popup showing? No notifications option is nothing to do with whether remote ones can be received, that means the permissions request was never triggered.

The permission request pop-up does not automatically show up, however I still get the fcm token in return.

await firebase.messaging().requestPermission({
      alert: true,
      announcement: false,
      badge: true,
      carPlay: false,
      provisional: false,
      sound: true
    }

[Ehesp]

Yeah they're not related. Permissions is a local device thing which iOS reads when it needs to display a notification (if it doesn't have permission, it won't show).

The FCM token is requested when you register the device.

[ixuz]

@Ehesp I've adjusted my code slightly, and found the reason why I did not receive any push notification permission request pop-up. I didn't evaluate the hasPermission against the AuthorizationStatus keys.

So now the request permission popup is showing up, and upon acceptance, the app shows up in the iOS Settings/Alarms screen(all permissions granted). All good! 👍

Except for one thing, whenever I try to send a push notification to the obtained fcm token, it never shows up on the device.

Here's a complete sample of how I'm obtaining the fcm token.

if (!firebase.messaging().isDeviceRegisteredForRemoteMessages) {
  await firebase.messaging().registerDeviceForRemoteMessages();
}

let authStatus = await firebase.messaging().hasPermission();

if (authStatus !== firebase.messaging.AuthorizationStatus.AUTHORIZED) {
  authStatus = await firebase.messaging().requestPermission({
    alert: true,
    announcement: false,
    badge: true,
    carPlay: false,
    provisional: false,
    sound: true
  });
}

if (authStatus === firebase.messaging.AuthorizationStatus.AUTHORIZED) {
  const token = await firebase.messaging().getToken();
  if (token) {
    // Here the "token" is defined, but push notifications never arrive using this fcm token...
  }
}

I'm sending my test push notification via the Firebase project page "Compose notification">"Send test message".

Any advice?

[Salakar]

Details

@ixuz Can you confirm:

• this is on a real device
• PushNotifications capability added to your Xcode project
• if data messages & for background/quit states;
  • Background Modes -> Remote Notifications is added to your Xcode project capabilities.
  • APNS content-available is set on message payload & priority is high

[ixuz]

@Salakar I confirm:

• Real device "iPhone 5c", not a simulator.
• Confirms PushNotifications capability is added to Xcode project, also our push notifications worked with the prior version: 6.3.4.
• Confirms Background Modes -> Remove Notification is added and checked.

[Salakar]

@ixuz uninstall and re-install the app on your device once you've made that change. Note after doing this you will have a new token though