😇

[ReactNative] AndroidでPush通知許可の取り方

2024/04/23に公開

Firebase

はじめに

ReactNative(Expo)を使用してモバイルアプリケーションを作成しています。
FCMを使用してPush通知を受信する機能を構築したのですが、AndroidでPush通知を許可するかどうかの設定をするところで結構ハマったので解決方法の共有です。

まだまだReactNative勉強中なのでもっといい方法や間違っているところがあればコメントいただけると幸いです😁

環境

ライブラリのバージョン等は以下のとおりです。

"expo": "^49.0.20",
"react-native": "0.72.6",
"@react-native-firebase/app": "^18.7.3",
"@react-native-firebase/messaging": "^18.7.3",

今回はあえて、expo-notificationsは使わずにfirebaseが提供しているライブラリのみを使用して開発を行いました。

実装

とりあえずPush通知が許可されているかどうかを確認する関数を作成したので共有します。

import messaging from "@react-native-firebase/messaging";
import { PermissionsAndroid, Platform } from "react-native";

export async function checkNotificationPermission() {
  // 0: not allowed, 1: allowed
  let permission = await messaging().hasPermission();
  if (permission === 1) return true;

  if (Platform.OS === "android" && Platform.Version < 33) {
    return false;
  } else if (Platform.OS === "android") {
    const res = await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.POST_NOTIFICATIONS);
    return res === "granted";
  }

  permission = await messaging().requestPermission();
  if (permission === 1) return true;

  return false;
}

ハマりポイント1：Android SDK33以前のバージョンではアプリをインストールした時のデフォルトの設定が通知を許可するものになっています。許可されていない場合にモーダルを表示して再度確認する方法が見当たらなかったためfalseを返しています。許可されていない場合は端末の設定アプリに飛ばす機能であれば実装可能です。

ハマりポイント2: messaging().requestPermission()はAndroidでは現状許可されているかどうかを返却するのみで、許可するかどうかのモーダルを表示せず、期待している動作になりませんでした。

ハマりポイント3: app.jsonでの設定が必要。ビルドを行う前に下記のようにapp.jsonに設定が必要でした。

{
  "expo": {
    ...
    "android": {
      ...
      "permissions": ["POST_NOTIFICATION"]
    },
    "plugins": [
      "@react-native-firebase/app",
      "@react-native-firebase/messaging"
    ]
  }
}

一番ハマったところ

皆さん気づきましたか？実際のコード上で通知許可をするときにはPermissionsAndroid.PERMISSIONS.POST_NOTIFICATIONSとなっており、notificationが複数形、app.jsonの中で設定する場合には"permissions": ["POST_NOTIFICATION"]となっており、notificationが単数系なんです。
この謎の不一致のおかげで時間が溶けました。

以上になります。
これでよくある「通知を許可しますか？」みたいなモーダルを表示してユーザーに設定を促すことができるようになります。

通知を受け取る際の挙動に関してはmessaging().onMessageやmessaging().setBackgroundMessageHandlerを使用して色々とカスタマイズが可能です

参考資料

https://rnfirebase.io/messaging/usage

はじめに

環境

実装

一番ハマったところ

参考資料

Discussion