React native 无法在 ios 中使用 firecloud Messaging 接收通知

Question

I need your help, all looks good but I cannot receive notification on my react-native application.

Actual setup:

In project.xcworkspace, TARGETS > {App Name} > Signing & Capabilities:

• Background Modes: Background fetch and Remote notifications enabled
• Push Notifications

Firebase Project:

• APNs key was added, with KeyId, TeamId

Apple Developer:

• Identifier added with Push Notifications enabled
• Key added with "Apple Push Notifications service (APNs)"
• Profiles > I created a "Provisioning Profile" to try if I have a connection issue(not resolved with this)

Good to know: I actually use the firebase authentification and it works so I don't think it's a GoogleService-Info.plist issue.

App.js

const requestNotificationPermission = async () => {
  messaging()
    .requestPermission()
    .then(authStatus => {
      console.log('APNs Status: ', authStatus);
      if (
        authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
        authStatus == messaging.AuthorizationStatus.PROVISIONAL
      ) {
        messaging()
          .getToken()
          .then(async (token) => {
            await messaging().registerDeviceForRemoteMessages()
              .then((result) => {
                console.log('Device registered for remote messages: ', result);
              });
            console.log('Token', token);
          });
        messaging().onTokenRefresh(token => {
          console.log('Refresh Token: ', token)
        });
      }
    })
    .catch(err => {
      console.log('Error: ', err);
    });
}

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

  return unsubscribe;
}, [])

Return:

 LOG  APNs Status:  1
 LOG  Device registered for remote messages:  true
 LOG  Token fmORQaQ0FUCjnGA1TgXSDi:APA91bFVDMvgkY13Rl-muzI2kOKCJauFcJCVF7sZZxgnuicawTIcvrl73JtNUEruobDfu1igvgVkXobi3gUTvGXD1QMZoOskXUzAEkDJpMgUvug-9KudE6bJl9oBL0tJCc9Eqv0GXfXa

1. I tried to create a notification from https://console.firebase.google.com/u/0/project/proj-number/messaging Result: Nothing append on react-native app.

2. I tried to create a notification from REST

REST Request Setup:

• Method: POST
• Url: https://fcm.googleapis.com/fcm/send
• Headers > Authorization > key={Cloud Messaging > Server Key}
• Body:

{
    "data": {},
    "notification": {
        "body": "This is an FCM notification",
        "title": "From Postman"
    },
    "to": "fmORQaQ0FUCjnGA1TgX[...]"
}

Postman Result:

{
    "multicast_id": 5211676236934629976,
    "success": 1,
    "failure": 0,
    "canonical_ids": 0,
    "results": [
        {
            "message_id": "0:1660579924324918%fedf4cbefedf4cbe"
        }
    ]
}

React-native result: Nothing append on react-native app.

Answer 1

Resolved:

App.js

const getToken = () => {
  messaging()
    .getToken()
    .then(x => console.log(x))
    .catch(e => console.log(e));
};
const registerForRemoteMessages = () => {
  messaging()
    .registerDeviceForRemoteMessages()
    .then(() => {
      console.log('Registered');
      requestPermissions();
    })
    .catch(e => console.log(e));
};
const requestPermissions = () => {
  messaging()
    .requestPermission()
    .then((status) => {
      if (status === 1) {
        console.log('Authorized');
        onMessage();
      } else {
        console.log('Not authorized');
      }
    })
    .catch(e => console.log(e));
};

const onMessage = () => {
  messaging()
    .onMessage(response => {
      console.log(response.data.notification);
    });
};


React.useEffect(() => {
  getToken();
  if (Platform.OS === 'ios') {
    registerForRemoteMessages();
  } else {
    onMessage();
  }
  const unsubscribe = messaging().onMessage(async remoteMessage => {
    Alert.alert('A new FCM message arrived!', JSON.stringify(remoteMessage));
  })

  return unsubscribe;
}, [])