Expo 푸시 알림 설정부터 전송까지 (A to Z) - expo-notification

Expo Push Notifications Setup to Sending (A-Z) - expo-notification

npx expo install expo-notifications expo-device expo-constants

import * as Device from 'expo-device';
import * as Notifications from 'expo-notifications';
import Constants from 'expo-constants';
 
function handleRegistrationError(errorMessage: string) {
  alert(errorMessage);
  throw new Error(errorMessage);
}
 
async function registerForPushNotificationsAsync() {
  if (Platform.OS === 'android') {
    Notifications.setNotificationChannelAsync('default', {
      name: 'default',
      importance: Notifications.AndroidImportance.MAX,
      vibrationPattern: [0, 250, 250, 250],
      lightColor: '#FF231F7C',
    });
  }
 
  if (Device.isDevice) {
    const { status: existingStatus } = await Notifications.getPermissionsAsync();
    let finalStatus = existingStatus;
    if (existingStatus !== 'granted') {
      const { status } = await Notifications.requestPermissionsAsync();
      finalStatus = status;
    }
    if (finalStatus !== 'granted') {
      handleRegistrationError('Permission not granted to get push token for push notification!');
      return;
    }
    const projectId =
      Constants?.expoConfig?.extra?.eas?.projectId ?? Constants?.easConfig?.projectId;
    if (!projectId) {
      handleRegistrationError('Project ID not found');
    }
    try {
      const pushTokenString = (
        await Notifications.getExpoPushTokenAsync({
          projectId,
        })
      ).data;
      console.log(pushTokenString);
      return pushTokenString;
    } catch (e: unknown) {
      handleRegistrationError(`${e}`);
    }
  } else {
    handleRegistrationError('Must use physical device for push notifications');
  }
}

const projectId =
      Constants?.expoConfig?.extra?.eas?.projectId ??
      Constants?.easConfig?.projectId;

registerForPushNotificationsAsync()
  .then(token => 
    // sendTokenToServer(token); // 서버에 토큰 전송하는 함수 (직접 구현 필요)
  )
  .catch((error: any) => console.log(error));

notificationListener.current = Notifications.addNotificationReceivedListener(notification => {
  setNotification(notification);
});
return () => {
  notificationListener.current &&
    Notifications.removeNotificationSubscription(notificationListener.current);
};

Notifications.setNotificationHandler({
  handleNotification: async () => ({
    shouldShowAlert: true,
  }),
});

responseListener.current = Notifications.addNotificationResponseReceivedListener(response => {
  console.log(response);
});
return () => {
  responseListener.current &&
    Notifications.removeNotificationSubscription(responseListener.current);
};

Notifications.setNotificationHandler({
  handleNotification: async () => ({
    shouldShowAlert: true,
    shouldPlaySound: true,
    shouldSetBadge: true,
  }),
});

// 이 코드는 백엔드 서버(Node.js 등)에서 실행되어야 합니다.
// 절대로 앱 클라이언트 코드에 API 키나 토큰을 직접 넣지 마세요!
const sendPushNotification = async (expoPushToken, title, body, data) => {
  const message = {
    to: expoPushToken, // 알림을 받을 대상 토큰 (배열로 여러 명에게 동시 전송 가능)
    sound: 'default',  // 알림 도착 시 소리 ('default' 또는 null)
    title: title,      // 알림 제목
    body: body,        // 알림 본문
    data: data,        // 앱에서 추가적으로 사용할 데이터 (JSON 객체)
  };
  try {
    const response = await fetch('https://exp.host/--/api/v2/push/send', {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Accept-encoding': 'gzip, deflate',
        'Content-Type': 'application/json',
        // 'Authorization': `Bearer YOUR_EXPO_ACCESS_TOKEN` // Access Token 방식 사용 시 (선택 사항)
      },
      body: JSON.stringify(message),
    });
    const result = await response.json();
    console.log('Push notification sent:', result);
    // result 객체 예시: { data: { status: 'ok', id: '...' } }
    // status가 'error'인 경우 details 객체에 오류 정보 포함
    //   } catch (error) {
    console.error('Error sending push notification:', error);
  }
};
 
// 사용 예시: 저장된 사용자 토큰으로 알림 보내기
const userToken = 'ExponentPushToken[xxxxxxxxxxxxxxxxxxxxxx]'; // 실제 사용자 토큰 사용
 
sendPushNotification(
  userToken,
  '새로운 메시지',
  '친구가 메시지를 보냈습니다!',
  { messageId: 123, sender: '친구A' } // 앱에서 활용할 추가 데이터
);