Cordova FCM 클라이언트 구현하기 (푸시메시지)

FCM은 Firebase Cloud Message의 약자로 구글에서 제공하는 Push 메시지 기능입니다. 초반에는 GCM(Google Cloud Message)이라는 이름으로 안드로이드용만 제공했지만 FCM으로 변경된 후 부터는 iOS를 위한 기능까지 함께 제공하고 있습니다.  

Cordova 프로젝트 생성 및 플러그인 추가

FCMClient라는 이름으로 Cordova 프로젝트를 다음과 같이 생성합니다.

 

생성된 프로젝트의 config.xml 파일을 열어서 id값을 “study.cordova.fcmclient”로 수정합니다. 그 밖의 프로젝트 설정값은 적절히 수정합니다.

config.xml에서 설정하는 id 값은 Android에서는 패키지이름으로 사용되고 iOS는 Identified Id라는 값으로 사용됩니다. 두 플랫폼에서 서로 이름은 다르지만 용도는 디바이스나 마켓에서 각각의 App들을 식별하기 위한 고유값으로 사용된다는 용도는 동일합니다. 그렇기 때문에 실제 프로젝트에서는 이 값이 다른 앱들과 중복되지 않도록 고유한 이름으로 지정해야 합니다. 일반적으로 “도메인이름의 역순.프로젝트이름(소문자)”로 정합니다. 예를 들어서 itpaper.co.kr이라는 도메인을 갖고 있으면서 HelloCordova라는 프로젝트를 진행한다면 다음과 같이 정할 수 있습니다.

kr.co.itpaper.hellocordova

 

프로젝트가 생성되면 다음의 명령어로 FCM 클라이언트 플러그인을 설치합니다.

   

FCM 프로젝트 생성 및 클라이언트 키 발급받기

http://firebase.com 사이트에 접속하고 구글 계정으로 로그인합니다. (IE에서는 사이트가 정상적으로 표시되지 않습니다.) 사이트에 로그인 한 뒤 우측 상단의 GO TO CONSOLE 버튼을 누르고 페이지를 이동합니다.

 

프로젝트 추가하기

페이지를 이동한 후, 새로운 프로젝트를 생성합니다.

 

프로젝트의 이름과 국가/지역을 선택하고 프로젝트 만들기 버튼을 클릭합니다.

 

안드로이드용 기능 등록하기

프로젝트 생성이 완료되고 페이지가 이동되면 화면 중앙부분의 “Android 앱에 Firebase 추가” 링크를 클릭합니다.

 

안드로이드용 기능을 추가하기 위한 화면이 표시됩니다. 여기서 주의할 부분은 “Android 패키지 이름” 입니다. 여기에 입력하는 값이 Cordova 프로젝트의 config.xml에서 설정한 id값과 일치해야 합니다.

 

 

등록이 완료되면 “google-services.json” 파일을 내려받기 위한 버튼이 표시됩니다. 이 버튼으로 파일을 내려받습니다.

 

iOS용 기능 등록하기

팝업을 닫고 “다른 앱 추가” 버튼을 클릭합니다.

 

 

“iOS” 항목을 선택합니다.

 

 

“iOS 번들 ID”값도 Android의 패키지 이름과 같은 값을 사용합니다. 즉, Cordova 프로젝트의 config.xml 파일의 id값으로 설정한 값과 일치해야 합니다.

 

등록이 완료되면 GoogleService-info.plist 파일을 내려 받을 수 있는 버튼이 표시됩니다. 이 버튼을 클릭하여 파일을 내려받습니다.

 

Cordova 프로젝트에 연동정보 파일 추가하기

Firebase에서 내려받은 두 개의 파일을 Cordova 프로젝트 폴더에 추가합니다.

   

HTML 페이지 준비하기

FCM 플러그인은 다음의 기능을 통해서 Firebase 연동키를 취득할 수 있습니다.

FCMPlugin.getToken(function(token) { … Firebase와 연동을 위해 필요한 Client Token … });

이 키는 프로젝트에 배치한 두 파일의 정보를 토대로 App이 실행될 때 플러그인이 Firebase 사이트와 연동하여 미리 받아둔 값 입니다. 이 값이 Push 메시지를 수신할 사용자를 식별하기 위해서 사용됩니다. 즉, 이 값을 자체적으로 구축한 DATABASE 서버에 사용자 정보와 함께 저장해 두어야 한다는 의미가 됩니다.

  HTML 페이지가 작성되면 Andorid 플랫폼을 추가하여 실행해보고 버튼을 통해서 표시되는 값을 확인합니다.

참고!!! iOS의 경우 개발자 계정이 있어야만 결과 확인이 가능하기 때문에 여기부터는 Android용 플랫폼만을 대상으로 진행하도록 하겠습니다.

 

아래와 같이 버튼을 눌렀을 때 연동키가 표시됩니다. 이 키가 자체적으로 구축한 서버로 전송되고, 서버는 이 값을 사용자 정보와 맵핑시켜야 합니다. 우리가 구축하는 서비스에서는 아이디나 회원의 일련번호값을 사용해서 각 사용자를 식별하지만 푸시 발송을 위해서는 이 값을 각 사용자에 대한 고유 식별값으로 사용해야 하기 때문입니다.

 

안드로이드 에뮬레이터에서 출력된 값을 누르고 있으면 다음과 같이 전체 복사가 가능한 메뉴가 표시됩니다. 이 문자열 값을 복사하면 현재 사용중인 컴퓨터의 메모장등에 붙여 넣을 수 있습니다.

   

HTML에서 Push 메시지 수신 이벤트 처리

Javascript에서 deviceready 이벤트를 정의하고 그 안에 다음의 처리를 구현합니다. onNotification() 함수는 HTML이 실행중인 도중 Push 메시지가 수신되면 호출될 이벤트를 등록합니다.

FCMPlugin.onNotification(function(msg) { … 메시지 수신시 수행할 기능… });

위의 구문이 등록된 HTML 코드는 다음과 같습니다.

   

Push 메시지 수신 테스트하기

Firebase 사이트의 프로젝트 화면에서 Notification 메뉴를 선택하면 테스트로 메시지를 전송할 수 있습니다.

 

발송할 메시지를 입력하는 화면에서 아래 스크린샷에 표시된 항목들을 입력합니다.

 

App이 실행중인 경우

아래와 같이 Javascript의 이벤트가 동작하는것을 확인할 수 있습니다. 테스트 발송화면에서 5번 “맞춤 데이터” 항목에 입력한 user_id, user_name 값이 JSON 객체 형식으로 전달됩니다.

 

App이 실행중이지 않은 경우

아래와 같이 상태바 밑의 알림영역에 메시지가 등록되는 것을 볼 수 있습니다. 이 메시지를 클릭하면 App이 실행됩니다. 하지만 알림영역의 메시지를 통해서 App을 실행한 경우 Push로 전달된 데이터를 받지는 못합니다.

 

알림영역을 통한 App 실행시 데이터 전달받기 (Android 전용)

안드로이드는 App이 실행될 때 Intent라는 형태의 데이터를 전달받습니다. 알림영역을 통해 App이 실행될 경우에도 이 데이터를 전달받게 되는데 이 안에 Push 메시지를 통해 전송된 값들이 포함되어 있습니다.

플러그인 설치하기

다음의 명령어를 통해서 플러그인을 설치합니다.

 

 

플러그인을 통한 Javascript 이벤트 정의하기

Cordova의 ondeviceready 이벤트의 콜백함수 안에서 다음의 기능을 사용하면 Android App이 실행될 때 전달되는 Intent 메시지를 받아올 수 있습니다.

window.plugins.intent.getCordovaIntent(function(intent) { … 메시지 수신 성공시 호출됨 …. }, function() { … 메시지 수신 실패시 호출됨 … });

이 함수를 사용하여 index.html에 정의된 deviceready 이벤트 안에 다음과 같이 코드를 추가해 봅시다.

 

Push 알림 없이 실행 후 결과 확인

Push알림 없이 그냥 App을 실행한 경우는 다음과 같이 표시됩니다. 사실 이 경우는 모든 Android App이 처음 실행될 때 전달받는 값이므로 크게 신경쓸 필요가 없는 내용입니다.

 

푸시 메시지 발송 후 결과 확인

다음과 같이 Push 메시지를 보내봤습니다.

 

 

App이 실행중이지 않을 때 Push 알림 수신을 알리는 상태바의 메시지를 통해 App이 실행되면 다음과 같이 표시됩니다. 아래의 코드를 잘 살펴보면 “extras”라는 key에 대한 하위 값으로 Push를 통해 전송하고자 했던 num1, num2라는 값이 지정되어 있는 것을 확인할 수 있습니다.

   

 

최종 구현 소스코드

최종적으로 완성한 소스코드는 다음과 같습니다. 여기에서는 onPushReceive()라는 함수를 만들어놓고 수신된 Push 메시지에 포함된 데이터들만 추출하여 파라미터로 받도록 구성했습니다. 앱이 실행중에 Push가 전송되거나, 알림 메시지를 통한 실행시 모두 alert 다이얼로그를 통해서 메시지의 내용을 표시할 것 입니다.

 

이제 다음과 같이 메시지가 수신되는 것을 확인할 수 있습니다.

   

댓글이 닫혀있습니다.