【Cordova】FCMによるプッシュ通知のアイコンが白い四角になるときの対処法

村上 著者:村上

【Cordova】FCMによるプッシュ通知のアイコンが白い四角になるときの対処法

調べていたのは別の症状についてだったのですが、これも有益そうだったので、備忘録としてまとめ。
Cordovaで開発中のアプリに、FCM(Firebase Cloud Messaging)を利用したプッシュ通知機能を追加したのですが、Android端末に送られてきた通知のアイコンに指定した画像が反映されず、単なる四角形になってしまったときの対処法について。

参考にさせていただいたサイトはこちらから。

IonicでFCMによるpush通知を行う – Qiita
https://qiita.com/saihoooooooo/items/34712738d5cc6f03cdf4

また、使用しているプラグインはこちらです。

GitHub – fechanique/cordova-plugin-fcm: Google FCM Push Notifications Cordova Plugin
https://github.com/fechanique/cordova-plugin-fcm

 

で、対処法ですが、そもそも原因はアイコン画像が指定されていないか、指定方法が間違っているのが原因です。
そのため、下記の場所にそれぞれアイコンを保存します。

  • platforms/android/res/mipmap-ldpi
  • platforms/android/res/mipmap-mhdpi
  • platforms/android/res/mipmap-hdpi
  • platforms/android/res/mipmap-xxhdpi
  • platforms/android/res/mipmap-xxhdpi
  • platforms/android/res/mipmap-xxxhdpi

そして、config.xml で、下記のようにアイコンの指定を行います。

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

なお、厳密にこのとおりでなくても良いようなので、ファイル名などは適宜変更してください。

あとは、送信時のJSONデータに、アイコンと色を指定すればOKです。

{
  "to": [デバイストークン],
  "priority": "high",
  "notification": {
    "icon"  : [アイコン画像],
    "color" : [色コード],
    "title" : [アプリ名],
    "body"  : [メッセージ],
    "sound" : "default",
  }
}

…が、私の環境ではまだ直っていないので、きっとどこかにミスがあります…。
恐らくですが、アイコン画像の場所とかが怪しいかな。

 

以上、Androidでプッシュ通知にアイコン画像が反映されていない時の対処法でした。
意外とこういう小さな箇所って、だからこそ目についたりするので、気を付けたいですね。

  • この記事いいね! (0)

著者について

村上

村上 administrator