[Expo] 안드로이드에서 푸시 알림 클릭 시 페이지 이동이 되지 않는 문제 해결

1. 개요

QA 과정에서 안드로이드 기기에서 푸시 알림을 클릭해도 페이지 이동이 이루어지지 않는 문제가 발생했다. 디버깅해보니, Android와 iOS의 푸시 알림 데이터 구조 차이 때문에 발생한 이슈였다.

Android에서는 푸시 데이터가 body 내부에 한 단계 더 감싸진 형태로 전달되었고, 이로 인해 url과 params가 정상적으로 추출되지 않았다.

2. 문제 증상

• 증상: Android 기기에서 푸시 알림 클릭 시 네비게이션이 실행되지 않음.
• 관찰: 콘솔이나 Alert로 데이터를 확인하면 url과 params 값이 undefined로 표시됨.

3. 디버깅 과정

3.1. 데이터 구조 확인

• 시도:
  • console.log(response.notification.request.content)을 사용하여 전체 알림 객체를 확인.
• 결과:
  • iOS: content.data에 바로 데이터가 존재함. (type: object)
  • Android: content.body.data 내부에 감싸져 있음. (type: string)
• 참고: Expo 공식 문서 - Android Notification Object Example

3.2. 데이터 파싱 로직 수정

• 문제 원인: Android에서는 푸시 알림 데이터가 body 안에 string 형태로 감싸져 있어, 기존 방식으로 접근하면 url과 params가 정상적으로 추출되지 않음.
• 해결 방법:
  • 별도의 데이터 파싱 함수를 작성하여 body 내부 데이터를 JSON으로 변환.
  • 파싱 후, url과 params를 추출하여 네비게이션 처리.

4. 최종 해결 코드

// 푸시 알림 데이터 구조에 맞춰 파싱
function parseNotificationData(data: any): any | null {
  if (!data) return null;

  let parsedData = data;
  if (parsedData?.body && typeof parsedData.body === 'string') {
    try {
      parsedData = JSON.parse(parsedData.body);
    } catch {
      return null;
    }
  }
  return parsedData;
}

/**
 * @description
 * - iOS: `response.notification.request.content.data` => object
 * - Android: `response.notification.request.content.data.body` => string
 *
 * @see https://docs.expo.dev/push-notifications/receiving-notifications/#android-notification-object-example-from-addnotificationreceivedlistener
 */
function handleNotificationNavigation(data: any) {
  const parsedData = parseNotificationData(data);
  if (!parsedData) return;

  const { url, params } = parsedData;

  const navigationMappings = [
    { key: 'home', route: 'HomeScreen' },
    { key: 'booking', route: 'BookingScreen' },
    { key: 'settings', route: 'SettingsScreen' },
    { key: 'dashboard', route: 'DashboardScreen' },
    { key: 'billing', route: 'BillingScreen' },
    { key: 'profile', route: 'ProfileScreen' },
  ];

  navigationMappings.forEach(({ key, route, extra }) => {
    if (url?.includes(key)) {
      rootNavigate(route, extra);
    }
  });
}

5. 결론 및 개선 사항

• Android와 iOS 간 푸시 알림 데이터 구조 차이로 인해 발생한 문제였고, 별도의 파싱 로직을 추가하여 해결함.
• 앞으로 푸시 알림 페이로드 전송 시 플랫폼별 데이터 구조를 고려하여 로직을 작성할 필요가 있음.

6. 남은 과제

• data의 타입을 any로 설정해두었는데 any말고 명확하게 타입을 지정할 방법을 찾아 적용하기