Monaca(Cordova)でFCMプッシュ通知を設定、実装するまで

Monaca(Cordova)でのクロスプラットフォーム開発でAndroid、iOSアプリにプッシュ通知機能を実装するまでの手順メモです。

Firebaseプロジェクトを作成、アプリを追加

サーバーレスでモバイル開発のバックエンドを構築できるFirebaseを使ってプッシュ通知を実現します。
Firebaseの機能の一つであるFCM(Firebase Cloud Messaging)を使うために、Firebaseのプロジェクトをまずは作成します。

プロジェクトの作成は、プロジェクトに名前を付けて作成するだけです。
1アプリ1Firebaseプロジェクトが基本(開発、本番で分ける場合もある)なので、利用するアプリの名前を付けておけばいいと思います。
FCMを使うだけなら無料のSparkプランで十分です。

プロジェクトを作成したら、プロジェクトにアプリを登録します。

Androidアプリの追加

Androidパッケージ名はMonacaの「Androidアプリ設定」のパッケージ名を、ニックネームはアプリ名でいいと思います。

署名証明書ですが、これはMonacaのキーストア設定画面からキーストアを作成して、ローカルにエクスポートしたものに下記コマンドを実行して、キーストアのパスワードを入力すれば得られます。
# SHA-1ハッシュ
keytool -exportcert -alias [keystore_alias] -keystore [keystore_path] | openssl sha1
# SHA-256ハッシュ
keytool -exportcert -alias [keystore_alias] -keystore [keystore_path] | openssl sha256


Windowsの場合はopensslコマンドのインストールが必要なので入ってなければ入れましょう。
パスが自動で通らないので注意です。

後のステップはそのまま次へでOKです。

iOSアプリの追加

バンドルIDはMonacaの「Androidアプリ設定」のApp IDを、ニックネームはアプリ名でいいと思います。

App Store IDはApp Store ConnectのApp情報から拾えます。

こちらも後のステップはそのまま次へでOKです。

iOSアプリの設定

さらにiOSアプリは追加でいくつか設定が必要になります。

チームIDの設定

「プロジェクトを設定」→「全般」→「マイアプリ」から追加した「iOSアプリ」を選択してチームIDを設定します。
チーム ID は、Apple Developer ProgramのMembershipから確認できます。

Push Notificationsを有効化

App IDを作るときにPush Notificationsを有効にしていなかった場合は、有効化します。
「Identifiers」から対象のApp IDを選択して、チェックボックスをオンにします。
APNs 認証キーを使う場合は「Configure」からプッシュ通知証明書を設定する必要はありません。

この手順を実行した場合はプロビジョニング・プロファイルは再作成しましょう。

APNs 認証キーを作成

FCMに登録するAPNs 認証キーを作成します。
作ったそのときにしかダウンロードできないので保管に気を付けましょう。

APNs 認証キーをFCMに登録

あとは作ったAPNs 認証キーを「設定」の「Cloud Messaging」→「iOS アプリの設定」からアップロードするだけで設定完了です。

プッシュ通知の設定は以下の記事が参考になりました。


Monacaアプリの設定

構成ファイルのセット

「プロジェクトを設定」→「全般」→「マイアプリ」から構成ファイル「google-services.json」、「GoogleService-Info.plist」をそれぞれダウンロードし、プロジェクトのルートに置きます。
これらのファイルは晒しても一応大丈夫らしく、gitとかにプッシュしちゃっても心配なさそうです。


まあ、そもそもハイブリッドアプリはAPK、IPAを解凍しちゃうと中身見れちゃいますしね。

プラグインの追加

FirebaseのCordovaプラグインを追加します。



cordova-plugin-firebasexをインストールします。
バージョンを固定する場合は「package.json」を修正してバージョンを指定します。今回は「11.0.3-cli」を使いました。


そのままだとAndroidビルドで「DexIndexOverflowException」に引っかかるので「config.xml」に「android-minSdkVersion」を追加します。
  …
  <platform name="android">
    <icon src="/res/android/icon/ldpi.png" density="ldpi"/>
    <icon src="/res/android/icon/mdpi.png" density="mdpi"/>
    <icon src="/res/android/icon/hdpi.png" density="hdpi"/>
    <icon src="/res/android/icon/xhdpi.png" density="xhdpi"/>
    <icon src="/res/android/icon/xxhdpi.png" density="xxhdpi"/>
    <icon src="/res/android/icon/xxxhdpi.png" density="xxxhdpi"/>
    <preference name="android-minSdkVersion" value="21"/>
    <preference name="android-targetSdkVersion" value="29"/>
  </platform>
  …
また、アプリ名に日本語を使っているとiOSでビルドエラーになるのでこちらも「config.xml」を編集して対応しましょう。

Firebaseを利用するコードの追加

devicereadyイベントハンドラーの中に、下記のコードを追加します。
    // プッシュ通知のパーミッションをリクエスト
    FirebasePlugin.grantPermission(function(hasPermission){
        console.log("Permission was " + (hasPermission ? "granted" : "denied"));
    });

    // デバイストークン取得
    FirebasePlugin.getToken(function(fcmToken) {
        console.log(fcmToken);
    }, function(error) {
        console.error(error);
    });
プッシュ通知の権限をリクエストするコードと、Firebaseでのスマホ端末の識別子になるデバイストークンを取得するコードです。

これでデバッグビルドまで、通せばとりあえずプッシュ通知の配信テストができます。

FCMでプッシュ通知を送信

Firebaseのコンソールから「拡大」→「Cloud Messaging」を選択してテストメッセージを送信します。
上記の設定であえば、アプリをインストールしてるすべてのAndroid、iOS端末にプッシュ通知が飛びます。
また、デバイストークンを指定すれば、任意のデバイスに対してプッシュ通知を飛ばすこともできます。

Appendix:Amazon SNSから送信

おまけでAmazon SNSを利用して飛ばす方法にも触れておきます。
SNSを使う場合はSNSからFCMまたはAPNsに接続してメッセージを連携します。

構成図にするとこんな感じで利用することになると思います。
SNSを間に挟むことで、AWSのSDKを使ってプッシュ通知の送信やSNSトピックへのデバイストークンの割り当てができます。

プラットフォームアプリケーションの作成

まずはFCMとの接続定義にになるプラットフォームアプリケーションを作成します。
APIキーにはFCMのサーバーキーを設定します。
※2024/01/26追記
サーバーキーをセットする方法は非推奨になったのでこちらを参考にトークンを設定するようにしましょう。

デバイストークンをアプリケーションエンドポイントに登録

プラグインで取得したデバイストークンをアプリケーションエンドポイントに登録します。

エンドポイントにメッセージを発行

エンドポイントに対してメッセージを発行します。
{
  "GCM": "{\"notification\": { \"title\": \"テスト\", \"body\": \"これはテストです。\" } }"
}
これで端末にプッシュ通知が飛べば成功です。