React Nativeアプリでプッシュ通知を実装することで、タイムリーな更新とアラートを提供することでユーザーエンゲージメントを大幅に向上させることができます。Firebase Cloud Messaging(FCM)は、プラットフォーム間でプッシュ通知を管理するための信頼性が高く、簡単に統合できるソリューションを提供しています。このガイドでは、Firebaseを使用してReact Nativeでプッシュ通知を実行するための手順について説明します。

前提条件

  • エキスポまたはReact Native CLIで設定されたReact Nativeプロジェクト
  • Firebase Consoleで作成したFirebaseプロジェクト
  • JavaScriptとReact Nativeの基本的な知識
  • プロジェクトにインストールされているFirebase SDK

火基盤の設定

まず、Firebaseプロジェクトを作成し、アプリをそれに追加します。 設定ファイルをダウンロードします。

アンドロイド用

google-services.json ファイルをダウンロードして、プロジェクトのandroid/app ディレクトリに置きます。プロジェクト依存関係に Firebase SDK を追加してください。

iOS用

GoogleService-Info.plistファイルをダウンロードしてXcodeプロジェクトに追加します。 CocoaPodsでFirebase SDKをインストールします。

依存関係のインストール

必要な Firebase パッケージをインストールします。

  • ]React ネイティブ CLI: の場合

実行:

  • [] EXPO 管理ワークフロー:[

既存のモジュールのワークフローをバインする、Expo Firebase SDK または eject を使用します。

許可とトークンの取得を要求する

React ネイティブ コードでは、通知の許可をリクエストし、デバイストークンを取得します。

事例:

import messaging from '@react-native-firebase/messaging';

async function requestUserPermission() {
 const authStatus = await messaging().requestPermission();
 const enabled =
 authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
 authStatus === messaging.AuthorizationStatus.PROVISIONAL;

 if (enabled) {
 console.log('Authorization status:', authStatus);
 getFcmToken();
 }
}

async function getFcmToken() {
 const fcmToken = await messaging().getToken();
 if (fcmToken) {
 console.log('FCM Token:', fcmToken);
 // Send token to your server for push notifications
 }
}

requestUserPermission();

着信通知の処理

フォアグラウンド通知と応答を処理するリスナーを設定します。

messaging().onMessage(async remoteMessage => {
 console.log('A new FCM message arrived!', remoteMessage);
 // Show local notification or update UI
});

messaging().setBackgroundMessageHandler(async remoteMessage => {
 console.log('Message handled in the background!', remoteMessage);
 // Handle background message
});

プッシュ通知の送信

Firebase Cloud Messaging API または Firebase Console を使用して通知を送信します。例のペイロード:

{
 "to": "",
 "notification": {
 "title": "Hello!",
 "body": "This is a push notification."
 }
}

クラウドメッセージングREST API または Firebase Console でメッセージを送信します。

コンテンツ

React Native の Firebase でプッシュ通知を統合すると、Firebase の設定、パーミッションのリクエスト、デバイストークンの取得、メッセージの処理が含まれます。適切な実装により、ユーザーのエンゲージメントを改善し、アプリの動的かつインタラクティブな状態を維持できます。