Sendbird Chatを使用してReact Nativeアプリにプッシュ通知を実装する方法
序章：プッシュ通知とは何か、そしてなぜ重要なのか？
プッシュ通知は、アプリケーションによってユーザーに送信される、自動化されたクリック可能なポップアップ メッセージです。デバイスがアイドル状態であるか、バックグラウンドでアプリを実行している場合、メッセージはすぐにデバイスに配信されます。プッシュ通知は次の理由から重要です。
- ユーザーの活動や興味に関する重要な情報、リマインダー、ニュースを配信する
- モバイル アプリのエンゲージメント指標を向上させる
- 注目のコンテンツを紹介する
- ターゲットを絞った関連性の高いトラフィックを促進し、コンバージョン率を向上させます
- パーソナライズされ、適切なタイミングで、関連性の高いコンテンツを使用してシームレスなユーザー エクスペリエンスを作成します
モバイル プッシュ通知に関するガイドには、プッシュ通知、その利点、使用方法について知っておくべきすべてのことが記載されています。< /span>
米国の平均的なスマートフォン ユーザーは 1 日45 件のプッシュ通知を受信していることは注目に値します。 RubyGarage によると、プッシュ通知を導入している組織は、導入していない企業に比べて顧客維持率が 3 倍高く、エンゲージメントが 88% 高いそうです。プッシュ通知のオプトイン率とクリック率には変動があり、業界、場所、タイプに基づいて異なります。 > やその他の多くの要因を考慮すると、プッシュ通知を実装する可能性が高いことは明らかです。
このチュートリアルでは、React Native プッシュ通知を実装するための手順を段階的に説明します。まず、いくつかの前提条件を見てみましょう。
必要な条件
- Sendbird アカウントを作成します。
- Sendbird Chat が React Native アプリで適切に動作することを確認します。
メッセージがアプリから (JavaScript 用 Chat SDK 経由で) Sendbird サーバーに送信されると、サーバーは次のサーバーと通信することに注意してください。 FCM。その後、FCM は Android デバイスにプッシュ通知を配信するか、APN と通信して iOS デバイスにプッシュ通知を配信します。
React Nativeアプリケーションのためのプッシュ通知
プッシュ通知は、JavaScript 用 Sendbird Chat SDK を使用して、ハイブリッド モバイル アプリケーション ユーザー (Android および iOS) に送信できます。現在、JavaScript SDK のプッシュ通知機能は React Native のみと互換性があります。このチュートリアルでは、Firebase Cloud Messaging (FCM) と Sendbird Chat SDK を使用して React Native アプリでプッシュ通知を有効にする方法について詳しく説明します。
実装の詳細に入る前に、FCM メッセージについて説明します。 FCM メッセージには、通知メッセージとデータ メッセージの 2 種類があります。 Firebase ドキュメントによると、「通知メッセージには、ユーザーに表示される事前定義されたキーのセットと、カスタム キーと値のペアのオプションのデータ ペイロードが含まれています。」データ メッセージには、ユーザー定義のキーと値のペアのみが含まれます。 Sendbird はデータ メッセージを使用し、クライアント アプリがこれらのカスタム キーと値のペアで構成されるカスタム メッセージ ペイロードを作成できるようにします。
プッシュ通知は Web アプリケーションではサポートされていません。 Web アプリケーションのプッシュ通知を実装する必要がある場合は、Webhook イベントを使用して Web アプリケーションのプッシュ通知を実装することをお勧めします。
始める前に、Firebase コンソールにアクセスできることを確認してください。飛び込んでみましょう！ 💻
ステップ2：React Native Firebaseモジュールをインストールし、設定ファイルを追加する
React Native Firebase は、Android アプリと iOS アプリの両方ですべての Firebase サービスに React Native サポートを提供する、公式に推奨されるパッケージのコレクションです。 公式ドキュメントの手順に従って、React Native プロジェクトで Android の FCM と iOS の APN を構成します。このステップが完了するまでに、Android アプリと iOS アプリが Firebase プロジェクトに追加され、それぞれの構成ファイルが React Native プロジェクトに追加されているはずです。
FCM からの通知の表示と処理の詳細については、React Native Firebase 通知 ページを参照してください。
ステップ3：プッシュトークンをSendbirdサーバーに登録する
特定のクライアント アプリに通知メッセージを送信するには、FCM には、クライアント アプリ インスタンスによって発行された、Android デバイスの場合は FCM 登録トークン、iOS デバイスの場合は APNs デバイス トークンが必要です。したがって、Sendbird サーバーには、ユーザーに代わって FCM に通知リクエストを送信するために、すべてのクライアント アプリ インスタンスの登録トークンも必要です。 Chat SDK は、これら 2 種類のトークンを Sendbird サーバーに登録および登録解除するためのインターフェイスを提供します。
以下のコード スニペットは、デバイス トークンの登録を示しています。
The registered push token appears in the dashboard under ‘Users > user_id > Chat’:
ステップ4：プッシュ通知メッセージを受信する
デバイス トークンが登録されると、クライアント アプリ インスタンスは、iOS または Android プラットフォームに関係なく、FCM 通知メッセージを受信して処理できるようになります。実装の詳細については、React Native Firebase ドキュメントの使用法ページを参照してください。
Sendbird Chat SDK for JavaScript はアプリケーションの状態を自動的に検出しないため、setForegroundState() と Sendbird SDK によって提供される setBackgroundState() メソッドは、明示的に呼び出す必要があります。
React Native Firebase のドキュメントを参照して、メッセージの受信に使用できるイベント ハンドラを理解してください。以下のコード スニペットは、受信した FCM メッセージの解析を示しています。
注: チャネルは、ユーザーがデバイス上で通知を処理する方法を分類し、制御できるようにするために使用される Android 専用の概念です。
FCM データ メッセージから解析されたデータ オブジェクトには、以下の JSON コードに示すように、一連のキーと値の項目が含まれています。
プッシュ通知のトラブルシューティングのヒント
プッシュ通知のトラブルシューティングは複雑になる場合があります。これを行うためのヒントをいくつか紹介します。
- 開発者がプッシュ通知のデバッグとトラブルシューティングを容易にするために、便利なテスター ツールを構築しました。このツールの使用方法を理解するには、このチュートリアルを参照してください。ツールにはSendbird ダッシュボード。
- Android チャット プッシュ通知のトラブルシューティングについては、この包括的なガイドをご覧ください。
- 障害状態をデバッグしたい場合は、FCM エラー コードを参照してください。