LoginSignup
2
0

More than 3 years have passed since last update.

Ionic + Firebase AndroidでFCMのデフォルトPush通知アイコンを設定する

Last updated at Posted at 2020-11-20

IonicでPush通知を実装する方法はいくつかありますが、Firebase Messaging Service(FCM)を使うことで簡単に実装できます。

FCMの実装については、以下の記事が参考になりました。
Ionic+CordovaでFirebase Cloud Messaging(FCM)の実装

この記事では、Android端末でのデフォルトのPush通知アイコンを設定する方法をご紹介します。

設定しない場合の表示

Push通知で表示されるアイコンですが、送信側と受信側で画像を設定しない場合、白色の画像が表示されます。
FirebaseのCloud MessagingでAndroid端末に通知を送信してみます。
以下のように、通知画像を設定せずにテストメッセージを送信します。
スクリーンショット 2020-11-20 10.32.07.png
受信した端末では、以下のように白色の丸で表示されました。
スクリーンショット 2020-11-20 10.51.57.png
この白色の丸を、指定の画像と色で表示する方法を以下に示します。

アイコン画像を設定する

AndroidManifest.xmlに以下を追記します。

AndroidManifest.xml
<meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="@drawable/fcm_push_icon"/>

これでplatforms/android/app/src/main/res/drawable/fcm_push_icon.pngの画像がPush通知のアイコン画像として表示されます。

デフォルトのアイコン画像の色を設定する

以下のようなcolors.xmlを作成します。設定したいカラーコードに変更してください。

colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorAccent">#3880ff</color>
</resources>

このcolors.xmlをres/values/platforms/android/app/src/main/res/values/に配置します。
config.xmlとAndroidManifest.xmlに以下を追記します。

config.xml
<resource-file src="res/values/colors.xml" target="app/src/main/res/values/colors.xml" />
AndroidManifest.xml
<meta-data android:name="com.google.firebase.messaging.default_notification_color" android:resource="@color/colorAccent"/>

これでpush通知のアイコン画像が、設定した色で表示されます。

参考

https://stackoverflow.com/questions/58668110/ionic-4-fcm-how-to-fix-the-compiler-error-coloraccent-not-found
https://firebase.google.com/docs/cloud-messaging/android/client?hl=ja

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0