이제 또 필요한 기능이 푸쉬~ 기능인데요... (내부 notification 말구요... 외부에서 푸쉬하는거^^)
https://github.com/phonegap-build/PushPlugin 라는 곳이 있네요~
cordova plugin add https://github.com/phonegap-build/PushPlugin.git
라고 치고... 적용하면 될것 같은데... 역시 오류를 뿜네요~
오류에 대한 해결책은... https://github.com/phonegap-build/PushPlugin/pull/39 여기서 수정하라는 데로 모두 수정하시고,
cordova plugin add https://github.com/phonegap-build/PushPlugin.git -d
옵션값 -d 를 주시고 플러그인 추가 하면 정상적으로 적용이 됩니다.
정상적이라면... src 폴더, config.xml, AndroidManifest.xml 파일, libs 폴더에 자동으로 파일 추가 및 수정이 되어 있을 겁니다.
(cordova 3.0 부터 이렇게 자동으로 수정해 주는건지... 아주 편리하고 좋습니다^^)
근데 assets\www 폴더에 PushNotification.js 파일이 없으므로, 잘 찾아서 copy만 해주시면 됩니다.
여기까지 세팅끝!
지금부터 PushNotification을 웹사이트에 심는 절차 입니다. (심는다는 표현이 ㅎㅎ)
기본적으로 js 파일은 불러와야 겠죠?
<script type="text/javascript" charset="utf-8" src="PushNotification.js"></script>
https://github.com/phonegap-build/PushPlugin 페이지에 Plugin API 부분 부터 script 태그 사이에 넣어 줍니다.
<script type="text/javascript" charset="utf-8">
넣어주세용~
</script>
그럼 전체적으로 아래와 같은 소스가 됩니다.
자세히 보니 $. 쓰더라구요~ 그럼 jquery 불러온다고 말을 해줘야 하는데... 쯧쯧... 아무튼 눈치것 저는 추가했습니다.
그리고 device.platform 이라는 것도 보이는데... 이건 phonegap API Device 잖아~~~ 우뛰~
눈치것 c:\hello>cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-device.git
설치해 줍니다. 그냥 명령어만 치면 해줄게 없는줄 알았더니...
AndroidManifest.xml 파일에 <uses-permission android:name="android.permission.READ_PHONE_STATE" /> 한줄을 추가해 줘야 합니다. 우뛰~ 왜~ 자동으로 안들어가지남~ 우뛰~ (제가 너무 거져 먹을려고 한건지...)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Notification Example</title>
<script type="text/javascript" charset="utf-8" src="jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8" src="PushNotification.js"></script>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
var pushNotification;
pushNotification = window.plugins.pushNotification;
if (device.platform == 'android' || device.platform == 'Android') {
pushNotification.register(successHandler, errorHandler,{"senderID":"본인의Project Number입력","ecb":"onNotificationGCM"});
} else {
pushNotification.register(tokenHandler, errorHandler,{"badge":"true","sound":"true","alert":"true","ecb":"onNotificationAPN"});
}
$("#app-status-ul").append('<li>deviceready event received</li>');
document.addEventListener("backbutton", function(e)
{
$("#app-status-ul").append('<li>backbutton event received</li>');
if( $("#home").length > 0)
{
e.preventDefault();
pushNotification.unregister(successHandler, errorHandler);
navigator.app.exitApp();
}
else
{
navigator.app.backHistory();
}
}, false);
// aditional onDeviceReady work…
}
// result contains any message sent from the plugin call
function successHandler (result) {
alert('result = '+result);
//$("#app-status-ul").append('<li>result = '+result+'</li>');
}
// result contains any error description text returned from the plugin call
function errorHandler (error) {
alert('error = '+error);
//$("#app-status-ul").append('<li>error = '+error+'</li>');
}
function tokenHandler (result) {
// Your iOS push server needs to know the token before it can push to this device
// here is where you might want to send it the token for later use.
alert('device token = '+result);
//$("#app-status-ul").append('<li>device token = '+result+'</li>');
}
// iOS
function onNotificationAPN(event) {
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);
}
}
// Android
function onNotificationGCM(e) {
$("#app-status-ul").append('<li>EVENT -> RECEIVED:' + e.event + '</li>');
switch( e.event )
{
case 'registered':
if ( e.regid.length > 0 )
{
$("#app-status-ul").append('<li>REGISTERED -> REGID:' + e.regid + "</li>");
// Your GCM push server needs to know the regID before it can push to this device
// here is where you might want to send it the regID for later use.
console.log("regID = " + e.regID);
}
break;
case 'message':
// if this flag is set, this notification happened while we were in the foreground.
// you might want to play a sound to get the user's attention, throw up a dialog, etc.
if (e.foreground)
{
$("#app-status-ul").append('<li>--INLINE NOTIFICATION--' + '</li>');
// if the notification contains a soundname, play it.
//var my_media = new Media("/android_asset/www/"+e.soundname);
//my_media.play();
}
else
{ // otherwise we were launched because the user touched a notification in the notification tray.
if (e.coldstart)
$("#app-status-ul").append('<li>--COLDSTART NOTIFICATION--' + '</li>');
else
$("#app-status-ul").append('<li>--BACKGROUND NOTIFICATION--' + '</li>');
}
$("#app-status-ul").append('<li>MESSAGE -> MSG: ' + e.payload.message + '</li>');
$("#app-status-ul").append('<li>MESSAGE -> MSGCNT: ' + e.payload.msgcnt + '</li>');
break;
case 'error':
$("#app-status-ul").append('<li>ERROR -> MSG:' + e.msg + '</li>');
break;
default:
$("#app-status-ul").append('<li>EVENT -> Unknown, an event was received and we do not know what it is</li>');
break;
}
}
</script>
</head>
<body>
<div id="home">
<div id="app-status-div">
<ul id="app-status-ul">
<li>Cordova PushNotification Plugin Demo</li>
</ul>
</div>
</div>
</body>
</html>여기까지를 클라이언트 라고 말하더군요~ 즉, 핸드폰에서 처리해야 할 부분...
여기까지 하고 앱을 구동해 보면 다음과 같은 화면이 나옵니다~ ㅎㅎ
아쉬운건 에뮬에서는 GCM 서버와 통신해서 regID 값을 불러오지 못하네요~
제 폰에서는 바로바로 되는데...
로그값에는 이런 경고문구가...
THREAD WARNING: exec() call to PushPlugin.register blocked the main thread for 92ms. Plugin should use CordovaInterface.getThreadPool().
제폰은 아래와 같이 나옵니다. 이렇게 나와야 정상입니다.
바로 나오는건 아니고.. 약 5초~10초 정도 지나야 나옵니다.
그 다음은 서버... 즉 메세지를 보낼곳에서 해야할 일입니다.
구글링 하면 아래와 같은 간단한 소스가 있습니다.
https://github.com/AndroidBegin/Android-Google-Cloud-Messaging-GCM-using-PHP-Tutorial
여기서도 보시면 Client, Server 두갈래로 나뉩니다.
위에서 코르도바 3.0 기준으로 클라이언트는 끝냈으므로, 서버쪽을 보고... php 구현을 합니다.
메세지를 전송하면 이렇게 오겠죠? ㅎㅎ
솔직히 여기까지 구현하는데... 좀 시간이 걸렸는데... 생략된 부분이 있습니다.
https://code.google.com/apis/console 접속해서...
Create project... 생성후에 API Access 에서 Create new Server key... 를 생성해서
클라이언트에서는 senderID 값을 활용하고,
서버에서는 Google API Key 와 Device Registration ID 값을 활용해야 합니다.
(무슨 소리인지... 하시겠지만, 저도 push를 구현하면서 history를 좀 찾아보고 이해를 했습니다.)
안드로이드는 당연히 구글과 연동될수밖에 없고... 그중에서 무료로 제공해주는 GCM 이라는 서비스가 있다는 것이요~
push server와 제가 말했던 클라이언트, 서버에서의 서버는 서로 다른겁니다.
여기까지 했으니... 한번도 써보지 않은 iOS쪽 구현을 해봐야 할 것 같습니다.
결국 폰갭을 사용한다는 것은 여러가지 OS에서 함께 구현하고자 했던 것이니깐요^^;
그럼 다시 테스트 하러 휘리릭~
