[062] 플러터 (Flutter) 배우기 - Firebase Cloud Messaging (FCM) 푸시 알림 (안드로이드) (Foreground, Background)

안녕하세요~ totally 개발자입니다.

 

FCM (Firebase Cloud Messaging)

 

오늘 다뤄볼 부분은 FCM입니다. 이 파이어베이스 클라우드 메시징을 사용하면 앱이 켜 있는 Foreground나 앱이 종료되거나 앱을 종료하지는 않았으나 켜두지 않은 상태인 Background 형태에서 알림 메시지를 푸시하여 사용자에게 알림을 줄 수 있습니다. 이 FCM을 위해서는 파이어베이스가 필요하며 파이어베이스 연동 관련해서는 아래의 포스팅에서 설명을 드렸으니 참고하시기 바랍니다.

https://totally-developer.tistory.com/112

[040] 플러터 (Flutter) 배우기 - Firebase(파이어베이스) 연동

 

FCM 구현을 위해서는 안드로이드(Android)와 iOS의 구현 방법이 좀 다르지만 이 포스팅에서는 안드로이드만 구현해보도록 하겠습니다. 이미 파이어베이스는 연동이 되어 있는 상태로 아래 실습을 진행하시면 되며 ios의 경우에는 XCode와 Apple 개발자 계정이 필요하므로 이 강좌에서는 간단히 안드로이드만 살펴보겠습니다.

 

Step 1: pubspec.yaml에 들어가셔서 패키지 세팅을 해줍니다.

 

 

Step 2: 먼저 안드로이드의 설정을 위해 android > app > src > main > AndroidManifest.xml에서 다음 5줄을 추가해줍니다.

 

<uses-permission android:name="android.permission.INTERNET"/>

<uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/>

<uses-permission android:name="android.permission.VIBRATE" />

<uses-permission android:name="android.permission.WAKE_LOCK" />

<uses-permission android:name="android.permission.USE_FULL_SCREEN_INTENT" />

 

 

그리고 아래의 내용도 아래 스크린샷처럼 넣어줍니다. 

 

android:showWhenLocked="true"

android:turnScreenOn="true"

 

<meta-data

  android:name="com.google.firebase.messaging.default_notification_channel_id"

  android:value="high_importance_channel"

/>

<intent-filter>

  <action android:name="FLUTTER_NOTIFICATION_CLICK" />

  <category android:name="android.intent.category.DEFAULT" />

</intent-filter>

 

 

Step 3: Android > build.gradle에 들어가셔서 다음처럼 구성해주시면 됩니다. (버전은 다를 수 있습니다)

 

 

 

Step 4: android > app > build.gradle에 들어가셔서 다음처럼 구성합니다.

 

 

Step 5: main.dart에 아래처럼 작성해줍니다. 전체 코드는 맨 아래에 첨부했으니 참고하시기 바랍니다.

 

먼저 6-8번째 라인은 앱이 Background 상태에 있을 때 처리하기 위한 메소드입니다.

그 다음 10~30번째 줄은 기본적인 notification의 설정을 해주기 위함입니다. ios도 여기에서 합니다.

main 부분 작성해주시면 됩니다.

 

그 후에 64-67번째 줄에 보시면 디바이스 토큰을 가져오는 부분이 있습니다. 이 디바이스 토큰을 알아야 해당 디바이스로 제대로 알림을 푸시해줄 수 있기 때문에 반드시 토큰 값을 알아야 합니다. 추후 이것을 파이어베이스에 등록해야 합니다. 72번째에 onMessage 메소드는 앱이 현재 열려 있을 때 (foreground) 푸시 메시지를 확인합니다.

 

 

 

Step 6: 파이어베이스 콘솔에 들어가셔서 Messaging 메뉴(보이지 않으시면 좌측 하단의 "모든 제품" 클릭하시면 볼 수 있습니다. 그리고 첫 번째 캠페인 만들기를 눌러줍니다. 

 

 

Step 7: 다음처럼 설정 후 넘어가줍니다.

 

 

 

Step 8: 적절하게 내용 입력 후 테스트 메시지 전송을 눌러봅니다.

 

 

Step 9: 토큰을 추가해야 하는데 토큰 추가를 위해 먼저 정확한 테스트를 위해 실제 기기(안드로이드는 에뮬레이터도 되긴 합니다)를 연결하여 디버깅 모드(F5 혹은 flutter run --debug lib/main.dart 커맨드 입력)로 실행해줍니다. 

 

위처럼 내 디바이스 토큰이 나온 것을 확인할 수 있습니다. 이 모두를 복사하셔서 FCM 등록 토큰 추가에 넣어줍니다.

 

그 후에 테스트 버튼을 눌러줍니다. Notification 영역에 알림이 제대로 왔다면 성공입니다.

 

90, 98번째처럼 print 부분을 넣어서 메시지가 background, foreground인지 테스트를 다시 해봅니다.

 

앱이 열려 있는 Foreground 상태인 경우 아래처럼 메시지가 뜹니다.

 

앱이 열려 있지 않은 Background 상태인 경우 아래처럼 메시지가 뜹니다. 

 

 

[전체 소스 코드]

 

 

References

https://firebase.flutter.dev/docs/messaging/usage 

 

이 알림을 클릭했을 때 특정한 페이지로 가는 부분은 아래 내용을 참고하시기 바랍니다. 감사합니다.

https://totally-developer.tistory.com/149

[004] 플러터 (Flutter) Tip - Firebase Cloud Messaging (FCM) & flutter_local_notificaton 연동 및 알림, 알림 탭 했을