Expo Push Notification

Gale Lee
6 min readApr 11, 2019

--

Expo에서 제공하는 예제와 Push SDK (Node js)를 사용해서 간단히 푸시 시스템을 만들어 보겠습니다.

사전 작업

아래 Push Notification Sequence Diagram을 보면 App이 실행되는 순간 푸시토큰이 생성되고 3. Push Token 및 앱 정보 저장에서 푸쉬토큰을 저장하는 것을 볼 수 있습니다. Admin은 푸시 대상자를 선정해서 6. 푸시발송 API를 호출합니다. 이때 Server에서 보관 중인 푸시토큰을 가져와서 Push Server에 8. 푸시 요청 API를 호출합니다. Push Server는 Expo Push 서버에 다시 요청을 하게되고 Expo Push Server는 푸시토큰에 담긴 정보로 APNS와 FCM 중 어느 곳으로 보낼 푸시인지 결정하고 푸시받는 단말기 정보를 APNS와 FCM에 전달합니다. APNS와 FCM이 최종적으로 단말기에 푸시 알람을 전달합니다.

Push Notification Sequence Diagram

Push Token

푸시토큰은 Application 단위로 만들어지며 Application을 삭제 후 재설치하게 되면 푸시토큰이 변경됩니다.

Expo 푸시는 예뮬레이터에서 수신 받을 수 없습니다. 디바이스에서만 수신 할 수 있습니다.

아래 소스는 App에서 푸시토큰을 만들고 Server에 요청하는 소스입니다. 먼저 App에서 푸시권한을 획득합니다. 권한을 획득했다면 푸시토큰을 생성해서 3. 푸시토큰 및 앱 정보 저장 API로 서버에 푸시토큰정보와 기타 앱정보 저장을 요청합니다.

푸시토큰 생성 및 App 기타정보 설정

Expo Push Notification Tool로 푸쉬토큰만 있으면 미리 푸시 테스트 해 볼수 있습니다.

https://expo.io/dashboard/notifications

Server

App에서 전달받은 푸시토큰은 바로 사용하지 않고 7. 푸쉬 대상자 목록화에서 사용되니 DB에 저장해서 보관합니다.

Admin에서는 푸시 대상자를 선택하고 푸시를 발송합니다. 이때 6.푸시발송 API를 호출합니다.

Server는 푸시 대상자의 푸시토큰을 가져와서 7. 푸쉬 대상자 목록화 한 다음 Push Server에 8. 푸시 요청API 요청합니다.

Expo Push Server SDK를 설치합니다.

아래 사이트에 들어가면 언어별로 SDK 사용 방법이 있습니다. 저는

Node js SDK를 사용했습니다.

https://docs.expo.io/versions/latest/guides/push-notifications (페이지 중간 쯤 링크가 있습니다.)

아래 소스를 보면 푸시토큰 배열 객체에서 푸시토큰을 꺼내서 messages 배열 객체를 만들고 만들어진 messages객체를 압축해서 한번에 발송을 요청합니다.

보통은 디바이스에서 바로 푸시알림을 받을 수 있고 최대 30분 정도 늦을 수 있습니다.

Result Data

발송 결과로 ticket을 받게 되는데 ticket id로 FCM와 APNS등에 푸시알림이 잘 전달되었는지 확인할 수 있습니다. 전달결과는 구글과 Apple에서 하루동안 보관하고 ticket id로 확인할 수 있습니다. 그리고 tickets 객체에서도 전달결과를 확인할 수 있습니다.

Expo Push Notification Nodejs SDK 푸시 보내기

tickets 객체 결과를 가공해서 만들어진 data객체를 반환합니다. Server는 반환된 정보를 DB에 저장합니다. Admin은 실패한 푸시가 있을 경우 원인을 확인하고 다시 Push발송을 요청합니다

푸시보내고 받은 결과 처리

공식사이트에서 제공하는 예제에서 소스를 수정했습니다.

앱에서 푸쉬알림을 받았을 때 이벤트를 관리하고 싶다면 참고자료 Notification Channels을 확인하세요.

참고자료

--

--

Responses (2)