以前にも「【Cordova】FCMによるプッシュ通知のアイコンが白い四角になるときの対処法」というタイトルで同じ記事を投稿しましたが、こちらが補完版です!
前の記事を投稿した段階では私の環境では直せず…となってしまっていたのですが、他のアプリでも試行錯誤をしたところ、ようやくあの白い四角アイコンから正しいアイコンに表示させることに成功しました…!
参考にさせていただいた投稿はこちら。
Status bar icon – ionic 3 · Issue #550 · fechanique/cordova-plugin-fcm · GitHub
https://github.com/fechanique/cordova-plugin-fcm/issues/550
対処方法ですが、まず通知アイコン用のPNG画像を用意します。
私は、アプリアイコンに使用している画像の一部を抜き出し、白一色&透過ありの画像を用意しました。
サイズは下記のとおりです。
ldpi | 36 × 36 |
---|---|
mdpi | 48 × 48 |
hdpi | 72 × 72 |
xhdpi | 96 × 96 |
xxhdpi | 144 × 144 |
xxxhdpi | 192 × 192 |
なお、画像の名前は任意でOKです。
私は分かりやすいように「notice-ldpi.png」のように指定しました。
次に、この画像を config.xml
の <platform name="android">
タグ内に追加します。
<resource-file src="res/icon/android/notice-ldpi.png" target="app/src/main/res/mipmap-ldpi/fcm_push_icon.png" /> <resource-file src="res/icon/android/notice-mdpi.png" target="app/src/main/res/mipmap-mdpi/fcm_push_icon.png" /> <resource-file src="res/icon/android/notice-hdpi.png" target="app/src/main/res/mipmap-hdpi/fcm_push_icon.png" /> <resource-file src="res/icon/android/notice-xhdpi.png" target="app/src/main/res/mipmap-xhdpi/fcm_push_icon.png" /> <resource-file src="res/icon/android/notice-xxhdpi.png" target="app/src/main/res/mipmap-xxhdpi/fcm_push_icon.png" /> <resource-file src="res/icon/android/notice-xxxhdpi.png" target="app/src/main/res/mipmap-xxxhdpi/fcm_push_icon.png" />
上記のように定義することで、Android のプロジェクトに通知用のアイコンが追加されます。
念のため、Android Studio で確認したところ、きちんと mipmap ディレクトリ以下に画像が追加されていました。
そして、下記の設定を追加します。
<config-file parent="/manifest/application/" target="app/src/main/AndroidManifest.xml"> <meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="@mipmap/fcm_push_icon" /> </config-file>
こちらを追加することで、プッシュ通知の時に @mipmap/fcm_push_icon
を使うという指定をすることができます。
追加する場所は、リソース定義を追加した <platform name="android">
タグ内です。
なお、こちらを追加する際は、<widget>
タグに下記を追加するのをお忘れなく。
xmlns:android="http://schemas.android.com/apk/res/android"
あとは、通常通り Build → Run をして頂いた後、Firebase Console から、Cloud Messaging の送信をお試しください。
私の環境では、問題なくアイコンが表示されるようになりました!
以上、Android 端末で FCM からのプッシュ通知を受信した時に、アイコンが白い四角形になってしまう時の対処法でした。
ご参考になれば幸いです。