[Firebase] FCM (Firebase Clouding Messaging) + Ionic3 [3]

이전 이야기

http://withhsunny.tistory.com/44 

 

Ionic에 본격적으로 사용하기 위해서는 플러그인 설치가 필요합니다.

예제에 사용할 플러그인은 cordova-plugin-firebase입니다.

 

cordova-plugin-firebase

Supported Cordova Versions

cordova >= 6

cordova-android >=6.3

cordova-ios >= 4

 

Ionic에서 사용할 수 있는 플러그인들은 https://ionicframework.com/docs/native/에서 확인 가능합니다.

FCM을 사용할 수 있는 플러그인으로 phonegap-plugin-push, cordova-plugin-fcm도 있습니다.

FCM만을 사용하고, 다양한 메시지 기능을 사용할 목적이라면 phonegap-plugin-push 사용이 적절합니다.

cordova-plugin-firebase를 선택한 이유는 FCM외에도 firebase에서 제공하는 event, google tag manager 등의 기능을 사용하기 위함입니다.

*Google Play Service를 사용하는 플러그인을 여러개 사용하는 경우 Build 에러가 발생합니다.  각 플러그인에 설치된 Google Play Service 라이브러리 버전이 달라서 발생하는 문제입니다. 문제를 해결하기 위해서는 cordova-android-play-services-gradle-release 플러그인을 설치합니다.

 

 

1 .IONIC 프로젝트를 생성하고(이미 생성했다면 생략), 생성한 프로젝트에서 cordova-plugin-firebase를 추가합니다.

 

1. Install the Cordova and Ionic Native plugins 

 D :\Ionic\firebase> ionic cordova plugin add cordova-plugin-firebase

 D:\Ionic\firebase> npm install --save @ionic-native/firebase 

 

2. Add this plugin to your app's module 

 

 

 

2. 추가를 마쳤다면 이전 포스팅에서 생성해두었던 google-services.json과 GoogleService-Info.plist를 프로젝트의 root 폴더 하위에 추가합니다.

 

This plugin uses a hook (after prepare) that copies the configuration files to the right place, namely platforms/ios/\<My Project\>/Resources for ios and platforms/android for android.

 

 

 

3. 기본으로 생성되어 있는 pages/home/ 하위의 파일들에 firebase를 적용해보겠습니다. home.ts 파일을 아래와 같이 변경합니다.

 

내용복사는 https://ionicframework.com/docs/native/firebase/ 에서 하시면 됩니다.

*getToken()을 수행한 결과를 home.html에 출력하기 위해 value 변수를 추가했습니다.

 

4. 생성한 getToken()함수를 호출하기 위해 home.html 파일을 아래와 같이 변경합니다.

 

[적용화면 Android Emulator]

Android Studio : 3.1.3

target SDK version: 27

* 자신이 사용하는 앱의 android target SDK 버전은 platforms\android\build.gradle 에서 확인할 수 있습니다.

 

5. [GEETTOKEN] 버튼을 클릭하면 화면에 자신에게 할당된 토큰값이 출력됩니다.

token 값은 애뮬레이터, 시뮬레이터, 실 디바이스에서 run하는 경우에만 생성됩니다.

6. 마지막으로 푸시 알림 메시지가 잘 전송되는지 테스트해보겠습니다. 메시지 전송을 위해 Firebase > Clouding Messaging 으로 이동하여 테스트 메시지를 발송합니다.

대상은 '단일 기기'를 선택하고, 5번 단계에서 확인한 토큰값을 입력해주세요.

7. 성공적으로 메시지를 수신했습니다.

다음 포스팅에서는 php 서버를 구현하여 메시지를 발송하는 방법에 대해 다루겠습니다.

읽어주셔서 감사합니다.

[실행 환경]

cli packages:

    @ionic/cli-utils  : 1.19.2

    ionic (Ionic CLI) : 3.20.0

global packages:

    cordova (Cordova CLI) : 7.1.0

local packages:

    @ionic/app-scripts : 3.1.10

    Cordova Platforms  : android 7.1.0

    Ionic Framework    : ionic-angular 3.9.2

System:

    Node : v6.11.4

    npm  : 6.1.0

    OS   : Windows 10