Expo로 푸시 알림 붙이기 — 토큰 받고 알림 보내기까지

앱에 푸시 알림을 붙여야 했다. 네이티브로 하면 FCM, APNs를 각각 세팅해야 하는데, Expo를 쓰면 이 과정을 상당 부분 감춰준다. Expo 자체 푸시 서비스가 FCM/APNs 앞단에서 중계 역할을 해주기 때문에, 나는 Expo 푸시 토큰 하나만 관리하면 된다.

설치와 권한 요청

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

먼저 알림이 왔을 때 어떻게 표시할지 핸들러를 등록한다. 이걸 안 하면 앱이 포그라운드일 때 알림이 조용히 무시된다.

import * as Notifications from 'expo-notifications';

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

푸시 토큰 받기

권한을 요청하고 Expo 푸시 토큰을 받는다. 실기기에서만 동작하니까 시뮬레이터 체크를 넣어둔다.

import * as Device from 'expo-device';

async function registerForPush() {
  if (!Device.isDevice) return null;

  const { status } = await Notifications.getPermissionsAsync();
  let finalStatus = status;
  if (status !== 'granted') {
    const req = await Notifications.requestPermissionsAsync();
    finalStatus = req.status;
  }
  if (finalStatus !== 'granted') return null;

  const projectId =
    Constants.expoConfig?.extra?.eas?.projectId;
  const token = await Notifications.getExpoPushTokenAsync({ projectId });
  return token.data; // ExponentPushToken[xxxxxxxx]
}

여기서 처음에 막혔던 게 projectId다. EAS 프로젝트 ID를 명시하지 않으면 토큰 발급이 실패한다. app.json의 extra.eas.projectId에 값이 들어있는지 먼저 확인하는 게 좋다.

알림 보내기

받은 토큰을 서버에 저장해두고, 서버에서 Expo 푸시 API로 POST 요청만 보내면 알림이 간다. 복잡한 인증 없이 토큰만 있으면 된다.

curl -X POST https://exp.host/--/api/v2/push/send \
  -H "Content-Type: application/json" \
  -d '{
    "to": "ExponentPushToken[xxxxxxxx]",
    "title": "새 메시지",
    "body": "확인해보세요"
  }'

서버 없이 로컬에서 테스트하고 싶으면 로컬 알림을 바로 띄울 수도 있다. 예약 발송도 trigger로 처리한다.

await Notifications.scheduleNotificationAsync({
  content: { title: '리마인더', body: '5초 뒤 알림' },
  trigger: { seconds: 5 },
});

탭했을 때 처리

알림을 눌러서 앱을 열었을 때 특정 화면으로 보내려면 응답 리스너를 건다.

useEffect(() => {
  const sub = Notifications.addNotificationResponseReceivedListener((res) => {
    const { screen } = res.notification.request.content.data;
    if (screen) router.push(screen);
  });
  return () => sub.remove();
}, []);

정리

Expo 푸시의 편한 점은 FCM 키나 APNs 인증서를 직접 다루지 않아도 개발 단계에서 알림을 끝까지 돌려볼 수 있다는 거다. 실제 스토어 배포 단계에서는 EAS 빌드가 자격 증명을 대신 세팅해준다. 주의할 점은 실기기에서만 토큰이 나온다는 것과 projectId를 빠뜨리지 않는 것 정도. 이 두 개만 챙기면 30분 안에 알림 하나는 띄워볼 수 있다.