ご質問・お見積り等お気軽にご相談ください
お問い合わせ

【cordova】AndroidアプリFCMプッシュ通知をフォアグラウンドで取得する

【cordova】AndroidアプリFCMプッシュ通知をフォアグラウンドで取得する

こんにちは、システム開発部の山下です。
CordovaでのAndroidアプリ開発環境にてFCM(firebase crowd messaging)でのプッシュ通知を実装したところ
フォアグラウンドで通知を受け取ることができず実装に苦労したので記事に残します。

開発環境

windows10
cordova 10.0.0 (cordova-lib@10.1.0)
AndroidSDK 10.0+(R) API level 30
AndroidSDK build-tool 30.0.3

プラグイン

cordova-plugin-fcm-with-dependecy-updated 7.8.0
cordova-plugin-local-notification 0.9.0-beta.4

FCMプッシュ通知の実装

Firebase側の設定やgoogle-service.jsonの設置は省略します。
不明な場合Firebase公式ドキュメントを参照して設定してください。
 
FCMプラグインを追加する

$ cordova plugin add cordova-plugin-fcm-with-dependecy-updated

 
実装例としてindex.jsのonDeviceReady内に以下のスクリプトを設置します

//FCMトークンの登録
let token = window.localStorage.getItem('token');
if(token == null){
		trySomeTimes(
				FCM.getToken,
				function (getToken) {
						window.localStorage.setItem('token', getToken);
				},
				function (error) {
						alert('端末情報の取得に失敗しました');
				}
			)
		;
}
console.log(window.localStorage.getItem('token'));
setupOnNotification();

function trySomeTimes(asyncFunc, onSuccess, onFailure, customTries) {
		var tries = typeof customTries === "undefined" ? 100 : customTries;
		var interval = setTimeout(function () {
			if (typeof asyncFunc !== "function") {
				onSuccess("Unavailable");
				return;
			}
			asyncFunc()
			.then(function (result) {
				if ((result !== null && result !== "") || tries < 0) {
					onSuccess(result);
				} else {
					trySomeTimes(asyncFunc, onSuccess, onFailure, tries - 1);
				}
			})
			.catch(function (e) {
				clearInterval(interval);
				onFailure(e);
			});
		}, 100);
}

function setupOnNotification() {
    FCM.eventTarget.addEventListener(
        "notification",
        function (data) {
					//フォアグラウンド時の処理
        },
        false
    );
    FCM.getInitialPushPayload()
        .then((payload) => {
					//バックグラウンド時の処理
        })
        .catch((error) => {
    });
}

 
上記コードを追加したあと実機デバッグにてアプリを実行し、取得した場合console.logで出力したトークンに対して
プッシュ通知を送信するとアプリバックグラウンド時は通知が到達しアプリフォアグラウンド時は通知が到達しません。
これはFCMのプラグインの仕様通りでありフォアグラウンドでの通知は独自実装しなければなりません。
 
実機デバッグ中のlog出力

$ adb logcat CordovaLog:V *:S

 

アプリフォアグラウンド時の通知実装

FCMプラグインの公式ドキュメントにある通りcordova-plugin-local-notificationを追加し実装します。

For Android, to show the notification received on the foreground, it’s recommended to use cordova-plugin-local-notification as it provides many presentation and interaction features.

 

$ cordova plugin add cordova-plugin-local-notification

 
先程実装したコード内のフォアグラウンドの処理内に以下を追加します。

cordova.plugins.notification.local.schedule({
		title: data.detail.title,
		foreground: true
});

 

ビルド時のエラーを修正

追加後、実機デバッグまたはビルドを走らせると以下のようなエラーが発生すると思います。

> Task :app:compileDebugJavaWithJavac FAILED
C:\Users\****\Desktop\cordova\test\platforms\android\app\src\main\java\de\appplant\cordova\plugin\notification\Notification.java:33: エラー: シンボルを見つけられません
import android.support.v4.app.NotificationCompat;

 
これらのエラーはlocalnotiicationプラグインがAndroid10以降のバージョンに対応していないため発生します。
こちらの修正はプラグインの公式GitHubにてマージ前のプルリクエストが存在するので修正内容を上書きする形で対応しました。
 
Android 10 updates
https://github.com/katzer/cordova-plugin-local-notifications/pull/1891/files
 
すべてのプラグインファイルを反映後、実機デバッグ時アプリフォアグラウンド状態で通知が届くようになります。

この記事を書いた人
yamashita
yamashita
株式会社ウェブネーションのウェブデザイナー兼フロントエンドエンジニアです。最近はAIチャットやAI画像生成の研究などもしています。