앞서 만들었던 푸시 알림

안드로이드 푸시 알림 (1) :: http://trandent.com/board/Android/detail/738

안드로이드 푸시 알림 (2) :: http://trandent.com/board/Android/detail/739

에 이어서 푸시 알림 창을 설정하는 방법입니다.

푸시알림창은 3종류가 있습니다.

FirebaseMessagingService.java

1. 아이콘 + 제목 + 한줄 텍스트

안드로이드 푸시 알림 (1)에서 적용되어 있는 알림창이 아이콘 + 제목 + 한줄짜리 텍스트가 나오는 기본적인 알림 창 입니다. 

notificaitionBuilder의 .setContentTitle 의 텍스트가 제목, .setContentText의 텍스트가 내용으로 출력됩니다.

 NotificationCompat.Builder notificationBuilder = new NotificationCompat.Builder(this)
                .setSmallIcon(R.drawable.noti).setLargeIcon(BitmapFactory.decodeResource(getResources(),R.mipmap.ic_launcher) )
                .setContentTitle("Push Title ")
                .setContentText(message)
                .setAutoCancel(true)
                .setSound(defaultSoundUri).setLights(000000255,500,2000)
                .setContentIntent(pendingIntent);

2. 아이콘 + 제목 + 긴 텍스트

알림이 왔을 때는 제목과 아래로 당겨주세요라는 텍스트를 보여 줍니다.

아래로 드래그 하면 긴 텍스트를 보여줍니다.

아래로 드래그 후

위와같이 보여주 주기 위해서는

NotificationCompat.BigTextStyle

을 사용합니다.

기존의 알림창 코드 밑에  추가됩니다.

NotificationCompat.Builder notificationBuilder = new NotificationCompat.Builder(this)
        .setSmallIcon(R.drawable.noti).setLargeIcon(BitmapFactory.decodeResource(getResources(),R.mipmap.ic_launcher) )
        .setContentTitle(title)
        .setContentText("두 손가락을 이용해 아래로 당겨 주세요▼ ")
        .setAutoCancel(true)
        .setSound(defaultSoundUri).setLights(000000255,500,2000)
        .setContentIntent(pendingIntent);

contentTitle 과 contentText는 드래그 전에 표시할 내용 입니다.

NotificationCompat.BigTextStyle style = new NotificationCompat.BigTextStyle(notificationBuilder);
style.bigText(content).setBigContentTitle(title);

bigText와 bigContentTitle은 드래그 후 보여줄 내용입니다.

스크린샷을 기준으로 보게되면

- notificationBuilder > 펼치기 전

.setContentTitle("게시글에 새로운 댓글이 달렸습니다")

.setContentText("두 손가락을 이용해 아래로 당겨 주세요")

- style > 펼친 후

.setBigContentTitle("펼쳐졌을 때 표시 할 제목")

.setBigText("작성글 : ~~~~~에  새로운 댓글이 달렸습니다.")

위와같이 텍스트가 들어가면 스크린샷과 같이 나오게 됩니다.

3. 아이콘 + 제목 + 이미지

알림이 왔을때는 아래로 당겨주세요 라는 메세지를 보여줍니다.

알림창을 아래로 드래그 하면 전송한 이미지가 나타납니다.

아래로 드래그 후

 위와같이 보여주 주기 위해서는

NotificationCompat.BigPictureStyle

을 사용합니다.

앞서 설명한 BigTextStyle과 기본적인 사용법은 같습니다.

NotificationCompat.Builder notificationBuilder = new NotificationCompat.Builder(this)
        .setSmallIcon(R.drawable.noti).setLargeIcon(BitmapFactory.decodeResource(getResources(),R.mipmap.ic_launcher) )
        .setContentTitle(title)
        .setContentText("두 손가락을 이용해 아래로 당겨 주세요▼ ")
        .setAutoCancel(true)
        .setSound(defaultSoundUri).setLights(000000255,500,2000)
        .setContentIntent(pendingIntent);

위 코드 아래에 다음 코드를 붙여 넣어 줍니다.

NotificationCompat.BigPictureStyle style = new NotificationCompat.BigPictureStyle(notificationBuilder);
style.bigPicture(img).setBigContentTitle(title);

bigPicture()가 펼쳤을 때 보여지는 이미지를 넣는 부분이고 저 코드중 img는 Bitmap 파일이 들어가야 됩니다.

저의 경우 push notification을 보낼때 img url를 전송하고 이를 받아서 보여주게 끔 처리하고 있습니다.

관련 글 :: http://trandent.com/board/Android/detail/744

function sendTopicMessage(title, content, imgUrl, link) {
        var message = { title : title , content : content , imgUrl : imgUrl , link : link }
        request({
                url : 'https://fcm.googleapis.com/fcm/send',
                method : 'POST',
                headers : {
                        'Content-Type' : ' application/json',
                        'Authorization' : 'key=Firebase API KEY'
                },
                body : JSON.stringify({
                        "data" : {
                                "message" : message
                        },
                        "to" : "/topics/notice"
                })
        }, function(error, response, body) {
                if (error) {
                        console.error(error, response, body);
                } else if (response.statusCode >= 400) {
                        console.error('HTTP Error: ' + response.statusCode + ' - '
                                        + response.statusMessage + '\n' + body);
                } else {
                        console.log('Done')
                }
        });
} 

node.js api에서 전송한 imgUrl을 받습니다.

FirebaseMessagingService.java

private void sendNotification(String messageBody) {

    try {
        JSONObject obj = new JSONObject(messageBody);
        imgUrl = obj.getString("imgUrl");
    }catch(Exception e){

    }

    if(imgUrl != ""){
        try{
            URL url = new URL(imgUrl);
            URLConnection conn = url.openConnection();
            conn.connect();

            BufferedInputStream bis = new BufferedInputStream(conn.getInputStream());
            Bitmap img = BitmapFactory.decodeStream(bis);

            NotificationCompat.BigPictureStyle style = new NotificationCompat.BigPictureStyle(notificationBuilder);
            style.bigPicture(img).setBigContentTitle(title);
        }catch(Exception e){

        }
    }
}

불필요 한 부분 및 예외 처리는 생략 했습니다.

JSONObject로 image url를 가져와서 InputStream으로 Bitmap image로 만든 후 알림에 넣어주게 됩니다.

그러면 푸시알림을 받았을 때 url로 보낸 이미지가 보이게 됩니다.

다음으로는 웹뷰 하이브리드 앱에서 푸시 알림을 클릭해서 어플을 실행 시켰을 때 메인페이지가 이닌 따로 지정한 URL이 바로 열리게 하는 방법을 적도록 하겠습니다.