[flutter] fcm 알림 - background 뱃지 처리하기 (2편, badges)

이전글
-

[flutter] local notification - FCM foreground 처리하기

[flutter] fcm 알림 - background 처리하기 (1편, 설정)

 

앱을 사용하다보면, 런처 아이콘에 뱃지처리가 되어 있는 것을 볼 수 있을 것이다.
오늘은 이 badge 처리를 하는 법에 대해서 알아보자!

 

firebase message에서 알림을 수신 할 경우, 다음과 같이 payload를 내려주고 있다.

{
  "message":{
    "token":"bk3RNwTe3H0:CI2k_HHwgIpoDKCIZvvDMExUdFQ3P1...",
    "notification":{
      "title":"Portugal vs. Denmark",
      "body":"great match!"
    },
    "data" : {
      "Nick" : "Mario",
      "Room" : "PortugalVSDenmark"
    }
  }
}

 

여기서, iOS Android 와 관계없이 모든 앱 인스턴스가 공통으로 내려주는 필드는 다음과 같다.

- message.notification.title
- message.notification.body
- message.data

 

 그럼 여기서, 뱃지는 어떻게 관리를 할까?

관련해서 정말 많이 삽질을 했었는데, (ㅠㅠ) 뱃지의 경우 서버 단에서 뱃지 개수를 작업을 해줘야 한다.
다시 말해, 유저 테이블에 뱃지 처리를 위한 칼럼을 두고 서버에서 푸시 알림을 보낼 때마다 이를 계산해서 날려주는 방식으로 구현해야 한다는 것이다.

그래서 클라이언트 쪽에서 처리해줘야 하는 것은 서버에서 내려주는 뱃지를 플랫폼 별 수신 환경에 따라 처리만 해주면 된다!

 

 

iOS

iOS는 APNs를 거쳐서 오기 때문에, 그쪽 문서를 확인해봐야한다.
(Apple - Generating a Remote Notification)

Payload Key 부분을 보면 다음과 같이 설정하라고 나와 있다.

"badge" Key에 뱃지 숫자를 계산해서 넣으라고 안내되어 있고, 만약 읽음 처리를 하고 싶은 경우 숫자 0을 넣으라고 적혀있다.

그럼, 서버 쪽에서 apns 값을 내려 줄 때 badge에 해당 값을 포함해서 내려주자

그리고 문서를 더 읽다보면, 백그라운드 수신 트리거를 위해 키 값 하나를 추가 하라고 안내되어 있다.
이 부분도 빼놓지 말고 넣어줘야한다. (만약, 해당 키를 넣지 않고 수신 할 경우 뱃지 카운트가 업데이트 되지 않는다 ㅠ)

백그라운드 수신을 위한 key 값 추가 (content-available)

 

위 2개(뱃지, content-available) 설정이 완료된 경우 FCM 수신 되었을 때 로그 찍어보면 다음과 같이 나올 것이다.

 onMessage: {
      aps:{ 
      "content-available" : 1,
        alert: {
        	title: "title", 
        	body: "body"
        }, 
        badge: 2.0, 
        },         
}

 

아, 여기서 주의해야 할 점이 있는데 background의 경우 제일 낮은 우선순위를 가지고 있어 수신이 안될 수도 있다고 한다...ㅠ  

iOS13 부터 제약사항이 추가된 것이긴 하지만, (21.07.23 기준) iOS13 이상 사용자가 절반을 넘으니, 꼭꼭 확인해서 처리해주자!!

(Apple - Pushing Background Updates to Your App)

// apns-push-type 도 background로 설정 하라고 문서에 적혀 있지만, 나의 경우 딱히 처리 안해주었음에도 불구하고 수신이 잘 되었따.. 운 좋게 다 딜리버리 된건가..!?

apns-priority : 5

 

이렇게 서버에서 3가지 설정을 하면 iOS 설정은 끝!

- content-available: 1 
- apns-priority: 5 / apns-push-type 설정
- badge count (유저별 해당 값 관리해서 내려줌)

 

 

Android

안드로이드는, iOS와 달리 뱃지 카운트 값을 직접 해줘야한다. 
(iOS처럼 native 단에서 제공해주지 않는다 ㅠㅠ)

그래서 네이티브 안드로이드를 개발 할 때 인텐트를 사용해서 구현한다고 한다. 그리고 단말기 제조사 별로 처리를 따로 해줘야한다고... 
(이럴 때 보면 애플이 천사같다)

우린 플러터이니 ㅎㅎ 관련해서 플러그인을 따로 제공해주고 있다.
간단하게 플러그인을 사용하면 되어서 코드가 굉장히 간단하니 얼른 설정해보장!

사용 할 플러그인 - flutter_app_badger

flutter_app_badger | Flutter Package

 

badge의 개수는 서버에서 계산해서 내려오기 때문에, 그 값을 잘 캐치하고, 플러그인을 이용하여 badge count를 업데이트 시켜주면 끝!

notification 수신 처리 하는 메소드에 badge 캐치!

dependencies:
  flutter:
    sdk: flutter
    
  flutter_app_badger: ^1.1.2 # flutter v.1.22 기준

 import 'package:flutter_app_badger/flutter_app_badger.dart';
 
 .. (생략)
 
 int badges = 0; // 추가
 
 if (Platform.isAndroid) {
      title = message['notification']['title'];
      body = message['notification']['body'];
      badges = message['data']['badge'];  // 추가
 }

var details = NotificationDetails(android: androidNotiDetails, iOS: iOSNotiDetails);

FlutterAppBadger.updateBadgeCount(badges); // flutter_app_badger 사용해서 뱃지 update!

 

firebaseMessage configure 에서도 콜백 되는 상황에 따라 뱃지 작업 코드를 추가해준다.

_firebaseMessaging.configure(

      onMessage: (Map<String, dynamic> message) async {
        print("onMessage: $message");
        _showNotification(message); // notification 수신 처리 하는 메소드
      },
      
      onBackgroundMessage: Platform.isIOS ? null : backgroundMessageHandler,
      
      onLaunch: (Map<String, dynamic> message) async {
        print("onLaunch: $message");
        _showPushToast(message);
        FlutterAppBadger.removeBadge();
      },
      
      onResume: (Map<String, dynamic> message) async {
        print("onResume: $message");
        _showPushToast(message);
      },
    );

 

그럼 안드로이드도 끝!!^0^

 

추가로, badger plugin에서 지원 하는 런처들도 확인하여 테스트 할 때 확인하길 바란다.

https://github.com/leolin310148/ShortcutBadger/

GitHub - leolin310148/ShortcutBadger: An Android library supports badge notification like iOS in Samsung, LG, Sony and HTC launc