首页 > 解决方案 > Firebase 推送通知不会使用 react-native 在后台发送通知

问题描述

我将开发一个使用 Firebase Push Notification 的 react-native 应用程序,当我从 Firebase Console 发送推送通知时,它正在应用程序的后台和前台工作,但是当我使用 PHP(WordPress) 从我的服务器发送通知时它只是在应用程序处于前台而不是后台时发送通知,但通知消息结果显示成功。这里我将提供一些代码

移动端:

        import React, { Component } from "react";

    import { Platform, AsyncStorage } from 'react-native';

    import FCM, { FCMEvent, RemoteNotificationResult, WillPresentNotificationResult, NotificationType } from "react-native-fcm";

    export default class PushNotificationController extends
      Component {
      constructor(props) {
        super(props);
        console.ignoredYellowBox = ['Setting a timer'];

        this.state = {
          firebase_token :'',
        }
      }
      saveFirebaseToken() {
        console.log("------------- as "+this.state.firebase_token+" ---------- ");
        AsyncStorage.setItem('firebase_token', this.state.firebase_token);
      }
      componentDidMount() {
        FCM.requestPermissions();

        FCM.getFCMToken().then(token => {
          console.log(token+' on getFCMToken');

          this.setState({

            firebase_token: token,
          })
          this.saveFirebaseToken()
        });

        FCM.getInitialNotification().then(notif => {
          console.log("INITIAL NOTIFICATION", notif)
        });

        this.notificationListner = FCM.on    (FCMEvent.Notification, notif => {
          console.log("Notification", notif);
          if (notif.local_notification) {
            return;
          }
          if (notif.opened_from_tray) {
            return;
          }

          if (Platform.OS === 'ios') {
            //optional
            //iOS requires developers to call completionHandler to end notification process. If you do not call it your background remote notifications could be throttled, to read more about it see the above documentation link.
            //This library handles it for you automatically with default behavior (for remote notification, finish with NoData; for WillPresent, finish depend on "show_in_foreground"). However if you want to return different result, follow the following code to override
            //notif._notificationType is available for iOS platfrom
            switch (notif._notificationType) {
              case NotificationType.Remote:
                notif.finish(RemoteNotificationResult.NewData) //other types available: RemoteNotificationResult.NewData, RemoteNotificationResult.ResultFailed
                break;
              case NotificationType.NotificationResponse:
                notif.finish();
                break;
              case NotificationType.WillPresent:
                notif.finish(WillPresentNotificationResult.All) //other types available: WillPresentNotificationResult.None
                break;
            }
          }
          this.showLocalNotification(notif);
        });

        this.refreshTokenListener = FCM.on(FCMEvent.RefreshToken, token => {
          console.log("TOKEN (refreshUnsubscribe)", token);
        });
      }

      showLocalNotification(notif) {
        FCM.presentLocalNotification({
          title: notif.title,
          body: notif.body,
          priority: "high",
          click_action: notif.click_action,
          show_in_foreground: true,
          local: true
        });
      }

      componentWillUnmount() {
        this.notificationListner.remove();
        this.refreshTokenListener.remove();
      }
      render() {
        return null;
      }
    }

在清单中添加代码:

    <receiver android:name="com.evollu.react.fcm.FIRLocalMessagingPublisher"/>
     <receiver android:enabled="true" android:exported="true"  android:name="com.evollu.react.fcm.FIRSystemBootEventReceiver">
         <intent-filter>
             <action android:name="android.intent.action.BOOT_COMPLETED"/>
            <action android:name="android.intent.action.QUICKBOOT_POWERON"/>
             <action android:name="com.htc.intent.action.QUICKBOOT_POWERON"/>
             <category android:name="android.intent.category.DEFAULT" />
         </intent-filter>
     </receiver>
       <service android:name="com.evollu.react.fcm.MessagingService" android:enabled="true" android:exported="true">
    <intent-filter>
      <action android:name="com.google.firebase.MESSAGING_EVENT"/>
    </intent-filter>
  </service>

  <service android:name="com.evollu.react.fcm.InstanceIdService" android:exported="false">
    <intent-filter>
      <action android:name="com.google.firebase.INSTANCE_ID_EVENT"/>
    </intent-filter>
 </service>

这是服务器代码:

        function send_notification($tokens, $message)
    {


        $url = 'https://fcm.googleapis.com/fcm/send';
        $fields = array(
             'registration_ids' => $tokens,
             'data' => $message
            );
        $headers = array(
            'Authorization:key = My_KEY',
            'Content-Type: application/json'
            );

       $ch = curl_init();
       curl_setopt($ch, CURLOPT_URL, $url);
       curl_setopt($ch, CURLOPT_POST, true);
       curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
       curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
       curl_setopt ($ch, CURLOPT_SSL_VERIFYHOST, 0);  
       curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
       curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($fields));
       $result = curl_exec($ch);           
       if ($result === FALSE) {
           die('Curl failed: ' . curl_error($ch));
       }
       curl_close($ch);

       return $result;
    }

标签: wordpressfirebasereact-nativefirebase-notifications

解决方案


希望我能在我的一个朋友和底部链接的帮助下解决这个问题。

解决方案:我需要重新格式化发送到 Firbase 服务器的数据,此处涉及用于自定义数据发送和通知的有效负载问题。

function send_notification($tokens, $message)
  {


      $url = 'https://fcm.googleapis.com/fcm/send';


      $msg = array
             (
                'body'      => $data,
                'title'     => "New Job",
                'sound'     => 'default',
                'vibrate'   => 1,
                'largeIcon' => 'large_icon',
                'smallIcon' => 'small_icon'

            );

            $dat = array
            (
                'job_id'     => "90",
                'emp_id'     => "9000",
                'cand_id'     => "1010001"
            );

            $fields = array
            (
                'registration_ids'  => array($tokens),
                'notification'      => $msg,
                'data'       => $dat
            );

      $headers = array(
          'Authorization:key = My_KEY',
          'Content-Type: application/json'
          );

     $ch = curl_init();
     curl_setopt($ch, CURLOPT_URL, $url);
     curl_setopt($ch, CURLOPT_POST, true);
     curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
     curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
     curl_setopt ($ch, CURLOPT_SSL_VERIFYHOST, 0);  
     curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
     curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($fields));
     $result = curl_exec($ch);           
     if ($result === FALSE) {
         die('Curl failed: ' . curl_error($ch));
     }
     curl_close($ch);

     return $result;
  }

还归功于@HarikumarAlangode的有用答案。

为firebase上的参数制作自定义数据以调用推送通知


推荐阅读