Guides
Start typing to search…

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

前提条件

事前に、KARTE SDKの導入を行う必要があります。

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

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

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

導入手順

STEP1: FCM SDK を導入する

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

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

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

STEP3: Firebaseプラグインを導入する

Firebaseプラグインの導入手順の詳細については、こちら をご覧ください。

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

KARTE からプッシュ通知を送信するためには、FCMトークンが必要となります。
そのためアプリケーションからKARTEにFCMトークンを送信する処理を実装します。
以下が起動時とトークン更新時に送信を行うサンプルです。

// エラーハンドリング用の関数
function handleError(error) {
    // Do Something
}

// アプリ起動時にFCMトークンを取得して登録
document.addEventListener("deviceready", function() {
    // 起動時にFCMトークンを取得
    // https://github.com/dpa99c/cordova-plugin-firebasex#gettoken
    window.FirebasePlugin.getToken(function(token) {
        // 取得したFCMトークンと許諾情報をKARTEに送信
        KarteApp.registerFCMToken(token);
    }, handleError);
    
    // トークンが更新された時の処理
    // https://github.com/dpa99c/cordova-plugin-firebasex?tab=readme-ov-file#ontokenrefresh
    window.FirebasePlugin.onTokenRefresh(function(token) {
        // 更新されたFCMトークンと許諾情報をKARTEに送信
        KarteApp.registerFCMToken(token);
    }, handleError);
}, false);

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

Androidの場合

KARTEから送信されるメッセージはデータメッセージとして送信されます。
そのため、データメッセージを処理するための実装を行う必要があります。

データメッセージを処理するために org.apache.cordova.firebase.FirebasePluginMessageReceiver を実装します。

public class YourFirebasePluginMessageReceiver extends FirebasePluginMessageReceiver {
  private final Context context;

  public YourFirebasePluginMessageReceiver(Context context) {
    this.context = context;
	}

	@Override
	public boolean onMessageReceived(RemoteMessage remoteMessage) {
		return MessageHandler.handleMessage(context, remoteMessage);
	}

	@Override
	public boolean sendMessage(Bundle bundle) {
		return false;
	}
}

レシーバーを登録します。

public class MainApplication extends Application {
  @Override
  public void onCreate() {
    super.onCreate();

    new YourFirebasePluginMessageReceiver(getApplicationContext());
    ...
  }
}

iOSの場合

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

通知のタップをハンドリングするために FirebasePluginMessageReceiver を実装します。

@interface YourFirebasePluginMessageReceiver: FirebasePluginMessageReceiver
@end

@implementation YourFirebasePluginMessageReceiver

- (bool)sendNotification:(NSDictionary *)userInfo {
  // KARTE経由のプッシュ通知であるか判定
  KRTRemoteNotification *notification = [[KRTRemoteNotification alloc] initWithUserInfo:userInfo];
  if (notification) {
    // KARTE経由のプッシュ通知
    [notification handle];
  }  
}

@end

レシーバーを登録します。

@implementation AppDelegate

- (BOOL)application:(UIApplication*)application didFinishLaunchingWithOptions:(NSDictionary*)launchOptions
{
  [[YourFirebasePluginMessageReceiver alloc] init];
  ...
}

@end

動作確認

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

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

Updated about 1 month ago