OneSignal 리엑트네이티브 sdk 설치 방법 및 간단한 사용법

Hyo

Published in

Cross-Platform Korea

10 min readApr 21, 2021

이번 글에서는 푸시 노티피케이션 라이브러리 OneSignal 을 설정하는 방법을 다룹니다. OneSignal을 기본적인 모바일 푸시는 모두 무료입니다. 자세한 사항은 Pricing 링크를 참고하시면 됩니다.

해당 글은 sdk v7.0 기준으로 작성되었습니다.

OneSignal은 오른쪽에서 보는 것처럼 다양한 플랫폼을 지원하며web, android, ios, react-native 등 다양한 sdk를 지원하며 복잡한 노티피케이션을 편리하게 관리하게 도와주는 플랫폼을 운영하고 있습니다.

오래전부터 꾸준히 사용하는 라이브러리인데 매번 앱을 새로 개발하면서 기록한 내용을 보고 싶어서 이렇게 글을 작성하게 되었습니다.

나중에 설명드리겠지만 OneSignal을 필자가 특히 왜 강추하는지 알 수 있습니다.

IOS 설정

해당 링크에서 iOS 설정 방법을 확인할 수 있습니다. 우선 링크에서 1번인 요구사항과, 애플 개발자 계정이 있다는 가정하게 진행을 해보겠습니다.

1. 우선 필요한 필요한 파일들을 받아옵니다. Certificate Request 가 필요한데 위 링크에서 메뉴얼하게 진행하는 방법과 자동으로 하는 방법을 제공해줍니다. 저는 여기서 자동을 선택해서 진행합니다. 그럼 위와 같이 OneSignal에서 제공한 웹페이지가 나옵니다.

위와 같이 진행하면 쉽게 push notificaiton을 OneSignal 과 연동하기 위한 파일을 받을 수 있습니다.

2. 다음으로는 아래와 같이 XCode 내에서 Push Notifications 를 Signing & Capabilities 내에서 추가해줍니다.

3. 1번에서 받은 파일을 OneSignal에 업로드 합니다.

3–4. 진행을 완료하면 `OneSignal` App ID를 부여 받습니다.

Android 설정

다음으로는 안드로이드 설정 방법입니다. 동일하게 OneSignal에서 안드로이드 설정을 누르면 다음과 같이 진행됩니다.

1. 링크에서 확인할 수 있는 1번, 2번 스탭을 통해 프로젝트 Firebase Server Key 를 알아냅니다.

이후에는 동일하게 iOS 에서 했던 것처럼 React Naive 프로젝트를 선택하고 설정을 마무리 합니다.

React Naitve에 설치하기

React Native 설치 방법 또한 React Native SDK 설치법 링크에서 친절하게 알려줍니다.

1. 우선 요구사항으로는 아래를 준비해주셔야 합니다.

OneSignal 계정이 필요합니다.
OneSignal에서 앱을 생성하고 Key와 IDs를 발급 받아야합니다.
iOS, Android, Amazon에서는 위에서 언급했던 것처럼 플랫폼별로 key 값을 준비해주셔야 합니다.

2. 다음으로는 아래 명령어를 통해 OneSignal 리액트네이티브 모듈을 설치합니다.

// npm을 쓰실 경우 npm 명령어로 입력해주세요.
yarn add react-native-onesignal

3. 안드로이드 프로젝트에서 app/build.gradle 을 수정해줍니다. 아래 내용을 추가해주시면 됩니다. 제일 위에 코드를 붙여주셔야 합니다.

buildscript {
     repositories {
         gradlePluginPortal()
     }
     dependencies {
         classpath 'gradle.plugin.com.onesignal:onesignal-gradle-plugin:[0.12.10, 0.99.99]'
     }
}apply plugin: 'com.onesignal.androidsdk.onesignal-gradle-plugin'

4.iOS에서 설치를 마무리 하기 위해서 다음과 같이 진행합니다.

1. 우선 npx pod-install 로 pod 모듈을 설치해줍니다.

2. Xcode에서 File > New > Target 에서 Notification Service Extension을 선택하고 다음을 누릅니다.

3. 위와 같이 Product Name에 OneSignalNotificationServiceExtension을 입력하고 Finish를 누릅니다. 조심해야할 부분은 이후에 나오는 창에서 Active 가 아닌 Cancel 을 눌러야 하는 것입니다.

4. Project Navigator에서 OneSignalNotificationServiceExtension target을 선택합니다. Deployment Target이 iOS 10 이상임을 확인합니다 (onesignal sdk 7.0 기준).

5. 그리고 Podfile 에 아래 코드를 추가해줍니다.

target 'OneSignalNotificationServiceExtension' do   pod 'OneSignal', '>= 3.0', '< 4.0' end

6. npx pod-install 을 수행하고 난 후에 OneSignalNotificationServiceExtension 폴더에서 NotificationService.m 혹은 NotificationService.swift 파일을 추가합니다. 코드는 위에서 언급한 react-native sdk 설치법에서 확인할 수 있습니다.

7. App Group을 추가합니다.

7. App Groups capability 에서 + 를 눌러서 “App Goups” container를 아래와 같이 group.여러분의 BUNDLE IDENTIFIER.onesinal로 지정합니다.

8. OneSignalNotificationServiceExtension 에서 동일하게 진행합니다.

설치를 완료하면 OneSignal SDK 를 사용할 수 있습니다.

OneSignal을 사용하면 우선적으로 굉장히 용이한 부분은 별도의 Push Server를 구축하지 않아도 된다는 점입니다.

실제로 OneSignal을 사용하지 않는다면 User 테이블과 Notification 테이블을 을 구축하여 1:N 관계형을 구축해서 다양한 유저들의 디바이스들을 연결해서 푸시를 날려주어야 할 것입니다. 이러한 수고를 덜어줄 수 있습니다.

이는 바로 setExternalUserId를 통해 OneSignal에서 충분히 가능합니다. 아래와 같이 코드를 적어주면 원하는 userId 를 onesignal token을 매핑시켜줍니다.

OneSignal.setExternalUserId(me.id, (result) => {
  Sentry.setExtra('externalUserId', {
    id: me.id,
    result,
  });
});

참고로 저는 실패할 수 있는 상황을 체크하기 위해 Sentry를 사용하고 있습니다. 위와 같이 원하는 userId와 매핑을 한 후에는 서버에서 간단한 포스트 요청으로 원하는 유저의 디바이스한테만 노티 알림을 날릴 수 있습니다. 관련하여 문서를 참고하시면 되겠습니다.

실재로 postman등을 사용하여 간략하게 테스트 해보실 수 있습니다. https://onesignal.com/api/v1/notifications 해당 url에 아래 body를 주고 요청을 날려보시면 됩니다.

{
  "app_id": "ONESIGNAL 앱 아이디를 넣어주세요",
  "include_external_user_ids": "[유저 아이디 고유 값들을 배열로 넣어주세요.]",
  "data": {"CUSTOM DATA KEY": "CUSTOM DATA VALUE"},
  "headings": {"en": "TITLE"},
  "contents": {"en": "CONTENT"},
  "ios_attachments": {"id": "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"
  "large_icon": "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"
}

header에는 OneSignal 앱의 REST API KEY를 아래와 같이 Basic 을 추가해서 Authorization value로 넣어주세요.

{
  "Authorization": "Basic [REST API KEY]"
}

속성

app_id: onesignal app id
include_external_user_ids: 보낼 사용자 아이디 (배열)
data: 노티 알림에서는 보이지 않지만 앱에서 받고 처리할 데이터
headings: 제목. .en은 default 언어이며 기본으로 localization이 적용 됨.
contents: 노티 내용
ios_attachments: ios 노티 오른쪽에 뜨는 이미지 아이콘
large_icon: android 노티 오른쪽에 뜨는 이미지 아이콘

OneSignal은 이 밖에도 굉장히 많은 기능들을 제공하고 있습니다. 제가 생각하는 killing 요소만 짧게 설명드렸을 뿐이고 앱 내에서 retention을 끌어올리기에 굉장히 유용한 기능들을 제공하기 때문에 노티피케이션을 도입하실 생각이면 정말로 좋은 선택이 될 수 있을 것입니다.

마지막으로 로그아웃 할 때 removeExternalUserId() 호출을 잊지말고 해서 기기의 사용자의 노티 연결을 해제 시켜주세요. 안그러면 다른 유저의 푸시알림을 기기에서 받게 되는 로직상의 오류를 범하게 됩니다.

OneSignal 리엑트네이티브 sdk 설치 방법 및 간단한 사용법

IOS 설정

Android 설정

React Naitve에 설치하기

속성

Written by Hyo