🍎

Expo Androidのバックグラウンドpush通知にアイコンを反映させる

2025/01/18に公開

はじめに

ExpoでFirebase FCMでAndroidのpush通知にアイコンが表示されなかったので、その時行った対応を書いていきたいと思います。
下記の記事の続きですので、FCMの実装についてやAndroidフォアグラウンドの通知設定についてはこちらをご覧ください。
https://zenn.dev/yumemi9808/articles/f0da7987eb524d
https://zenn.dev/yumemi9808/articles/c85c59ca750793

問題

Androidのバナー通知にだけアイコンが反映されませんでした。

自分の使っている端末とバージョンを確認

私が使用しているAndroid端末はこちらです。

製品名:Xperia 10 IV
モデル名:A202SO
Andoroidバージョン13

こちらにバナー通知のアイコンを表示させるようにしたいです。

解決策

Androidは、バナー通知のアイコンにスモールアイコンというのを設定する必要があるそうです。
スモールアイコンは、"白と透過"で画像を用意することを推奨しています。私はサイズを96×96にしました。

このスモールアイコンの画像を、白い文字またはイラストと背景が透過の画像に変えたら解消しました。

スモールアイコンとは、「通知画面」「ホーム画面のヘッダー」に通常のストアアイコンとは異なる特別なアイコンのことです。

画像のこの部分↓↓↓

参考
https://qoopmk.hatenablog.jp/entry/2019/10/17/080000
https://developer.android.com/develop/ui/views/notifications?hl=ja

app.config.tsにプッシュ通知アイコンを設定

アイコンを設定します。一番上の階層にnotificationを入れて設定してください。
この設定したicon_96x96.pngを白い文字またはイラストと背景が透過の画像にしてください。

app.config.ts
const commonConfig: ExpoConfig = {
  name: 'mii',
  ・・・
  notification: {
    icon: './assets/images/icon_96x96.png',//ここを白と透過の画像にする。
    color: '#FF69B4',//透明の背景なので、この色が背景色になる。
  },
  ・・・
  android: {
    //ここは実際のアプリのアイコンの設定。
    adaptiveIcon: {
      foregroundImage: './assets/images/image.png',
      backgroundColor: '#FF69B4',
    },
    package: 'com.mii',
    googleServicesFile: process.env.GOOGLE_SERVICES_JSON,
  },
  ・・・  
  plugins: [
    'expo-router',
    'expo-font',
    '@react-native-firebase/app',
    '@react-native-firebase/messaging',
    ・・・
  ],
}

これで、アイコンが反映されます🎉

白と透過画像の作り方

ChatGTPに96x96の背景透明で白文字でMIIって入れた画像作ってと言ったらできました!

さいごに

iOSユーザーだったので、スモールアイコンの存在を知らなく、解決に時間がかかってしまいました。勉強になったのでよかったです。

Discussion