Expo Androidのフォアグラウンド通知

はじめに

Androidだけ、フォアグラウンドに通知がいかないので実装しました。
こちらの記事の続きです。
https://zenn.dev/yumemi9808/articles/f0da7987eb524d

Androidのフォアグラウンド実装

Androidの通知許可を取るコードと、フォアグラウンドでの通知受信できるコードを書きました。

index.tsx

export default function Page() {
・・・
// Androidの通知許可を取る
async function requestNotificationPermission() {
  try {
    const permission = PermissionsAndroid.PERMISSIONS.POST_NOTIFICATIONS

    if (!permission) {
      console.error('POST_NOTIFICATIONS 権限がサポートされていません。')
      return
    }

    const granted = await PermissionsAndroid.request(permission)

    if (granted === PermissionsAndroid.RESULTS.GRANTED) {
      console.log('通知の許可が与えられました')
    } else {
      console.log('通知の許可が拒否されました')
    }
  } catch (error) {
    console.error('通知の権限リクエスト中にエラーが発生しました:', error)
  }
}

// 関数を呼び出す
requestNotificationPermission()
  .then(() => {
    console.log('通知の許可リクエストが完了しました')
  })
  .catch(error => {
    console.error('通知の許可リクエスト中にエラーが発生しました:', error)
  })
・・・

useEffect(() => {
    // 通知許可のリクエスト
    requestUserPermission()
      .then(result => {
        console.log(result)
      })
      .catch(error => {
        console.log(error)
      })
    
    // フォアグラウンドでの通知受信
    const unsubscribe = messaging().onMessage(remoteMessage => {
      Alert.alert('A new FCM message arrived!', JSON.stringify(remoteMessage))
    })

    return unsubscribe
  }, [])

公式ドキュメント
https://rnfirebase.io/messaging/usage#android---requesting-permissions
https://rnfirebase.io/messaging/usage#foreground-state-messages

通知画面

このように通知が来たら成功です🎉

さいごに

Androidだけ、フォアグラウンドは実装しないと通知が行かないことを知らなかったので勉強になりました。
バナー通知は、ライブラリを使って実装しないと届かないので、そちらも実装したら別の記事に記載したいと思います。