fcm push notification design example / (fcm) 안드로이드 푸시 알림 (3) 알림창 설정


HKH

Share

앞서 만들었던 푸시 알림

 

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

안드로이드 푸시 알림 (2) :: https://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를 전송하고 이를 받아서 보여주게 끔 처리하고 있습니다.

 

관련 글 :: https://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이 바로 열리게 하는 방법을 적도록 하겠습니다. 

 

 

 

첨부파일
Sign in required
  • : {{i.writer }}
    {{i.regdate}}


    {{i.content||breakFilter }}