【Expo Android 推播整合 04】 裝置註冊：請求通知權限與通知種類介紹

在上一篇中，我們完成了：

• 初始化 Firebase 與 Azure Notification Hub
• 成功從 Firebase 取得 FCM token
• 註冊裝置至 Azure Notification Hub（使用 FCM v1 註冊格式）

• 如何顯示 前景通知
• 如何 請求 Android 13+ 的通知權限
• 如何處理 通知點擊事件（背景與關閉狀態）
• 打包 APK

先來認識手機中的 App 通知類型！

App 通知行為分類

請求 Android 13 通知權限

從 Android 13（API 33）開始，需要向使用者明確請求 POST_NOTIFICATIONS 權限。

import { PermissionsAndroid, Platform } from 'react-native'

async function requestAndroidNotificationPermission() {
  if (Platform.OS === 'android' && Platform.Version >= 33) {
    const granted = await PermissionsAndroid.request(
      PermissionsAndroid.PERMISSIONS.POST_NOTIFICATIONS
    )
    return granted === PermissionsAndroid.RESULTS.GRANTED
  }
  return true
}

顯示前景通知（App 開啟中）

當 App 正在使用中，通知不會由系統自動顯示。我們必須手動接收並彈出提醒。你也可以改用 Toast 或 Modal 呈現。

import messaging from '@react-native-firebase/messaging'
import { Alert } from 'react-native'

messaging().onMessage(async (remoteMessage) => {
  Alert.alert('前景通知', remoteMessage.notification?.title || '收到通知')
})

背景狀態通知點擊

messaging().onNotificationOpenedApp((remoteMessage) => {
  const messaage = remoteMessage?.data?.messaage
  if (typeof messaage === 'string') {
    Alert.alert('來自背景通知訊息:', messaage)
  }
})

關閉狀態通知點擊

const initialMsg = await messaging().getInitialNotification()
const url = initialMsg?.data?.messaage
if (typeof messaage === 'string') {
  Alert.alert('來自關閉通知訊息:', messaage)
}

完整程式碼

import { useEffect, useRef, useState } from 'react';
import { StyleSheet, PermissionsAndroid, Platform, Alert } from 'react-native';
import messaging from '@react-native-firebase/messaging';
import registerDeviceToAzure from '@/hooks/useAzureRegistration';

// 清理資源和取消事件監聽器
const cleanupFns = useRef<(() => void)[]>([])

export default function HomeScreen() {
  useEffect(() => {
    const setupPush = async () => {
      try {
        const granted = await requestAndroidNotificationPermission()
        if (!granted) {
          Alert.alert('未授權通知權限')
          return
        }

        const authStatus = await messaging().requestPermission()
        const enabled =
          authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
          authStatus === messaging.AuthorizationStatus.PROVISIONAL

        if (!enabled) {
          Alert.alert('FCM 權限未啟用')
          return
        }

        const token = await messaging().getToken()
        await registerDeviceToAzure(token)

        const unsub1 = messaging().onMessage(async (remoteMessage) => {
          Alert.alert('前景通知', remoteMessage.notification?.title || '收到通知')
        })

        const unsub2 = messaging().onNotificationOpenedApp((remoteMessage) => {
          const url = remoteMessage?.data?.url
          if (typeof url === 'string') {
            Alert.alert('背景點通知跳轉:', url)
          }
        })

        const initialMsg = await messaging().getInitialNotification()
        const url = initialMsg?.data?.url
        if (typeof url === 'string') {
          Alert.alert('關閉狀態點通知跳轉:', url)
        }

        cleanupFns.current = [unsub1, unsub2]
      } catch (err) {
        Alert.alert('推播初始化錯誤', JSON.stringify(err))
      }
    }

    setupPush()

    return () => {
      cleanupFns.current.forEach((unsub) => unsub())
    }
  }, [])

return ( ...略 );
}

我們已經完成裝置註冊與 App 端的通知顯示了 🎉

因為我們之前已經有使用 prebuild 生成 android 資料夾，接著只要在終端機執行

./gradlew assembleRelease

打包成功後，release APK 會放在 release 資料夾中

專案資料夾/android/app/build/outputs/apk/release

將 app-release.apk 放進手機完成安裝，就可以使用 Azure 做測試發送囉~

相同文章發布於我的部落格