Guides

[React Native]プッシュ通知を受信する

Suggest Edits

🚧

iOSで画像などを添付したプッシュ通知に対応する場合

画像や動画などを添付したリッチプッシュ通知に対応するにはExtensionの作成が必要です。
詳しくは リッチプッシュ通知に対応する をご覧ください。

前提条件

事前に、 @react-native-karte/core パッケージの導入を行う必要があります。

KARTE ではプッシュ通知の送信に、Firebase Cloud Messaging（以下FCM）を利用しています。
そのためFCM経由でプッシュ通知を送信するための各種設定を行う必要があります。

また受信側のアプリケーションでもFirebaseライブラリの導入などの対応が必要となります。

なお本ドキュメントでは、React Native Firebase を利用する前提で説明します。
これ以外のライブラリを利用する場合は、読み替えた上で導入を行ってください。

導入手順

STEP1: React Native Firebase を導入する

  1. SDKを導入する
    導入に関しては、下記ドキュメントをご覧ください。
  1. Notification Composer で通知のテストを行う
    Firebase の Notification Composer から通知メッセージを送信し、メッセージが受信できるか確認してください。
    Send a notification message

STEP2: サービスアカウントの設定を行う

KARTEからFCMに対して通知の送信リクエストを行うために、KARTE側にサービスアカウントの設定を行う必要があります。
サービスアカウントを設定する

STEP3: React Native KARTE Notification を導入する

共通

npm または yarn を利用して @react-native-karte/notification パッケージをインストールしてください。

npm install --save @react-native-karte/notification

yarn add @react-native-karte/notification

パッケージのインストールが完了したら、対応するプラットフォーム毎の導入手順に従い設定を進めてください。

iOS

Pod をインストールしてください。

npx pod-install ios

Android

導入にあたり必要な手順はありません。

STEP4: FCMトークンを送信する

KARTE からプッシュ通知を送信するためには、FCMトークンが必要となります。
そのためアプリケーションからKARTEにFCMトークンを送信する処理を実装します。

import { Notification } from '@react-native-karte/notification';

export default function App() {
  React.useEffect(() => {
    messaging()
      .getToken()
      .then((fcmToken) => {
        // 取得したトークンをKARTEに送信
        Notification.registerFCMToken(fcmToken);
      })
      .catch((e) => {
        console.error(e);
      });

    messaging().onTokenRefresh((fcmToken) => {
      // 更新されたトークンをKARTEに送信
      Notification.registerFCMToken(fcmToken);
    });
  });
  
  // ...
}

STEP5: プラットフォーム毎の実装

iOSの場合

受信したプッシュ通知をタップ（開封）した際、通知メッセージに含まれているリンクを開くためには下記の実装が必要となります。
※iOSではsetBackgroundMessageHandlerがトリガーされないため、アプリ未起動時(quit状態)では下記形式の実装が必要です
https://rnfirebase.io/messaging/usage#ios-background-limitation

import { Notification } from '@react-native-karte/notification';

export default function App() {
  React.useEffect(() => {
    // アプリ未起動状態から通知が開かれた際の処理
    messaging()
      .getInitialNotification()
      .then((remoteMessage) => {
        if (remoteMessage) {
          const notification = Notification.create(remoteMessage);
          if (notification) {
            notification.handle();
          }
        }
      });

    // アプリ起動状態から通知が開かれた際の処理
    messaging().onNotificationOpenedApp((remoteMessage) => {
      if (remoteMessage) {
        const notification = Notification.create(remoteMessage);
        if (notification) {
          notification.handle();
        }
      }
    });
  });
  
  // ...
}

foreground時に受信した際に通知が表示されない場合

RNFBMessagingライブラリの実装・仕様の影響で、アプリがforegroundの際にKARTEの通知が自動で表示されないケースがあります。
その際はAndroid同様、onMessage コールバックをハンドルし、ローカル通知を表示する必要があります。

import { Notification } from '@react-native-karte/notification';

export default function App() {
  React.useEffect(() => {
    messaging().onMessage((remoteMessage) => {
      if (remoteMessage) {
        const notification = Notification.create(remoteMessage);
        if (notification) {
          // ここでローカル通知を用いた表示を行います。
        }
      }
    });
  });
  
  // ...
}

受信時のリンク遷移を制御したい場合

Universal Links等への対応でリンク遷移を制御したい場合には、独自にハンドリング処理を記述する必要があります。
※notification.hundle()を呼び出す場合、内部的にUIApplication.openURL()を呼び出す形式となり、ブラウザに遷移します

import { Notification } from '@react-native-karte/notification';

export default function App() {
  React.useEffect(() => {
    // アプリ未起動状態から通知が開かれた際の処理
    messaging()
      .getInitialNotification()
      .then((remoteMessage) => {
        if (remoteMessage) {
          const notification = Notification.create(remoteMessage);
          if (notification) {
            if (notification.url?.startsWith('https://example.com')) {
              // 対応する画面を開く処理を書く
            } else {
              notification.handle();
            }
          }
        }
      });

    // アプリ起動状態から通知が開かれた際の処理
    messaging().onNotificationOpenedApp((remoteMessage) => {
      if (remoteMessage) {
        const notification = Notification.create(remoteMessage);
        if (notification) {
          if (notification.url?.startsWith('https://example.com')) {
            // 対応する画面を開く処理を書く
          } else {
            notification.handle();
          }
        }
      }
    });
  });
  
  // ...
}

Androidの場合

KARTEから送信されるメッセージはデータメッセージとして送信されます。
データメッセージのため、アプリの状態（foreground / background）によって実装する処理が異なります。
※quit状態もbackgroundと同様のsetBackgroundMessageHandlerのハンドラで検知可能です。
https://rnfirebase.io/messaging/usage#message-handlers

foreground時に受信する場合の実装

import { Notification } from '@react-native-karte/notification';

export default function App() {
  React.useEffect(() => {
    messaging().onMessage((remoteMessage) => {
      if (remoteMessage) {
        const notification = Notification.create(remoteMessage);
        if (notification) {
          notification.show();
        }
      }
    });
  });
  
  // ...
}

background時に受信する場合の実装

実装上の注意事項等については、React Native Firebaseのドキュメント もご確認ください。

import { Notification } from '@react-native-karte/notification';

messaging().setBackgroundMessageHandler(async (remoteMessage) => {
  const notification = Notification.create(remoteMessage);
  if (notification) {
    notification.show();
  }
});

動作確認

最後に正しく導入が行われているか確認を行うためにテストメッセージを送信して確認を行います。

詳細については、下記ドキュメントをご覧ください。
テストメッセージを送信する

Updated about 18 hours ago