분류 mobile

Firebase를 사용하여 React Native에서 푸시 알림 보내기

컨텐츠 정보

  • 조회 383 (작성일 )

본문

이 튜토리얼에서는 Firebase를 사용하여 React Native에 푸시 알림을 보내는 방법을 알아 봅니다. 

모든 Firebase 설정 단계와 알림을 보내는 데 필요한 React Native 코드를 안내합니다. 

푸시 알림은 중요한 사용자 유지 수단이므로 React Native 개발자는 빌드하는 모든 앱에서 이를 구현합니다.


https://www.instamobile.io/react-native-tutorials/push-notifications-react-native-firebase/ 


푸시 알림은 특정 모바일 앱에서 특정 작업이 발생했음을 사용자에게 알리기 위해 모바일 장치에 팝업 되는 메시지입니다. 

푸시 알림은 오늘날 모든 모바일 장치에 내장 된 통신 채널이라고 할 수 있습니다. 푸시 알림을 통해 앱은 사용자가 응답 할 수 있는 짧은 메시지로 사용자에게 연락 할 수 있습니다. 

푸시 알림은 SMS 문자 메시지 및 모바일 알림처럼 보이지만 앱을 설치 한 사용자에게만 전달됩니다. 

각 모바일 플랫폼은 iOS, Android, Fire OS, Windows 및 BlackBerry와 같은 푸시 알림을 지원합니다. 그러나 모두 자체 서비스가 있습니다.


이 가이드에서는 FCM (Firebase 클라우드 메시징) 및 React Native를 사용하여 Android 푸시 알림을 보내는 방법을 알아 봅니다. 

FCM은 현재 무료로 사용할 수있는 Android, iOS 및 웹 애플리케이션 용 메시지 및 알림을 위한 크로스 플랫폼 클라우드 솔루션입니다. 

또한 나중에 자신의 React Native 프로젝트에서 구현할 수 있는 몇 가지 다른 중요한 사항을 배우게 됩니다. 

이 React Native 튜토리얼에서는 주로 다음 세 가지 작업을 수행합니다.

  1. react-native-firebase-starter를 사용하여 푸시 알림 샘플 프로젝트 설정
  2. Firebase 실시간 데이터베이스에 푸시 토큰 저장
  3. FCM으로 푸시 알림 트리거, Firebase Cloud Functions를 사용하여 저장된 푸시 토큰 쿼리

푸시 알림을 작동 시키는 기본 프로세스를 보여주기 위해 많은 값과 문자열을 하드 코딩 할 것입니다.


푸시 알림은 어떻게 작동합니까? 


우선 푸시 권한을 요청하는 요청을 보내 사용자를 식별해야 합니다. 요청은 FCM에 의해 확인되며 토큰 ( '푸시 토큰'이라고 함)으로 응답합니다. 

그런 다음 이 자습서를 위해 Firebase 실시간 데이터베이스 인 서버 측에 플래그십 푸시 토큰을 저장해야 합니다. 아래의 시각적 순서도에서 지식을 얻을 수 있습니다.


push notifications 


Firebase 클라우드 함수로 푸시 알림 트리거 


특정 사용자에 대한 푸시 토큰이 있으면 Firebase 클라우드 기능을 사용하여 푸시 알림을 트리거 합니다. 실제로 이는 자체 서버의 대안입니다.


push notifications react native 


위의 두 스크린 샷은 Firebase를 사용하여 React Native에서 푸시 알림을 트리거 하는 데 필요한 정확한 데이터 흐름을 보여줍니다.


이제 Firebase를 사용하여 React Native에서 푸시 알림을 트리거 하기 위해 수행해야 하는 작업에 대한 높은 수준의 개요를 얻었으므로 작업을 시작하겠습니다. 특정 사용자의 권한을 요청하여 특정 사용자의 푸시 토큰을 가져 오는 시나리오를 구현 한 다음 Firebase 클라우드 기능을 사용하여 사용자를 앱에 환영하는 푸시 알림을 보냅니다.


React Native Firebase 패키지로 푸시 알림 설정 


이 단계에서는 react-native-firebase 패키지를 사용하여 React Native 프로젝트에서 푸시 알림 지원을 설정합니다. react-native-firebase는 모바일 개발자가 Firebase SDK를 통합 할 수 있도록 잘 테스트 된 모듈 식 패키지입니다. 

20 개 이상의 Firebase 서비스와 함께 iOS 및 Android 플랫폼을 모두 지원합니다. 

또한 기성품 시작 상용구 템플릿을 제공하므로 전체 프로젝트를 쉽게 설정할 수 있습니다. 

하지만 자체 Firebase 콘솔에서 google-service.json 파일을 생성하려면 시작 템플릿을 구성해야 합니다.


여기서 첫 번째 단계는 git 초기화 디렉토리에서 다음 명령어를 사용하여 react 네이티브 firebase stater 템플릿을 복제하는 것입니다.


git clone https://github.com/invertase/react-native-firebase-starter pushdemo 


그런 다음 추가 설정에 따라 Firebase 콘솔에서 Google 서비스 파일을 생성하고 android / app 폴더에 추가해야 합니다.


이제 Firebase 콘솔로 이동하여 아래 스크린 샷과 같이 새 프로젝트를 만듭니다.


react native firebase 


새 프로젝트가 생성되면 Android 앱을 선택하고 IDE에서 MainApplication.java를 엽니 다. com.invertase.rnfirebasestarted라는 이름의 가져온 패키지가 표시됩니다. 아래 스크린 샷과 같이 com.invertase.rnfirebasestarter를 복사하여 Firebase 콘솔에 붙여 넣어야 합니다.


rnfirebasestarter 


스크린 샷의 안내 사항을 따르고 google-services.json 파일을 프로젝트 폴더에 다운로드합니다.


firebase console react native 


여기에서 아래 스크린 샷과 같이 Android 애플리케이션에 Firebase를 등록해야 합니다.


firebase react native 


google-services.json 파일을 자신의 프로젝트 폴더에 다운로드 한 후 파일을 기본 프로젝트 폴더에서 프로젝트의 앱 폴더로 이동해야 합니다.


1_Azgpa8Yq9cXvHicNpDRJPg.png 


그런 다음 아래 명령을 사용하여 앱 / 프로젝트를 시작합니다.


react-native run-android 


Android 에뮬레이터에서 다음 앱을 볼 수 있어야 합니다.


push notifications android react native 


Firebase 데이터베이스에 푸시 알림 토큰 저장 


이 단계에서는 푸시 알림을 허용하고 푸시 토큰을 검색하기 위해 사용자 장치에 권한 요청을 보내야 합니다. 사용자가 권한을 부여하면 검색된 토큰을 Firebase 실시간 데이터베이스에 저장합니다.


먼저 사용자가 이미 푸시 권한을 허용했는지 확인해야 합니다. 토큰을 저장하기 위해 다음 코드 스니펫을 사용합니다.


  1. firebase.messaging().hasPermission()
  2. .then(enabled => {
  3. if (enabled) {
  4. alert('Yes')
  5. } else {
  6. alert('No')
  7. }
  8. });

푸시 알림 권한의 허용 여부에 따라 예 또는 아니요로 알림이 표시됩니다.


firebase push notifications react native 


다행히 푸시 알림에 대한 권한은 Android 플랫폼에서 기본적으로 YES이므로 iOS에서만 명시적 권한을 요청하면 됩니다.


푸시 알림 토큰 검색 


Firebase React Native 패키지를 활용하여 다음 코드를 사용하여 Firebase SDK에서 fcmToken을 가져옵니다.


  1. firebase.messaging().getToken()
  2. .then(fcmToken => {
  3. if (fcmToken) {
  4. // user has a device token
  5. } else {
  6. // user doesn't have a device token yet
  7. }
  8. });

토큰은 아래 에뮬레이터 스크린 샷에 표시된 경고 상자에 표시됩니다.


react native push notifications 

이제 Firebase 콘솔에서 빠른 테스트를 수행하여 작동하는지 확인해 보겠습니다.


push notifications firebase android 


검색된 푸시 토큰에 푸시 알림을 보내려고 합니다. 따라서 아래 스크린 샷과 같이 토큰을 'FCM 등록 토큰 추가' 입력란에 붙여 넣습니다.


firebase react native notifications 


이제 테스트 버튼을 클릭하여 푸시 알림이 에뮬레이터에 표시되는지 테스트합니다.


send notifications react native 

노트: 


  • Android 에뮬레이터에서 푸시 알림을 검색하려면 Google 계정이 필요합니다.
  • iOS 시뮬레이터에는 푸시 알림을 보낼 수 없습니다. iOS 실제 기기에만 푸시 알림을 보낼 수 있습니다.

Firebase 데이터베이스에 푸시 토큰 저장 


사용자가 푸시 알림에 성공적으로 등록했고 유효한 푸시 토큰이 있다고 가정하고 나중에 사용할 수 있도록 데이터베이스에 저장하겠습니다. 이를 위해 다음 작업을 수행합니다.


  1. 권한이 이미 부여되었는지 확인하십시오.
  2. 사용자 데이터와 토큰을 데이터베이스에 저장합니다.

모든 로직은 비동기 함수 componentDidMount()에서 아래 코드 스니펫에 표시됩니다.


  1. async componentDidMount() {
  2. const enabled = await firebase.messaging().hasPermission();
  3. if (enabled) {
  4. firebase
  5. .messaging()
  6. .getToken()
  7. .then(fcmToken => {
  8. if (fcmToken) {
  9. console.log(fcmToken);
  10. firebase
  11. .database()
  12. .ref("/users/" + Math.floor(Math.random() * Math.floor(1000)))
  13. .set({
  14. email: "instaman@gmail.com",
  15. notification_token: fcmToken,
  16. created_at: Date.now(),
  17. })
  18. .then(res => {
  19. console.log(res);
  20. });
  21. } else {
  22. alert("user doesn't have a device token yet");
  23. }
  24. });
  25. } else {
  26. alert("no");
  27. }
  28. }

보시다시피, 우리는 성공적으로 실행하기 위해 사용자 데이터를 하드 코딩했습니다. 그런 다음 아래 스크린 샷과 같이 푸시 토큰을 Firebase 실시간 데이터베이스에 저장합니다.


token firebase database 


Firebase Cloud 함수로 푸시 알림 트리거 


이제 각 신규 사용자에 대해 푸시 알림을 트리거하여 앱에 환영한다고 가정 해 보겠습니다. 클라우드 기능을 생성하여 이를 달성 할 수 있습니다. 따라서 이 가이드를 따라 클라우드 기능에 대한 지원을 활성화하십시오.


그런 다음 프로젝트의 index.js 파일에 아래 코드 스 니펫에 제공된 코드를 붙여 넣어야 합니다.


  1. const functions = require("firebase-functions");
  2. const admin = require("firebase-admin");
  3. admin.initializeApp(functions.config().firebase);
  4. exports.sendPushNotification = functions.database
  5. .ref("users/{userID}")
  6. .onCreate(event => {
  7. const data = event._data;
  8. payload = {
  9. notification: {
  10. title: "Welcome",
  11. body: "thank for installed our app",
  12. },
  13. };
  14. admin
  15. .messaging()
  16. .sendToDevice(data.notification_token, payload)
  17. .then(function(response) {
  18. console.log("Notification sent successfully:", response);
  19. })
  20. .catch(function(error) {
  21. console.log("Notification sent failed:", error);
  22. });
  23. });

여기에서는 사용자가 새 노드를 추가하고 새로 데이터를 삽입 할 때마다 트리거 되는 함수를 만들었습니다. 이 경우 사용자에게 푸시 알림을 보냅니다.


해당 함수를 만든 후에는 Firebase 배포를 실행하여 함수를 클라우드로 전송해야 합니다. 그런 다음 IDE 터미널 창에 다음 지침이 표시됩니다.


firebase deploy 


이제 아래 스크린 샷과 같이 하드웨어 기기에서 앱을 실행 해 보겠습니다.


android push notifications react native 


보시다시피 첫 번째 알림을 받았습니다. 축하합니다! Firebase를 사용하여 React Native에서 푸시 알림을 구현했습니다. 좋아요!


요약 


푸시 알림은 뛰어난 성장 유지 수단이므로 성공적인 모바일 앱을 개발하려면 이를 활용해야 합니다. 다행히도 RNFirebase와 같은 NPM 패키지를 사용할 수 있으므로 React Native에서 이 작업을 더 쉽게 수행 할 수 있습니다.


이 자습서에서는 Android에서 Firebase 푸시 알림을 설정하는 방법과 이를 트리거 하는 방법을 배웠습니다. 이 가이드에는 Firebase 실시간 데이터베이스를 사용하여 푸시 토큰을 저장 한 다음 클라우드 함수로 메시지를 트리거 하는 방법도 포함되어 있습니다.


React Native 푸시 알림에 대한 튜토리얼을 즐겼다면 친구와 공유하십시오. 즐거운 코딩 되세요!