0. 전단

2016년 Google I/O에서 크게 Firebase 업데이트가 발표되었습니다.
그 중에서도 주목도가 높았던 Firebase Notifications.
많은 사람들이

「이것으로 Push 통지를 자유자재로 보낼 수 있다!」

라고 생각했지만 Firebase Notifications 자체는 GUI에서 Push 알림을 보내는 기능이었습니다.

그러나 이 Firebase Notifications는 Google Cloud Messaging에서 Firebase Cloud Messaging이라는 이름을 바꾼 서비스를 사용하는 도구이기 때문에 이 Firebase Cloud Messaging을 사용하여 Push 알림을 보낼 수 있습니다.

이번에는 그 중에서도 Cordova를 이용하여 iOS 앱에서 Firebase Cloud Messaging의 Push 알림을 보낼 수 있는지 시험해보고 싶습니다.

※이 기사는, 2016년 6월 18일에 행해진 GCPUG 센다이 이벤트 에서의 개별 워크로서 실제로 해 본 것을 쓰고 있습니다.

1. Cordova 앱 빌드

언제나처럼 프로젝트 디렉토리에서

cordova create notification

2. 앱 등록

iOS 앱을 Dev Center에 등록합니다.
그때 "Push Notification"에 체크를 넣는 것을 잊지 말고.

3. 플러그인 설치

이번 사용하는 플러그인은 이쪽.
cordova-plugin-fcm

플러그인을 설치합니다.

cd notification
cordova plugin add cordova-plugin-fcm

단지 이 플러그인은 Cordova의 iOS 버전이 4.0.0 이상이면 오류가 발생하는 것으로 보입니다.

cordova platform add [email protected]

4 Cordova config.xml을 편집합니다.

<?xml version='1.0' encoding='utf-8'?>
<widget id="io.thedott.notification" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>notification</name>
    <description>
        Firebase Cloud Messagingのサンプル
    </description>
    <author email="[email protected]" href="http://thedott.io">
        :.shimizu
    </author>
    <content src="index.html" />
    <plugin name="cordova-plugin-whitelist" spec="1" />
    <access origin="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <platform name="android">
        <allow-intent href="market:*" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
    </platform>

    <preference name="BackupWebStorage" value="local"/>
</widget>

에 Cordova를 build

cordova build

xcode를 시작하면 빌드가 통과합니다.

5 Firebase 측에 iOS 앱에 등록하기

6 iOS 앱에 Firebase 추가

Cordova의 경우 루트 폴더에 넣어야 함으로 다운로드 한 GoogleService-Info.plist를 xCode에서 프로젝트 바로 아래로 드래그 드롭하여 복사합니다.

[2017.1.15 추가]
오랜만에 시도한 결과, cordova-plugin-fcm에서는 cordova 프로젝트의 루트 폴더에 위의 plist를 넣는 것처럼 오류가 나 버렸으므로 정확하게는 루트 폴더에 넣어보십시오.

7 받는 쪽 준비

var app = {
    // Application Constructor
    initialize: function() {
        this.bindEvents();
    },
    // Bind Event Listeners
    //
    // Bind any events that are required on startup. Common events are:
    // 'load', 'deviceready', 'offline', and 'online'.
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },
    // deviceready Event Handler
    //
    // The scope of 'this' is the event. In order to call the 'receivedEvent'
    // function, we must explicitly call 'app.receivedEvent(...);'
    onDeviceReady: function() {
        app.receivedEvent('deviceready');
        FCMPlugin.onNotification(
          function(data){
            setTimeout(function(){
                alert(data.notification.body);
            }, 100);
            console.log('data');
          },
          function(data){
            console.log('succsess');
          },
          function(data){
            console.log('error');
          }
        );
    },
    // Update DOM on a Received Event
    receivedEvent: function(id) {
        var parentElement = document.getElementById(id);
        var listeningElement = parentElement.querySelector('.listening');
        var receivedElement = parentElement.querySelector('.received');

        listeningElement.setAttribute('style', 'display:none;');
        receivedElement.setAttribute('style', 'display:block;');

        console.log('Received Event: ' + id);
    }
};

app.initialize();

cordova가 생성한 index.js의 onDeviceReady에 추가했습니다.

    onDeviceReady: function() {
        app.receivedEvent('deviceready');
        FCMPlugin.onNotification(
          function(data){
            setTimeout(function(){
                alert(data.notification.body);
            }, 100);
            console.log('data');
          },
          function(data){
            console.log('succsess');
          },
          function(data){
            console.log('error');
          }
        );
    },

이제 Alert 만이지만 메시지를받을 준비가되었습니다.

8시간이 소요되었으므로 알림만으로도 Notifications에서 테스트합시다.

이것으로 보내면 ...



우선, Notifications에서 Cordova에서도 메시지를 받을 수 있었습니다.

#2에 계속