phonegap 3.5 에서 푸쉬(Push Notification) 적용하기 - 3. 클라이언트 작성 (iOS)

앞서 phonegap용 플러그인을 설치하고 애플 개발자센터에서 인증서를 발급받았다.

이제 남은것은 클라이언트 프로그램과 서버 프로그램을 작성하는 일이다.

실제 상용 서비스에서는 예외처리등 다소 복잡한(?) 처리를 해주어야 겠지만.. 여기서는 간단하게 테스트용 샘플 프로그램을 통해서 iPhone 푸쉬서비스(APNS)를 이용하는 테스트를 해보도록 하겠다.

폰갭에서 작성하고 있으므로.. 클라이언트 프로그램은 자바스크립트로 구성이 된다.

포함되어야 되는 js 파일은 cordova.js 와 PushNotification.js 파일이다.

PushNotification.js 파일은 자동으로 프로젝트 디렉토리에 생성되지 않으므로 앞에서 작성한 글을 참고해야 된다.

phonegap 3.5 에서 푸쉬(Push Notification) 적용하기 - 1.플러그인 설치

두개의 js 파일은 아래와 같이 포함되게 된다.

<script type="text/javascript" charset="utf-8" src="cordova_ios.js"></script>
<script type="text/javascript" charset="utf-8" src="PushNotification.js"></script>

페이지가 로딩이 되면.. 다음과 같이 우선 푸쉬서버에 등록을 진행한다.

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {

// 푸쉬 서비스에 등록하는 부분임.

var pushNotification = window.plugins.pushNotification;

if (device.platform == 'android' || device.platform == 'Android') {

// 안드로이드 푸쉬 등록

pushNotification.register(successHandler, errorHandler,{"senderID" : "123456789012" , "ecb" : "onNotificationGCM"});

} else {

// 아이폰 푸쉬 등록

pushNotification.register(tokenHandler, errorHandler,{"badge" : "true" , "sound" : "true" , "alert" : "true" , "ecb" : "onNotificationAPN"});

}

}

안드로이드, 아이폰 두가지를 동시에 진행해서.. 코드는 두가지가 있는데 위에 진하게 표시된 아이폰 푸쉬등록 코드를 살펴보자.

register 함수를 통해서 tokenHandler 와 errorHandler 를 등록하고 옵션으로 배열을 넘겼다.

tokenHandler 는 푸쉬서버에 정상적으로 등록이 되어 device token을 얻었을때 호출이되며, errorHandler는 오류상황에서 호출이 된다. 뒷부분의 옵션은 다음과 같다.

badge : 푸쉬 수신시 뱃지를 사용할것인지 설정(뱃지는 아이콘 위에 메시지 갯수를 보여주는 것이다)

sound : 푸쉬 수신시 사운드를 사용할 것인지 여부

alert : 알림메시지를 보여줄지 여부

ecb : 푸쉬 이벤트 받을 함수명 지정

자.. 그럼 위에서 파라메터로 넘긴 함수들을 작성해 보자.

먼저 device token을 얻어왔을때 호출되는 함수인 tokenHandler 이다.

// iOS 푸쉬서비스 등록 성공한 경우(Device Token 얻기)

function tokenHandler (result) {

// Device Token 을 서버로 전송해서 DB에 기록해 둬야 함!!

alert('device token = ' + result);

console.log("device token:" + result);

$.ajax({

  url: 'http://server주소/if_reg.php',

  data: {token:result},

  type: 'POST',

  success: function(res) {

// 서버로 전송이 성공

  }, 

  error: function(res) {

// alert('서비스 오류가 발생했습니다. ');

  }

});

}

tokenHandler 함수에서는 파라메터로 device token 이 넘어온다. device token은 64바이트 문자열로 구성이 되며, 클라이언트에 푸쉬메시지를 보낼때 클라이언트를 구분하는 키값으로 사용되므로 잘 저장해 둬야 한다.

위 예제에서는 device token을 ajax 를 통해서 서버로 전송하는 샘플을 구성했다. 필요에 따라서 로컬(디바이스)에 device token을 저장해 둘수도 있다. 

위와 같이 코드를 구성해서 서버에 device token을 저장해 두었다면.. 이제 서버에서 푸시를 발송할 수 있다.

그러면 이제 마지막으로 푸쉬 수신했을때의 함수를 작성해 보자.

// iOS 푸쉬메시지 도착했을때의 이벤트

function onNotificationAPN(event) {

var pushNotification = window.plugins.pushNotification;

if (event.alert) {

navigator.notification.alert(event.alert);

}

if (event.sound) {

var snd = new Media(event.sound);

snd.play();

}

if (event.badge) {

pushNotification.setApplicationIconBadgeNumber(successHandler, errorHandler, event.badge);

}

}

푸쉬등록시 ecb로 설정했던 onNotificationAPN 함수가 푸쉬가 도착하면 호출이 된다.

alert, sound, badge 등의 정보를 받을수 있으며 이에 따른 처리를 해주면 된다.

event.alert 에는 서버에서 설정한 메시지가 수신되어 아이폰에 알림창으로 보여진다.

아래 사진처럼 화면 상단에 푸쉬로 전달받은 메시지가 보여지게 된다.

event.sound 에는 서버에서 default로 설정할 경우.. 기본 알림음을 들을 수 있다.

event.badge 에 데이터가 있어서 setApplicationIconBadgeNumber 함수를 호출하게 되면.. 앱 아이콘에 메시지 갯수가 표시되게 된다.  아래 그림의 HelloCordova 아이콘과 전화 아이콘에 1 이라고 표시된 아이콘이 뱃지이다.

이렇게 클라이언트에서 푸쉬 등록하고 수신하는 프로그램의 뼈대가 완성되었다 !!