[flutter] FCM で バックグラウンド時の通知アイコンが表示されない時のつまづき

ねらい

Fluter x Firebase Cloud Messaging でプッシュ通知を実装した際に、通知アイコンが思い通りに表示できなかった躓きがあったので共有します。

環境

• Flutter: 3.0.5
• OS: Android
• Android Version: 11
• firebase_messaging: 12.0.1

記事の対象者

• 既にFCMでプッシュ通知の受け取り自体の実装は完了している
• バックグラウンドで通知を受けた場合に ① のように指定したアイコンを表示したい
• 手順通り設定しているつもりだが、② のような単色の塗りつぶしアイコンが表示される

表示のための必要な設定・条件

• 表示する画像ファイルがあること
• 画像が指定された形式であること（サイズ：96x96, 色：グレースケールであること）
• AndroidManifest.xml で画像を指定していること

つまづいていた部分

• AndroidMenifest.xml でのアイコン指定の「記述場所」に誤りがあった
• application 直下に記述するべきところを、activity 直下に記述してしまっていた

誤った記述

activity の項目で <meta-data android:name="io.flutter.embedding.android.NormalTheme"> が既に存在しているため、それにつられてその直下にFCMのアイコンの指定を記述してしまうミスをしていた。

<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="パッケージ名">

    <application
        android:name="${applicationName}"
        android:icon="@mipmap/ic_launcher_adaptive_fore"
        android:roundIcon="@mipmap/ic_launcher"
        android:label="アプリ名">

        <activity
            android:name=".MainActivity" ... ...>
            <meta-data
                android:name="io.flutter.embedding.android.NormalTheme"
                android:resource="@style/NormalTheme" />

            <!-- push 通知のアイコン指定 -->
            <meta-data 
                android:name="com.google.firebase.messaging.default_notification_icon" 
                android:resource="@drawable/ic_stat_icon_notification" />

正しい記述

<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="パッケージ名">

    <application
        android:name="${applicationName}"
        android:icon="@mipmap/ic_launcher_adaptive_fore"
        android:roundIcon="@mipmap/ic_launcher"
        android:label="アプリ名">
	<!-- push 通知のアイコン指定 -->
        <meta-data 
            android:name="com.google.firebase.messaging.default_notification_icon" 
            android:resource="@drawable/ic_stat_icon_notification" />
	        
        <activity
            android:name=".MainActivity" ... ...>
            <meta-data
                android:name="io.flutter.embedding.android.NormalTheme"
                android:resource="@style/NormalTheme" />

 

関連情報

FCM自体の受け取りの実装

https://firebase.google.com/docs/cloud-messaging/flutter/client

終わりに

誤って activity に記述しても、コンソールでエラーが出力されないため解決するのに時間を要しました。

Androidだとプッシュ通知の「チャンネル」指定も AndroidManifest.xml で行うのですが、こちらも application 直下に記述する必要があります。

チャンネルが指定されていない場合、「指定がないのでデフォルトのチャンネルを使います」の旨のログがコンソールに表示されます。

私はそのログ契機で気づきました。

デフォルトの通知チャンネルは「Miscellaneous」という名称でアプリの通知設定に表示されてしまいますので、チャンネルの指定も忘れずに記述しましょう。

例）先程の通知アイコンの設定の下に以下のように通知チャンネルのIDを指定できます

        <meta-data
            android:name="com.google.firebase.messaging.default_notification_channel_id"
            android:value="high_importance_channel" />