プッシュ通知を受信する

Suggest Edits

前提条件

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 を利用してパッケージをインストールしてください。

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の場合

受信したプッシュ通知をタップ（開封）した際、通知メッセージに含まれているリンクを開くためには下記の実装が必要となります。

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) {
          // ここでローカル通知を用いた表示を行います。
        }
      }
    });
  });
  
  // ...
}

Androidの場合

KARTEから送信されるメッセージはデータメッセージとして送信されます。
データメッセージのため、アプリの状態（foreground / background）によって実装する処理が異なります。

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時に受信する場合の実装

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

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

動作確認

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

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

Updated over 2 years ago