React Native(Android)에서 푸시 알림을 구현하는 방법

우리가 설치한 앱에서 받는 알림에 대해 생각해 본 적이 있나요? 또는 Swiggy나 Zomato는 창의적인 알림을 통해 어떻게 우리가 오전 3시에 음식을 주문하도록 자극합니까? ?

알림의 개념을 자세히 살펴보겠습니다!

알림이란 무엇입니까?

알림은 일반적으로 앱 인터페이스 외부에서 전달되는 업데이트, 이벤트 또는 작업에 대해 사용자에게 알리기 위해 앱에서 보내는 메시지 또는 경고입니다.

이제 아래와 같이 두 가지 유형의 알림이 있을 수 있습니다.

푸시 알림

푸시 알림은 앱이 포그라운드에서 활발하게 실행되고 있지 않을 때 서버에서 앱으로 전송되는 메시지 또는 경고입니다. 주로 업데이트, 알림 또는 개인화된 콘텐츠를 전송하여 사용자의 참여를 유지하는 데 사용됩니다. 푸시 알림은 iOS용 APN(Apple 푸시 알림 서비스) 또는 Android용 FCM(Firebase Cloud Messaging)과 같은 운영 체제 서비스를 통해 전달됩니다.

푸시 알림 작동 방식:

1. 등록: 앱을 설치하거나 처음 열 때 앱은 OS의 푸시 알림 서비스(APN 또는 FCM)에 고유한 장치 토큰을 요청합니다.
2. 서버 통신: 앱은 이 토큰을 앱의 백엔드 서버로 보내고, 나중에 사용할 수 있도록 저장합니다.
3. 알림 보내기: 서버는 기기 토큰과 함께 알림 페이로드(제목, 메시지, 작업 버튼 등 포함)를 푸시 알림 서비스(APN/FCM)로 보냅니다.
4. 전달: 푸시 알림 서비스는 앱이 실행되지 않는 경우에도 해당 기기로 메시지를 전달합니다.

인앱 알림

인앱 알림은 사용자가 앱을 적극적으로 사용하는 동안 사용자에게 표시되는 메시지 또는 알림입니다. 푸시 알림과 달리 이는 서버 개입이 필요하지 않으며 일반적으로 사용자 작업이나 앱 이벤트의 결과로 앱 자체 내에서 트리거됩니다.

인앱 알림 작동 방식:

1. 이벤트 트리거: 앱 내부에서 특정 이벤트(예: 사용자가 중요한 목표에 도달하거나 주의가 필요한 기능)가 발생하면 앱에서 인앱 알림을 트리거할 수 있습니다.
2. 디스플레이: 알림이 앱 UI 내에 배너, 모달, 팝업으로 표시되어 사용자에게 이벤트에 대해 안내하거나 알려줍니다.
3. 맞춤 로직: 인앱 알림은 앱 코드에 의해 직접 처리되며 앱의 내부 상태 또는 로직에 따라 동적으로 표시될 수 있습니다.

---

React Native Android 앱의 구현:

이제 알림과 그 유형에 대해 알았으니 이제 여러분만의 React 네이티브 앱에 이 기능을 구현할 차례입니다. 이 가이드는 React 네이티브 안드로이드 앱에서만 푸시 알림을 구현하기 위한 것입니다. iOS나 인앱 알림을 원하시면 댓글을 남겨주시면 꼭 올려드리겠습니다!

시작하려면 OneSignal이라는 타사 서비스를 사용하세요. 나는 최근에 이 플랫폼을 발견했고 그들이 제공하는 서비스에 충격을 받았습니다.

원시그널 소개:

OneSignal은 앱 개발자가 모바일 앱, 웹사이트, 이메일 등 다양한 플랫폼을 통해 사용자에게 타겟 알림을 보낼 수 있는 푸시 알림 서비스입니다. 푸시, 인앱 및 웹 알림을 지원하며 세분화, 자동화, A/B 테스트 및 실시간 분석과 같은 기능을 제공합니다. OneSignal은 개인화된 메시지를 보내기 위한 통합하기 쉬운 솔루션을 제공하여 사용자 참여 및 유지율을 향상시키는 데 널리 사용됩니다. 무료 등급은 월 10,000회 무료 이메일 전송, 무제한 모바일 푸시 전송, 여정 워크플로, GDPR 준수, A/B 테스트로 구성됩니다

---

가이드로 돌아가서 푸시 알림에는 FCM(Firebase Cloud Messaging)을 통한 서버 측 처리가 필요하다는 것을 이미 알고 있으므로 따라야 할 몇 가지 단계가 있습니다.

1. Firebase 프로젝트 설정(이미 Firebase 프로젝트가 있는 경우 처음 두 단계 무시):

   • Firebase 콘솔로 이동하여 계정에 로그인하세요.
   • 여기에서 프로젝트를 만들고 다음 단계를 따르세요.
   • 프로젝트가 생성되면 사이드바에서 프로젝트 설정으로 이동하세요.
   • 바에서 서비스 계정으로 이동하면 다음과 같이 표시됩니다.
   • 새 개인 키 생성을 클릭하면 json 파일이 다운로드되어 안전한 곳에 조심스럽게 저장됩니다. OneSignal을 설정하는 동안 이 키가 필요합니다.

2. OneSignal 설정

   • OneSignal에 접속하여 계정을 만드세요.
   • 계정 생성 후 설정 단계를 거쳐 조직을 생성하면 이제 앱을 추가할 수 있는 페이지가 나타납니다.
   • 이 페이지에서 앱 이름을 입력하고 이 경우에는 Google Android(FCM)을 선택하세요. 플랫폼 구성을 클릭하세요.
   • 이제 Firebase 구성 중에 다운로드한 서비스 계정 json 파일을 사용할 이 페이지로 리디렉션됩니다. json을 업로드한 다음 저장하고 계속하기
   • 다음 페이지에서 React Native/Expo를 대상 SDK로 선택한 다음 다시 저장하고 계속하기
   • 다음 화면에서 앱 ID를 확인할 수 있습니다. 이는 기밀 ID이며 이 ID를 사용하면 누구나 앱에서 알림을 실행할 수 있으므로 이 비밀에 주의하세요.

Firebase와 OneSignal 설정이 완료되었습니다. 이제 남은 작업은 코드가 포함된 커피

입니다.

앱에 OneSignal을 추가하고 구성하세요.

• 1단계: 먼저 이 명령을 실행하여 앱에 OneSignal을 추가하세요.

                       npm i react-native-onesignal

• 2단계: 프로젝트의 루트인 index.js, App.tsx 또는 App.js에서 OneSignal을 가져옵니다.

             import { OneSignal } from 'react-native-onesignal';

이 코드 조각을 추가하여 OneSignal을 초기화했습니다

                    OneSignal.initialize('YOUR_APP_ID');

OneSignal과의 원활한 통합 및 연결을 위해 useEffect 후크 내에 이를 래핑할 수 있습니다.

이렇게 하면 OneSignal의 고유 ID로 기기가 초기화되며 사이드바의 구독에서 이를 확인할 수 있습니다. 초기화되는 모든 장치는 이 고유한 OneSignal ID로 식별되며 이미 고유한 ID를 가진 사용자가 있는 경우 다음 코드 조각을 사용하여 수동으로 설정할 수도 있습니다.

                         OneSignal.login(userId)

사용자가 성공적으로 구독하면 대시보드에 다음과 같이 표시됩니다

이제 OneSignal이 제대로 사용되지 않거나 심각한 오류가 발생하는 문제가 발생할 수 있으므로 이러한 문제를 해결하는 데 도움이 되는 부분을 따라해 보세요.

• 3단계: androidappbuild.gradle 내에 이 코드 조각을 추가합니다.

dependencies{
...
implementation('com.onesignal:OneSignal:[3.15.4, 3.99.99]')
...
}

• 4단계: Android에서 푸시 알림에 필요한 권한을 제공하기 위해 androidappsrcmainAndroidManifest.xml에 추가

    <uses-permission android:name="android.permission.INTERNET"></uses-permission>
    <uses-permission android:name="android.permission.POST_NOTIFICATIONS"></uses-permission>

애플리케이션 태그 바로 앞. 그러나 INTERNET 권한은 기본적으로 활성화되어 있으므로 선택 사항입니다.

붐? 푸시 알림 구현을 위한 모든 단계가 다루어지며 OneSignal 대시보드 자체에서 테스트 알림을 보낼 수 있습니다.

직접 시험해보고 의심스러운 경우 아래에 의견을 남겨주세요. 팔로우하시면 더 자세한 안내를 보실 수 있습니다!

참고자료:
https://documentation.onesignal.com/docs/react-native-sdk-setup
https://documentation.onesignal.com/reference/push-notification
https://medium.com/tribalscale/mobile-push-notifications-implementation-in-react-native-with-one-signal-4e810dddd350

즐거운 코딩 되셨나요!?‍?

위 내용은 React Native(Android)에서 푸시 알림을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!