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

북마크 추가

앞서 만들었던 푸시 알림

 

안드로이드 푸시 알림 (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이 바로 열리게 하는 방법을 적도록 하겠습니다. 

 

 

 

 

HKH
2016-07-22 14:04
SHARE
댓글

감사합니다 알려주신데로 아이디에 고유값이 들어가게 하니 잘 작동하네요 ㅎㅎ 또 막히면 질문 또하러 오겟습니다 ... 헤헤 ..
킴세요똥

알림창 만들때 마지막에 notificationManager.notify(0 를 하는 부분에서 0이 아이디 인데 0대신 푸시알림별로 고유 아이디를 사용하면 가능할거 같긴한데 테스트를 안해봐서 확실하진 않습니다
HKH

아아 감사합니다 그리고 테스트중에 연속으로 두번을 보내봣는데요 그러면 진동은 두번울리긴하지만 알림창에 남아있는건 가장 마지막에 보낸게 남아있더라구요 

두개정도 핸드폰에서 테스트를 한거긴한데  보낸만큼 남겨져있거나 하는건 따로 없을까요 ??
킴세요똥

앱별로 고유키를 받아올수도 있는데 토픽명 대신 고유키를 넣으면 특정 사람에게도 보낼수있습니다
HKH

2번글 6번이랑 연관있는내용인데 거기서 설정한 토픽명 (예를들면 notice )  에 전송하면 전체 다 보내집니다
HKH

안녕하세요 질문이있습니다 위에있는단계까진 어찌어찌 다되었는데요 
구독이란거있잖아요 /topics/notice 이부분은 제한없이 어플에 저렇게 지정하고  보내면  어플을 깔은 사용자들은 다받는건가요 1000명이 넘고그래도??
킴세요똥

if(imgUrl == ""){
      style.bigText(content).setBigContentTitle(title);
}else{
      style.bigPicture(img).setBigContentTitle(title);
}
이미지 없으면 bigText 이미지가 있으면 bigPicture로 하면 될거같네요
HKH

혹시 이미지와 텍스트는 같이 사용 못하나요?
아니면 이미지 url이 없을경우엔 NotificationCompat.BigPictureStyle style = new NotificationCompat.BigPictureStyle(notificationBuilder);
style.bigPicture(img).setBigContentTitle(title);
이걸 적용할 방법이 혹시있을까요?
andy

우와 고지가 보이는것같아요.... 계속 연구해서 적용해보겠습니다!
감사합니다!
andy

저 위에 코드는 수정되는 부분만 써놓은거라
String title = "";
String content = "";
String imgUrl = "";
String link = "";
.
생략
.
imgUrl = obj.getString("imgUrl"); 
로 사용하고 있는걸로 생각하시면 됩니다
HKH

아래 분은 imgUrl, title 변수 선언을 안해서 오류난다는걸로 이해해서 답변 달아 드렸는데
마찬가지로 앞에 String imgUrl = obj.get~~ 이런식으로 해보세요
HKH

아래의 질문중에 " content, title, img 등이 오류" 문제가 저에게도 나타났는데
지금 JSONobject로 보내는 형식인데 이걸  따로 지정하는 방법이 혹시 있나요?
"
JSONObject obj = new JSONObject(messageBody);
imgUrl = obj.getString("imgUrl");
title = obj.getString("title");  "

이 소스를 올린경우 똑같이 오류가 나서요 ,,, 매번 귀찬게 해드려서 죄송합니다.
andy

아 감사합니다.  여기서 해결했네요.. url 포스팅도 기대합니다.
장정욱

지정한 url 정말로 기대되네요^^
조민호

포스팅 감사합니다. 다음에 올려주신다던 따로 지정한 url로 가는것도 엄청 궁금합니다.
에스크리토

안녕하세요 그누보드를 사용해 본적이 없어서 정확한 답변을 해드리기는 어려운데 소스파일 수정이 가능하다면 글쓰기나 댓글등록 버튼을 누를때 호출되는 함수에서 firebase rest api를 호출하면 됩니다
https://trandent.com/board/Android/detail/744
근데 자바스크립트에서 다이렉트로 호출하게 되면 api key가 노출되기 때문에 별도로 nodejs같은 서버를 둬서 거기서 호출하는게 좋을거 같습니다
HKH

안녕하세요 현재 그누보드5 사용중입니다.
알람앱을 현재 구현되었는데 fcm으로요
혹시 게시글이나 댓글등록시 알람전달되게하는방법이나 팁좀주시면 감사하겠습니다..
혹시몰라카톡 ikd7500입니다
취준생입니다 포트폴리오만드는중이라 힘좀주십시요 ㅠㅠ
그램15/취준생/27/남/중화

그냥 알림창에 긴텍스트나 이미지가 적용이 되는지 확인 해보려고 하시는 거라면 그냥 상단에
String title = "제목";
String content ="내용";
String imgUrl = "http://이미지 주소";
이런식으로 박아 놓고 보시면 됩니다.
HKH

content, title, img 같은 경우는 상황에 맞게 직접 정의해서 쓰시는 건데요 저 위에서 예로 든건 node.js로 별도로 푸시 알림을 날리는 서버를 둔 경우 입니다.
{ title : title , content : content , imgUrl : imgUrl , link : link } 
저는 이런 JSON 형식으로 데이터를 쏘기 때문에 안드로이드 프로젝트 내에서는
JSONObject obj = new JSONObject(messageBody);
imgUrl = obj.getString("imgUrl");
title = obj.getString("title");
이런식으로 받아서 사용합니다
HKH

긴텍스트나 이미지 알림 시도해보려는 중인데 괄호안의 content, title, img 등이 오류 나는것도 질문드려봅니다. 시작한지 몇일안된 초보라 맨땅에 헤딩하는 중이네요ㅠ.
ABC
keyboard_arrow_left
keyboard_arrow_up