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

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

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

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

プロジェクトの作成は、プロジェクトに名前を付けて作成するだけです。
１アプリ１Firebaseプロジェクトが基本（開発、本番で分ける場合もある）なので、利用するアプリの名前を付けておけばいいと思います。
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
docs.monaca.io
 
アプリケーション | Monaca Docs
https://docs.monaca.io/ja/faq/application/#キーストア内の-sha-1-フィンガープリントを確認する方法-monaca-クラウド-ide-上のキーストアを使用


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 アプリの設定」からアップロードするだけで設定完了です。

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

Qiita
 
【iOS】Firebase Cloud Messagingで利用するAPNs認証キー・証明書の作り方 - Qiita
https://qiita.com/MYamate_jp/items/994a31d5408bc09998bc
以前開発したときは、APNs証明書だけだったのに知らぬうちに2つの方法ができていたので備忘録です。そもそもAPNsとは？Apple Push Notification Service(以下、APNs)は、iOSやtvOS、M...

つばくろぐ @takamii228
 
iOSのPush通知でAPNsとの連携を証明書と認証キーでそれぞれやってみた - つばくろ...
https://takamii.hatenablog.com/entry/2020/07/13/190027
iOSアプリのPush通知を実現するには、APNs（Apple Push Notification Service）と連携する必要があります。この連携方式について調べてみたので備忘録としてまとめておきます。 APNsとの連携方式 APNsとの連携はPush通知を受け取るアプリケーションとの連携と、アプリケーションにPush通知を送るようにAPNsへ依頼するアプリケーションとの連携 の2種類行う必要があります。 https://developer.apple.com/documentation/usernotifications/setting_up_a_remote_notification_…

Monacaアプリの設定

構成ファイルのセット

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

Stack Overflow
 
Firebase: Should I add GoogleService-Info.plist to .gitignore?
https://stackoverflow.com/questions/44937175/firebase-should-i-add-googleservice-info-plist-to-gitignore
I'm using Firebase for an iOS project that I want to open source.Should I add GoogleService-Info.plist to .gitignore before I upload I share the project on Github?I know it contains my API key, ...

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

プラグインの追加

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

docs.monaca.io
 
Cordova Firebase プラグイン | Monaca Docs
https://docs.monaca.io/ja/tutorials/firebase/


cordova-plugin-firebasexをインストールします。
バージョンを固定する場合は「package.json」を修正してバージョンを指定します。今回は「11.0.3-cli」を使いました。
Qiita
cordova-plugin-firebasexをCordova CLIでビルドする場合について - Qiita
https://qiita.com/keeey/items/e06bb29246af86d0f0fc
現在、Firebase でプッシュ通知などを行う場合、cordova-plugin-firebasex がよく使用されています。cordova-plugin-firebasex v9.0.1 以降からは、Cordova 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>
  …
Qiita
 
Monaca/Cordova/OnsenUI/Angular2+を半年ほど使ってみてのTips - Qiita
https://qiita.com/lethe2211/items/e50fe6d64bed403b2323#androidビルド時にdexindexoverflowexceptionが出る
これはなにMonaca/Cordova/Onsen UI/Angular2+を使ってAndroid/iOS向けスマートフォンアプリを作成する機会があったので，その際に得た知見をまとめておきます．前提MonacaはE...
また、アプリ名に日本語を使っているとiOSでビルドエラーになるのでこちらも「config.xml」を編集して対応しましょう。

Qiita
 
アプリケーション名に日本語を設定した際のビルドエラーについて - Qiita
https://qiita.com/keeey/items/1f2e264fa3036cf66ca5
Monaca プロジェクトのアプリ設定画面にある アプリケーション名 に日本語を設定すると、ビルドが失敗するケースがあります。アプリケーション名に日本語を設定した場合、iOS では以下のようなエラーが出力されるケースがあります。...

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\": \"これはテストです。\" } }"
}
これで端末にプッシュ通知が飛べば成功です。
サーバーレス開発プラットフォーム Firebase入門

調べてみたAmazon SNS, Android, Cordova, FCM, Firebase, iOS, Monaca

Posted by danishi