Androidのプッシュ通知アイコンの設定 -Cordova

本記事は最新のCordova、およびプラグインに追従していません。
最新のライブラリ仕様については公式GitHubをご覧ください。
https://github.com/arnesson/cordova-plugin-firebase/blob/master/docs/NOTIFICATIONS.md

Androidのプッシュ通知(Firebase Cloud Messaging)のアイコン設定でググってもうまくいかないところがあったのでまとめます。

本記事ではcordovaの設定ファイルconfig.xmlにアイコン画像とカラーの指定を行うことで、Androidの設定ファイルであるAndroidManifestを書き換えていきます。

結果としてAndroidビルドの実行で下のようなAndroidManifest.xmlが生成できていればOKです。

AndroidManifest.xml

<manifest>
  <application>
    <meta-data
       android:name="com.google.firebase.messaging.default_notification_icon" 
       android:resource="@drawable/fcm_push_icon" /> 
    <meta-data
       android:name="com.google.firebase.messaging.default_notification_color" 
       android:resource="@color/colorAccent" />

アイコン画像のフォルダ構成はfirebassのAndroidプロジェクトが参考になります。
firebase quickstart-android -GitHub
本記事ではこのようなAndroidプロジェクトを生成することを目指しています。動作がうまくいかないときは、生成したプロジェクトと上のプロジェクトを比較してみてください。

##プッシュ通知用のアイコンの設定
プッシュ通知用のアイコンを設定しておくと通知が来た際にステータスバーにアイコンとして表示します。画像にアルファチャネルがないと真っ白のアイコンになってしまいます。

アイコンの見え方について下の記事が参考になりました。
Firebase Notificationsのアイコンについて纏めてみた -Qiita

ldpi〜xxxhdpiの各サイズのアイコン画像を用意します。
私は1024×1024の画像を用意しionic cordova resourcesを使って生成しました。

各サイズのアイコン画像を配置し、res配下にコピーされるようにconfig.xml設定します。

config.xml

<platform name="android"> 
    <resource-file src="resources/android/fcm_push_icon/drawable-ldpi-icon.png" target="app/src/main/res/drawable-ldpi/fcm_push_icon.png" />
    <resource-file src="resources/android/fcm_push_icon/drawable-mdpi-icon.png" target="app/src/main/res/drawable-mdpi/fcm_push_icon.png" />
    <resource-file src="resources/android/fcm_push_icon/drawable-hdpi-icon.png" target="app/src/main/res/drawable-hdpi/fcm_push_icon.png" />
    <resource-file src="resources/android/fcm_push_icon/drawable-xhdpi-icon.png" target="app/src/main/res/drawable-xhdpi/fcm_push_icon.png" />
    <resource-file src="resources/android/fcm_push_icon/drawable-xxhdpi-icon.png" target="app/src/main/res/drawable-xxhdpi/fcm_push_icon.png" />
    <resource-file src="resources/android/fcm_push_icon/drawable-xxxhdpi-icon.png" target="app/src/main/res/drawable-xxxhdpi/fcm_push_icon.png" />
</platform>

次に通知アイコンを参照するように設定する記述を行います。
android:resource部分にアイコン画像の拡張子を除いたファイル名と一致させます。

config.xml

<platform name="android">
    <config-file parent="/manifest/application" target="AndroidManifest.xml">
        <meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="@drawable/fcm_push_icon" />
    </config-file>
</platform>

##背景カラー設定
notification_colorを設定します。
カラーコードを記述するcolors.xmlの場所を指定します。

config.xml

<config-file parent="/manifest/application" target="AndroidManifest.xml">
    <meta-data android:name="com.google.firebase.messaging.default_notification_color" android:resource="@color/primary" />
</config-file>

###colors.xmlが生成されない場合
ビルドでcolors.xmlが生成されない場合はファイルを作成してAndroidプロジェクトにコピーするように設定します。

config.xml

<platform name="android">
...
    <resource-file src="resources/android/res/values/colors.xml" target="app/src/main/res/values/colors.xml"/>
</platform>

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="primary">#FFFFFF00</color>
    <color name="primary_dark">#FF220022</color>
    <color name="accent">#FF00FFFF</color>
</resources>

##ちょっとハマったこと
default_notification_colorが重複作成されてビルドエラーになることがありました。

cordova-plugin-firebasexがカラー関連の定義を行なっているようで、重複してしまっていました。
カラー定義の記述を削除してプラグインオプションを変更することでカラー定義を行なっています。

package.json

"cordova-plugin-firebasex": {
  "ANDROID_ICON_ACCENT": "#7ECB5C"
}

##参考にしたもの
cordova-plugin-firebase -GitHub