web-dev-qa-db-ja.com

React Firebase FCMでネイティブ

ReactネイティブとFirebaseで このドキュメント を使用してプッシュ通知を実装しようとしています。

チュートリアルで必要な設定を行いました。

   import React, { Component } from 'react'
import { View } from 'react-native'
import { Input, Text, Button } from '../Components'
import type { RemoteMessage } from 'react-native-firebase'
import firebase from 'react-native-firebase'
import type { Notification, NotificationOpen } from 'react-native-firebase';

export default class TestComponent extends Component {

  async componentDidMount() {
    await this.SetUpAuth();
    await this.SetUpMessaging();
    this.notificationOpenedListener = firebase.notifications().onNotificationOpened((notificationOpen: NotificationOpen) => {
      // Get the action triggered by the notification being opened
      const action = notificationOpen.action;
      // Get information about the notification that was opened
      const notification: Notification = notificationOpen.notification;
    });
    const notificationOpen: NotificationOpen = await firebase.notifications().getInitialNotification();
    if (notificationOpen) {
      console.log(notificationOpen)
      // App was opened by a notification
      // Get the action triggered by the notification being opened
      const action = notificationOpen.action;
      // Get information about the notification that was opened
      const notification: Notification = notificationOpen.notification;
    }


  }
  componentWillUnmount() {

  }


  async SetUpAuth() {
    const credential = await firebase.auth().signInAnonymouslyAndRetrieveData();
    if (credential) {
      console.log('default app user ->', credential.user.toJSON());
    } else {
      console.error('no credential');
    }
  }
  async SetUpMessaging() {
    this.notification2 = new firebase.notifications.Notification()
      .setNotificationId('notificationId')
      .setTitle('My notification title')
      .setBody('My notification body')
      .Android.setChannelId('test')
      .Android.setClickAction('action')
      .setData({
        key1: 'value1',
        key2: 'value2',
      });

    this.notification2
      .Android.setChannelId('channelId')
      .Android.setSmallIcon('ic_launcher');
    console.log('assa')

    onTokenRefreshListener = firebase.messaging().onTokenRefresh(fcmToken => {
      console.log('token generated ->', fcmToken);
      //   store.dispatch(DeviceActions.SetFCMToken(fcmToken));
    });

    const fcmToken = await firebase.messaging().getToken();
    if (fcmToken) {
      // user has a device token
      console.log('has token ->', fcmToken);
      console.log(firebase.auth().currentUser._user)
      firebase.database().ref(`/users/${firebase.auth().currentUser._user.uid}`).set({ pushToken: fcmToken })
      //   store.dispatch(DeviceActions.SetFCMToken(fcmToken));
    } else {
      // user doesn't have a device token yet
      console.error('no messaging token');
    }

    const messagingEnabled = await firebase.messaging().hasPermission();
    if (messagingEnabled) {
      // user has permissions
      console.log('User has FCM permissions');
    } else {
      // user doesn't have permission
      console.log('User does not have FCM permissions');
      await this.RequestMessagePermissions();
    }

    messageListener = firebase.messaging().onMessage((message: RemoteMessage) => {
      console.log(`Recieved message - ${JSON.stringify(message)}`);
    });

    notificationDisplayedListener = firebase
      .notifications()
      .onNotificationDisplayed(notification => {
        // Process your notification as required
        // Android: Remote notifications do not contain the channel ID. You will have to specify this manually if you'd like to re-display the notification.
        console.log(`Recieved notification 1`);
      });
    notificationListener = firebase
      .notifications()
      .onNotification(notification => {
        console.log(notification)
        firebase.notifications().displayNotification(this.notification2)
        // Process your notification as required
        console.log(`Recieved notification 2`);
      });
  }


  async RequestMessagePermissions() {
    console.log('request')
    console.log('Requesting FCM permission');
    await firebase
      .messaging()
      .requestPermission()
      .catch(err => console.err(err));
  }


  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>

      </View>
    )
  }

私が郵便屋さんでそれを使おうとすると、成功します：

{
  "success": {
    "results": [
        {
            "messageId": "0:1525013439417985%a0cec506a0cec506"
        }
    ],
    "canonicalRegistrationTokenCount": 0,
    "failureCount": 0,
    "successCount": 1,
    "multicastId": 6840884736220792000
  }
}

しかし、デバッガー（console.logによる）では、新しい着信メッセージなどは表示されません。この投稿に追加したトークンを使用してデバイスにメッセージを送信しましたが、何も起こりませんでした。

アプリがフォアグラウンドにあるときにのみ機能しますが、アプリがバックグラウンドにある/アプリを閉じているときにも機能させたい

javascriptfirebasereact-nativefirebase-cloud-messaging
7
Manspof

アプリがフォアグラウンドにあるときに通知が正常に機能している場合、問題はサービスにあります。機能しない理由は2つ考えられます。

  1. ペイロードを次のように送信するか、

    {   
     time_to_live: 86400,
     collapse_key: "xxxxxx",
     delay_while_idle: false,
     registration_ids: registration_ids,
     notification: payload
 }

    の代わりに

      {
       time_to_live: 86400,
        collapse_key: "xxxxxx",
        delay_while_idle: false,
        registration_ids: registration_ids,
        data: payload
  }

これは、通知のキーがアプリがフォアグラウンドにあるときにのみ受信されるためです。

  1. 別の考えられる理由は、サービスワーカーが何らかの理由で殺されていることです。例：アプリを強制終了したときにサービスを自動的に強制終了する1つのプラスを使用していました。したがって、ログを追加するか、デバッガーをアタッチすることで、ネイティブコードでサービスのデバッグを試すことができます

また、Android/appフォルダーにgoogle-service.jsonファイルを必ず追加してください

編集：

{
 "registration_ids" : ["reg_id"],
 "time_to_live": 86400,
  "collapse_key": "test_type_b",
  "delay_while_idle": false,

  "notification": {},   
  "data": {
    "subText":"sub title R",
    "title":"Notification Heading R",
    "message":"Short big text that will be shown when notification is expanded R",
    "color":"red",
    "actions": ["hello", "welcome"],
    "vibrate": true,
    "vibration": 1000,
    "ticker": "My Notification Ticker",
    "imageUrl": "https://cdn-images-1.medium.com/max/712/1*c3cQvYJrVezv_Az0CoDcbA.jpeg" ,
    "bigText": "blalMy big text that will be shown when notification is expanded"
  }
}

これが私のヘッダーです

Authorization: key=mykey:myKey
Content-Type: application/json

リクエスト：

 https://fcm.googleapis.com/fcm/send

これはpostで、paramsはrawタイプです

2
Gaudam Thiyagarajan

docs で述べたように、アプリがバックグラウンドにある場合、onNotificationOpenedのAndroidリスナーが必要です

Androidバックグラウンド：onNotificationOpened通知がタップされるとトリガーされます。

onNotificationDisplayedは、バックグラウンドでのIOSアプリ用ですおよびtriggered if content_available set to true

notificationBackgroundListener = firebase
    .notifications()
    .onNotificationOpened(notification => {
      // Process your notification as required
      console.log(`Recieved notification 2`);
    });
2
Pritish Vaidya

ヘッドレスJSを使用してタスクをバックグラウンドで実行できます。タスクを処理するためのネイティブコードを記述する必要がありますが、残念ながらAndroidでのみ使用できます
https://facebook.github.io/react-native/docs/headless-js-Android.html
2番目の方法（テストしません）は、このライブラリを使用することです
https://github.com/jamesisaac/react-native-background-task#installation



ps：firebaseおよびonesignalなどの他のプッシュ通知サービスはプッシュ通知を簡単に処理し、ユーザーごとに一意の通知が必要でない限り、心配する必要はありません

0
nima moradi