[FCM:5編]メール送信

▼▼正式文書

FCMメッセージを送信する正式なドキュメント
以前のパブリケーションでFCMから送信された情報をreact Nativeアプリケーションから受信する方法について議論した.今回のリリースでは、FCMでメッセージを送信しようとします.

Firebaseコンソールに送信

Firebaseコンソールからの送信はGUIで構成されているため、非常に簡単で容易です.
Firebaseコンソールへ

送信する通知のタイトルと内容を入力します.

通知を送信するターゲットを特定します.

この場合のターゲットはFirebaseに登録されているアプリケーションです.

バージョン、言語、国/地域などの詳細設定も可能.

通知の送信日時を指定します.

予約のお知らせも可能です.

ユーザに通知を送信し,受信を確認した後,火線ベース解析の特定のイベントにダイヤルすることで測定できる.

これで設定が完了したら、クリックして送信を確認して終了です!
FCMサーバからアプリケーションまで、少し時間差がある場合があります.
Androidシミュレータにアラームを送信

iOSのトラブルシューティング

アンドロイドシミュレータの通知は正しく送信されましたが、iOSはいくら待っても通知を送信しませんでした.
まず、以前の設定でも言及しましたが、iOSはシミュレータで通知を受信できません.
FCMからの通知はアップルのAPNsで送信され、物理機器以外に通知はプッシュされていない.
ここには明らかに物理設備が接続されています(そのためにニンジンに25万ウォンでアップルの携帯電話を買いました...)でも成功しなかったのでグーグルゲームをしました
ソリューションリンク次のリンクで問題点が見つかった
[FCM:2編]インフラストラクチャの追加編にiOSを追加する場合は、生成した識別子にプッシュ通知に関する証明書を登録する必要があります.
正式な書類に魅了されたようです...

上記で選択したPush Notificationsでは、「Edit」ボタンをクリックして、製品とリリース版のCertificateを作成して追加します.

以下はCertificateSigningRequest.certSigningRequesファイルで認証し、すべてのキー波を保存します.
(このCertificate、Identifier、Profileなどは毎回混同されているので、きちんと整理しておく必要があります…)
これにより、2つの証明書を作成すると、FCMから送信されたメッセージもiOS物理デバイスから受信されます.

公式文書だけを見て、順番に概念を勉強して、これは喜びと長い旅です...!
△公式文書が重要だと改めて感じました.

プッシュインタラクションの処理

終わったと思ったけど、もう一つ面白いことが…!
ユーザがプッシュ通知を押すと、アプリケーションは無条件に開きます.これは、FCM情報がアプリケーションがバックグラウンドにある場合にのみ送信されるためです.
プーシムが押されたときを検出し、異なる結果を表示することができます.
(プッシュ通知をクリックした場合、アプリケーションが開いてから特定のページに直接アクセスする場合はこれにより実現できます.)
そのためには2つの方法があります

getInitialNotification:アプリケーションがQuit状態で開いている場合

onNotificationOpenedApp:アプリケーションがバックグラウンドで開いているとき

これらを用いて,プロンプトに従ってReact Navigationを実行する画面移動ロジックを記述する.

import React, { useState, useEffect } from 'react';
import messaging from '@react-native-firebase/messaging';
import { NavigationContainer, useNavigation } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function App() {
  const navigation = useNavigation();
  const [loading, setLoading] = useState(true);
  //여기서  초기 Route를 동적으로 설정하는 재밌는 발상이 등장한다.
  //앱이 Quit 상태에서 열릴 때는 이 초기 Route를 변경해준다.
  const [initialRoute, setInitialRoute] = useState('Home');

  useEffect(() => {
    //FCM 메시지의 data payload에 type이라고 하는 특성이 담겨져서 보낸다고 가정해보자.
    //이 "type" 특성은 푸시알림을 눌렀을 때, 이동할 페이지에 대한 정보를 나타낸다.
    
    //앱이 Background에서 열릴 때는 navigate 메소드를 이용해서 다른 remoteMessage.data.type의 화면으로 이동한다.
    messaging().onNotificationOpenedApp(remoteMessage => {
      console.log(
        'Notification caused app to open from background state:',
        remoteMessage.notification,
      );
      navigation.navigate(remoteMessage.data.type);
    });

    //앱이 Quit 상태에서 열릴 때, getInitialNotification 메소드를 사용하고
    //setInitialRoute로 초기 Route를 설정한다.
    messaging()
      .getInitialNotification()
      .then(remoteMessage => {
        if (remoteMessage) {
          console.log(
            'Notification caused app to open from quit state:',
            remoteMessage.notification,
          );
          setInitialRoute(remoteMessage.data.type); // e.g. "Settings"
        }
        setLoading(false);
      });
  }, []);

  if (loading) {
    return null;
  }

  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName={initialRoute}>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Settings" component={SettingsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

こうして、FCMをreact Nativeに適用したチュートリアルを見終わった.
またお話ししたいと思いますfirebase.jsonその時になってからお話しします